ASP.NET MVC中如何在视图内调用带各自ViewModel的多个分部视图

API 探路者

2026-8-5

问题描述

我有一个名为Register的视图，当前使用@Html.Partial("ViewName")调用其他分部视图，希望让各个分部视图调用对应的ViewModel。我知道可以在视图顶部声明多个ViewModel及其字段，但想确认是否有更优的实现方案。

当前视图代码：

@model ViewModels.Account.RegisterVM 

<div class="accordion" id="acdRegistration">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headClient">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#colClient" aria-expanded="true" aria-controls="colClient">
                Client Registration
            </button>
        </h2>
        <div id="colClient" class="accordion-collapse collapse show" aria-labelledby="headClient" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterClient")
                <!-- 这里需要调用ClientRegistrationVM -->
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headClinic">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colClinic" aria-expanded="false" aria-controls="colClinic">
                Clinic Registration
            </button>
        </h2>
        <div id="colClinic" class="accordion-collapse collapse" aria-labelledby="headClinic" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterClinic")
                <!-- 这里需要调用ClinicRegistrationVM -->
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headRdvm">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colRdvm" aria-expanded="false" aria-controls="colRdvm">
                RDVM Registration
            </button>
        </h2>
        <div id="colRdvm" class="accordion-collapse collapse" aria-labelledby="headRdvm" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterUser")
                <!-- 这里需要调用UserRegistrationVM -->
            </div>
        </div>
    </div>
</div>

当前ViewModel代码：

public class RegisterVM 
{
    public List<string> RegistrationTypes
    {
        get { return new List<string>() { "Client", "Clinic", "RDVM" }; }
    }

    [Required(ErrorMessage = "Email address required")]
    public string EmailAddress { get; set; }

    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string PatientName { get; set; }
    public string PatientId { get; set; }

    [Required(ErrorMessage = "Registration type required")]
    public string RegistrationType { get; set; }
}

public class ClinicRegistrationVM 
{
    [Required(ErrorMessage = "Email address required")]
    public string EmailAddress { get; set; }

    public string PatientName { get; set; }
    public string PatientId { get; set; }
}

public class ClientRegistrationVM 
{
    [Required(ErrorMessage = "Email address required")]
    public string EmailAddress { get; set; }

    [Required(ErrorMessage = "Last name required")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "First name required")]
    public string FirstName { get; set; }

    public string PatientName { get; set; }
    public string PatientId { get; set; }
}

public class UserRegistrationVM 
{
    [Required(ErrorMessage = "Email address required")]
    public string EmailAddress { get; set; }

    public string PatientName { get; set; }
    public string PatientId { get; set; }
}

最优实现方案

推荐重构主ViewModel，将各个子ViewModel作为主模型的属性，配合强类型分部视图传递模型，这是符合MVC最佳实践的方案，具体步骤如下：

1. 修改主ViewModel（RegisterVM）

将各个子ViewModel作为主模型的属性，实现模型的层级化管理：

public class RegisterVM 
{
    public List<string> RegistrationTypes
    {
        get { return new List<string>() { "Client", "Clinic", "RDVM" }; }
    }

    [Required(ErrorMessage = "Email address required")]
    public string EmailAddress { get; set; }

    [Required(ErrorMessage = "Registration type required")]
    public string RegistrationType { get; set; }

    // 新增子ViewModel属性，初始化避免空引用
    public ClientRegistrationVM ClientVM { get; set; } = new ClientRegistrationVM();
    public ClinicRegistrationVM ClinicVM { get; set; } = new ClinicRegistrationVM();
    public UserRegistrationVM UserVM { get; set; } = new UserRegistrationVM();
}

2. 配置强类型分部视图

每个分部视图顶部声明对应的ViewModel类型，专注处理自身的表单逻辑，例如_RegisterClient.cshtml：

@model ViewModels.Account.ClientRegistrationVM

<div class="mb-3">
    <label asp-for="EmailAddress" class="form-label">邮箱</label>
    <input asp-for="EmailAddress" class="form-control" />
    <span asp-validation-for="EmailAddress" class="text-danger"></span>
</div>
<div class="mb-3">
    <label asp-for="LastName" class="form-label">姓氏</label>
    <input asp-for="LastName" class="form-control" />
    <span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="mb-3">
    <label asp-for="FirstName" class="form-label">名字</label>
    <input asp-for="FirstName" class="form-control" />
    <span asp-validation-for="FirstName" class="text-danger"></span>
</div>
<!-- 其他Client专属字段 -->

3. 修改主视图的分部调用逻辑

调用@Html.Partial时明确传递对应的子模型：

@model ViewModels.Account.RegisterVM 

<div class="accordion" id="acdRegistration">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headClient">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#colClient" aria-expanded="true" aria-controls="colClient">
                Client Registration
            </button>
        </h2>
        <div id="colClient" class="accordion-collapse collapse show" aria-labelledby="headClient" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterClient", Model.ClientVM)
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headClinic">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colClinic" aria-expanded="false" aria-controls="colClinic">
                Clinic Registration
            </button>
        </h2>
        <div id="colClinic" class="accordion-collapse collapse" aria-labelledby="headClinic" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterClinic", Model.ClinicVM)
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headRdvm">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#colRdvm" aria-expanded="false" aria-controls="colRdvm">
                RDVM Registration
            </button>
        </h2>
        <div id="colRdvm" class="accordion-collapse collapse" aria-labelledby="headRdvm" data-bs-parent="#acdRegistration">
            <div class="accordion-body">
                @Html.Partial("_RegisterUser", Model.UserVM)
            </div>
        </div>
    </div>
</div>

方案优势

类型安全：编译阶段即可检测模型传递错误，避免运行时异常
职责分离：每个分部视图专注于自身ViewModel的逻辑，符合单一职责原则
可维护性：修改子ViewModel字段时，仅需调整对应分部视图，不影响其他模块
独立验证：各子ViewModel的验证规则独立定义，ASP.NET MVC会自动处理分部视图的验证错误

补充：字段同步处理

如果主ViewModel的公共字段（如EmailAddress）需要同步到子ViewModel，可以在控制器中处理：

public ActionResult Register()
{
    var model = new RegisterVM();
    // 同步主模型邮箱到各子模型
    model.ClientVM.EmailAddress = model.EmailAddress;
    model.ClinicVM.EmailAddress = model.EmailAddress;
    model.UserVM.EmailAddress = model.EmailAddress;
    return View(model);
}

内容的提问来源于stack exchange，提问作者Michaelweston

ASP.NET MVC中如何在视图内调用带各自ViewModel的多个分部视图

1. 修改主ViewModel（RegisterVM） #

2. 配置强类型分部视图 #

3. 修改主视图的分部调用逻辑 #

1. 修改主ViewModel（RegisterVM）

2. 配置强类型分部视图

3. 修改主视图的分部调用逻辑