在 ViewModelBuilder 中构建 ViewComponent

Question

我想将视图模型的构建保留在其各自控制器的视图模型构建器中（从这里开始称为 vmb）。以 HomeController 为例，我将从它的构造函数 HomeViewModelBuilder 中实例化。

public class HomeController : Controller
{
    private readonly HomeViewModelBuilder _viewModelBuilder;

    public HomeController(IUserManagerService userManagerService, IEmployeeService employeeService, IExampleServiceZ exampleServiceZ)
    {
       _viewModelBuilder = new HomeViewModelBuilder(userManagerService, employeeService, exampleServiceZ);
    }

    public ActionResult Index()
    {
        var model = _viewModelBuilder.BuildHomeViewModel(CurrentUserId);
        return View("Index", model);
    }
}

然后向这个 vmb 的构造函数传递从 repo 中提取数据所需的任何服务。

由于 .Net Core 没有带来子操作，我需要决定如何继续移植 asp.net mvc5 应用程序。一些子动作视图调用它们自己的子动作。这不是关于嵌套视图组件的问题，而是关于如何使用视图组件的问题，请记住我想在我的构建器中进行构建。目前我们正在使用一个肮脏的 hack 和 jquery 像这样：

视图上将保存子操作的容器

<div id="subsections-container">
    @*This is a place holder for the $.get*@
</div>

在视图的底部是脚本：

@section scripts{

    <script type="text/javascript">
        $(function () {
            $(document).ready(function() {
                var fieldsUrl = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Url.Action("Index", "SubSection")));

                $.get(fieldsUrl, { sectionId: @Model.Section.Id }, function (data) {
                    $("#subsections-container").html(data);
                });
            });
        });

    </script>
}

我想开始使用视图组件，但是http://www.davepaquette.com/archive/2016/01/02/goodbye-child-actions-hello-view-components.aspx给出的例子

包含在此处

namespace MyWebApplication.ViewComponents
{
    public class WhatsNewViewComponent : ViewComponent
    {
        private readonly IArticleService _articleService;

        public WhatsNewViewComponent(IArticleService articleService)
        {
            _articleService = articleService;
        }

        public IViewComponentResult Invoke(int numberOfItems)
        {
            var articles = _articleService.GetNewArticles(numberOfItems);
            return View(articles);
        }
    }
}

他正在该视图组件的调用内部构建。我想在 vmb 中这样做。

第二个问题是我有一个 ajax 表单想要刷新该容器中的数据。

视图中的表单：

@using (@Ajax.BeginForm("Update", "SubSection", null, new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "subsections-container", OnBegin = "blockModal()", OnComplete = "hideModal();" }, new { id = "frm-subsection-update", @class = "form-horizontal" }))
{
}

子节控制器中的动作

[HttpPost]
[Authorize(Roles = RoleName.SubSectionUpdate)]
public ActionResult Update(SubsectionUpdateViewModel model)
{
    var subsection = new SubsectionDto();

    if (model.Id > 0)
        subsection = _subsectionService.Get(model.Id);

    subsection.InjectFrom(model);
    _subsectionService.Update(subsection);

    return RedirectToAction("Index", new { });
}

如果这不再是一个动作而是一个视图组件，我在这里返回什么？

Answer 1

他正在该视图组件的调用内部构建。我想在 vmb 中这样做。

在HomeViewModel 中添加WhatsNewViewComponentViewModel 属性并将创建WhatsNewViewComponentViewModel 的责任交给HomeViewModelBuilder

在Index.cshtml 的Home 控制器中

@await Component.InvokeAsync("WhatsNew",Model.WhatsNewViewComponentViewModel)

WhatsNewViewComponent：

public class WhatsNewViewComponent : ViewComponent
{  
    public IViewComponentResult Invoke(WhatsNewViewComponentViewModel model)
    {
        return View(model);
    }
}

如果这不再是一个动作而是一个视图组件，我在这里返回什么？

从 Action 中返回 ViewComponent

[HttpPost]
[Authorize(Roles = RoleName.SubSectionUpdate)]
public ActionResult Update(SubsectionUpdateViewModel model)
{
    .......
    return ViewComponent("VCName", VCModel);
}