在 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 的构造函数传递从存储库中提取数据所需的任何服务。

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

视图上将容纳子操作的容器

<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 { });
}

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

Answer 1

he is building inside the invoke of that view component. I want to do that in the vmb.

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

在 Home 控制器的 Index.cshtml 中

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

WhatsNewViewComponent :

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

If this is no longer an action but a viewcomponent, what do I return here?

Return ViewComponent 来自 Action

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

在 ViewModelBuilder 中构建 ViewComponent

Build ViewComponent in ViewModelBuilder

c#

asp.net-core

asp.net-core-viewcomponent