MVC Core中绑定多下拉框并在回发时获取选中ID

场景概述 #

正在开发MVC Core表单，申请人需为申请定义若干审批人。Get请求时固定返回4个审批角色：

• Category Head
• Governance Head
• Concessions VP
• Commercial EVP

相关代码片段 #

HttpGet 代码

[HttpGet]
public async Task<IActionResult> Create()
{
   // 省略部分代码...

   // 获取4个SystemRole模型
   model.ApprovingRoles = (await serviceLookup.GetAllRolesAsync(ct)).ToList();
}

SystemRoleModel 定义

public class SystemRoleModel
{
    public int    Id     { get; set; }
    public string Name   { get; set; }
    public bool   Active { get; set; }
}

视图层级

Create.cshtml → LetterEditor.cshtml → LetterAttachmentEditor.cshtml

Create.cshtml

@model LetterModel

@{
    ViewData["Title"] = "Create RL";
}

@Html.EditorFor(m => m, "LetterEditor", new { ShowApprovers = "1", ShowAttachments = "1", ShowButtons = "1" } )

LetterEditor.cshtml

@model LetterModel
    ...
    <div class="panel-body">
        @await Html.PartialAsync("EditorTemplates/LetterAttachmentEditor", new LetterAttachmentUploadViewModel { IsBusy = false, LetterGuid = Model.IdCode.ToString() })
    </div>
    ...

LetterAttachmentEditor.cshtml

@model IList<SystemRoleModel>

@for (var i = 0; i < Model.Count; i++)
{
    var index = i;
    var title = Model[index].Name;

    <div class="row">
        <div class="col-lg-2 mt-3">
            @Html.Label("LetterApprover[" + index + "]", title, new { @class = "control-label" })
        </div>
        <div class="col-lg-4">
            @(Html.Kendo().DropDownList().Name("LetterApprover[" + index + "]")                  
                  .DataValueField(nameof(SystemUserModel.Id))
                  .DataTextField(nameof(SystemUserModel.EmployeeName))
                  .DataSource(source =>
                  {
                      source.Read(read =>
                      {
                          read.Action("GetUsersByRoleId", "Api", new { roleId = Model[index].Id });
                      }).ServerFiltering(true);
                  })
            )
        </div>
        <div class="col-lg-6">
            <span asp-validation="" class="text-danger"></span>
            @Html.ValidationMessage("LetterApprover[" + index + "]", $"An approver as a {title} is required", new { @class = "text-danger" })
        </div>
    </div>
}

LetterModel 定义

public class LetterModel
{
    public LetterModel()
    {
        Approvers = new List<LetterApproverModel>();
    }

    // 省略部分代码...

    public IList<SystemRoleModel> ApprovingRoles { get; set; } = new List<SystemRoleModel>();
}

最终渲染的下拉框名称

<input id="ApprovingRoles_LetterApprover_0_" name="ApprovingRoles.LetterApprover[0]" required="required" type="text" validationmessage="..." data-role="dropdownlist">
<input id="ApprovingRoles_LetterApprover_1_" name="ApprovingRoles.LetterApprover[1]" required="required" type="text" validationmessage="..." data-role="dropdownlist">
<input id="ApprovingRoles_LetterApprover_2_" name="ApprovingRoles.LetterApprover[2]" required="required" type="text" validationmessage="..." data-role="dropdownlist">
<input id="ApprovingRoles_LetterApprover_3_" name="ApprovingRoles.LetterApprover[3]" required="required" type="text" validationmessage="..." data-role="dropdownlist">

问题 #

提交表单时，需接收这些下拉框的选中ID列表，希望借助MVC绑定机制实现，请问需要在模型中添加何种名称的List<string>类型属性？

解决方案 #

根据MVC Core的模型绑定规则，在LetterModel中添加名为LetterApprover的List<string>属性即可：

public class LetterModel
{
    public LetterModel()
    {
        Approvers = new List<LetterApproverModel>();
        LetterApprover = new List<string>(); // 初始化列表
    }

    // 省略原有代码...

    public IList<SystemRoleModel> ApprovingRoles { get; set; } = new List<SystemRoleModel>();
    public List<string> LetterApprover { get; set; } // 新增属性
}

原理说明 #

MVC模型绑定会根据控件的name属性解析层级：

• 渲染后的控件name带有ApprovingRoles.前缀，是因为Partial视图传递的模型是ApprovingRoles；
• 绑定机制会自动匹配到LetterModel中的LetterApprover列表属性，将每个[index]对应的选中值填充到列表的对应位置。

此方案无需修改现有视图代码，直接通过模型属性适配绑定规则即可。

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