如何有条件地/动态地在 Asp.Net Core Razor 页面中包含 Razor 子页面？

Question

这里是 Asp.Net Core/Razor 的新手。

我正在构建一个 Asp.Net Core Razor 页面。 我有一个作为父页面的主要 Razor 页面。 我有一组子页面（超过 20 种不同的子页面）。

我希望能够有条件地包含子页面 基于父页面视图模型中的标识符。

我的父 Razor 页面的基本简化版本如下所示：

@model DocumentsViewModel

<div>
<!-- Some basic common form functionality--!>
</div>

<div class="WhereToEmbedChildForm">
        @Html.Partial("SomeChildViewName")

        @{ Html.RenderPartial("SomeChildViewName"); }

        @{<partial name="SomeChildViewName" for="CurrentDocumentTypeViewModel"/>}
</div>

我的父页面视图模型如下所示：

public class SampleModel
{
   public int ChildViewType { get; set; }
   public string ChildViewModelName { get; set; } 
}

为此，我有一些问题：

1. 是否可以动态创建我的 ViewModel 对象 (DynamicObject) 以包含 孩子的视图模型？

2. 如何在我的父页面中动态包含子视图（和关联的视图模型）？

3. 我应该使用还是 @Html.Partial()/@{Html.RenderPartial} ？

4. 鉴于 Razor，是否有可能做我正在尝试的事情？

Answer 1

请注意，在创建新应用时，使用标签库优于 HTML 助手。

概念验证：

SampleModel的更新版本：

public class SampleModel
{
    public object ChildViewModel { get; set; } 
    public string ChildViewName { get; set; }
}

还有一个简单的子模型

public class ModelForPartialOne
{
    public string SomeDemoProperty { get; set; }
}

在控制器中

private ModelForPartialOne GetModelForPartialOneWithDataFromDb()
{
    // just a mock db call
    return new ModelForPartialOne {SomeDemoProperty = "Hello from one"};
}

public IActionResult SomeControllerAction()
{
    const int childViewType = 42; // you will get this from somewhere
    
    switch (childViewType)
    {
        case 42:
            return View(new SampleModel
            {
                ChildViewModel = GetModelForPartialOneWithDataFromDb(),
                ChildViewName = "_partialOne",
            });
    }
}

在 Razor 主视图中

@model SampleModel

<div class="WhereToEmbedChildForm">
    <partial name="@Model.ChildViewName" model="@Model.ChildViewModel"/>
</div>

_partialOne.cshtml

@model ModelForPartialOne

<h1>Hello from partial one</h1>
<p>SomeDemoProperty: @Model.SomeDemoProperty</p>

为了避免臃肿的控制器，填充视图模型的逻辑应该委托给业务逻辑服务。

上述解决方案的替代方案是使用视图组件。

使用 Core 5 MVC 应用程序测试代码。

更新

OP 后来问我这个问题：

但是，现在我正在尝试从我的部分视图中检索数据 回邮。提交按钮位于我的父页面上。

让我们像这样重写主视图：

@model SampleModel

<div class="WhereToEmbedChildForm">
    <form method="post" asp-action="@Model.PostbackAction">
        <partial name="@Model.ChildViewName" model="@Model.ChildViewModel"/>
        <button type="submit">Click Me</button>
    </form>
</div>

我们需要一个带有如下表单数据的部分 _partialTwo.cshtml：

@model ModelForPartialOne

Some demo property:
<input asp-for="SomeDemoProperty">

将此属性添加到SampleModel：public string PostbackAction { get; set; }

并修改控制器的 GET 方法以返回：

return View(new SampleModel
{
    ChildViewModel = GetModelForPartialOneWithDataFromDb(),
    ChildViewName = "_partialTwo",
    PostbackAction = "MyPostbackAction"
});

通过上述更改，我们可以打开带有表单的页面。现在我们需要一个控制器动作来处理回发。这就是有趣的地方，因为我们不能在 POST 方法中使用 object 作为模型参数的类型；代码需要知道用于模型绑定的类型。

[HttpPost]
public IActionResult MyPostbackAction(ModelForPartialOne model)
{
    // do something
    return View("Index");
}