将数组的单个实例提交给控制器

Question

我有一个像这样的视图模型：

public class OrganisationViewModel
{
    public string OrganisationName { get; set; }
    public List<BranchViewModel> Branches { get; set; }
    // more properties...
}

public class BranchViewModel
{
    public string BranchName { get; set; }
    // more properties...
}

这是“组织”页面的外观：

我想实现的是允许用户更新单个BranchViewModel，因此我为每个分支创建了一个模态，当用户单击“编辑分支”链接时，模态将打开：

@for (int i = 0; i < Model.BranchViewModels.Count(); i++)
{
    var branchModalId = OrganisationHelper.GetBranchModalId(Model.BranchViewModels[i].BranchId);

    <div class="modal fade" id="@branchModalId" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="/organisation/updateBranch" method="post" role="form">
                    <div class="modal-body">
                        @Html.AntiForgeryToken()
                        <div class="form">
                            <div class="form-group">
                                @Html.LabelFor(m => Model.BranchViewModels[i].BranchName, htmlAttributes: new { @class = "", @maxlength = GlobalConstants.MaxLengthForLongName })
                                @Html.TextBoxFor(m => Model.BranchViewModels[i].BranchName, new { @class = "form-control input-text" })
                                @Html.ValidationMessageFor(m => Model.BranchViewModels[i].BranchName, "", new { @class = "text-danger" })
                            </div>

                            @*more properties...*@
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Cancel" class="btn btn-secondary-grey" data-dismiss="modal" />
                        <input type="submit" class="btn btn-primary-action" value="Save" />
                    </div>
                </form>
            </div>
        </div>
    </div>
}

现在的问题是，由于分支属于数组，因此页面上的输入将作为数组生成，因此如下所示：

<input class="form-control input-text" data-val="true" id="BranchViewModels_0__BranchName" name="BranchViewModels[0].BranchName" readonly="readonly" type="text" value="35671900246">

因此，当我将更改提交到分支时，值将以List的形式传递给控制器​​，因此该控制器将接受一个分支的列表：

public ActionResult UpdateBranch(List<BranchViewModel> branchViewModel)
{
}

我想要实现的是能够将单个分支传递给控制器​​，所以我希望控制器的签名像这样：

public ActionResult UpdateBranch(BranchViewModel branchViewModel)
{
}

但是我需要将分支呈现为HTML中的数组，否则我将获得重复的输入ID ...实现此目的的最佳方法是什么？

Answer 1

是否可以尝试使用静态@HTML.LabelFor和@HTML.TextBoxFor代替，您可以使用<input>标记手动编写html并指定输入字段的名称。这样，它将没有索引。

<input name="BranchViewModel.BranchId" type="hidden" value="Model.BranchViewModels[i].BranchId" />
<input name="BranchViewModel.BranchName" max="@GlobalConstants.MaxLenghForName" value="Model.BranchViewModels[i].BranchName" />

完整模式代码；

@for (int i = 0; i < Model.BranchViewModels.Count(); i++)
{
    var branchModalId = OrganisationHelper.GetBranchModalId(Model.BranchViewModels[i].BranchId);

    <div class="modal fade" id="@branchModalId" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="/organisation/updateBranch" method="post" role="form">
                    <div class="modal-body">
                        @Html.AntiForgeryToken()
                        <div class="form">
                            <div class="form-group">
                                <label>Model.BranchViewModels[i].BranchName</label>
                                <input name="BranchViewModel.BranchId" type="hidden"value="Model.BranchViewModels[i].BranchId" />
                                <input name="BranchViewModel.BranchName" max="@GlobalConstants.MaxLenghForName" value="Model.BranchViewModels[i].BranchName" />
                            </div>

                            @*more properties...*@
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Cancel" class="btn btn-secondary-grey" data-dismiss="modal" />
                        <input type="submit" class="btn btn-primary-action" value="Save" />
                    </div>
                </form>
            </div>
        </div>
    </div>
}

Answer 2

ASP.NET MVC序列化适用于html元素名称。当通过for循环创建索引器时，索引器将具有带有_i__的html元素名称（其中i是该集合中分支的索引）。因此，您可以尝试使用foreach，而不是使用索引器（通过for循环访问Model.BranchViewModels [i]）。

@foreach (var branch in Model.BranchViewModels)
{
    var branchModalId = OrganisationHelper.GetBranchModalId(branch.BranchId);

    <div class="modal fade" id="@branchModalId" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <form action="/organisation/updateBranch" method="post" role="form">
                    <div class="modal-body">
                        @Html.AntiForgeryToken()
                        <div class="form">
                            <div class="form-group">
                                @Html.LabelFor(m => branch.BranchName, htmlAttributes: new { @class = "", @maxlength = GlobalConstants.MaxLengthForLongName })
                                @Html.TextBoxFor(m => branch.BranchName, new { @class = "form-control input-text" })
                                @Html.ValidationMessageFor(m => branch.BranchName, "", new { @class = "text-danger" })
                            </div>

                            @*more properties...*@
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input type="button" value="Cancel" class="btn btn-secondary-grey" data-dismiss="modal" />
                        <input type="submit" class="btn btn-primary-action" value="Save" />
                    </div>
                </form>
            </div>
        </div>
    </div>
}