MVC/Javascript：如何在表单提交中发布整数数组？答案

【问题标题】：MVC/Javascript: how to post an array of integers in a form submission?MVC/Javascript：如何在表单提交中发布整数数组？
【发布时间】：2016-01-13 15:48:22
【问题描述】：

在为我的 MVC 网页提交表单之前，我想查看控制器的关键字段列表。但是控制器上的参数为空。我的 JavaScript 如下；

   $("#savePropertiesToBeAssigned").click(function (e) {
        e.preventDefault();
        var $propertyIds = $("#propertyRows").find($(".selectProperty:checked"));
        var propertyIds = [];
        $.each($propertyIds, function () {
            var propertyId = $(this).data("msurvey-property-id");
            propertyIds.push(propertyId);
        });

        var $form = $(this).closest("form")[0];
        $form.action += "?PropertyIds=" + propertyIds + "&page=" + GetHiddenField("msurvey-page");
        $form.submit();
    });

MVC 动作是；

   [HttpPost]
    public async Task<ActionResult> AddFromContract(int[] PropertyIds, int? page)
    {
        var pageNumber = page.GetValueOrDefault(1);
        return RedirectToAction("AddFromContract", new { page = pageNumber });
    }

PropertyIds 错误地显示为 null，而页面具有正确的值。编辑 - 我正在显示视图以响应评论：

@{
    ViewBag.Title = "Add properties from the contract into the survey";
}

@using (Html.BeginForm("AddFromContract", "PropertySurvey", FormMethod.Post))
{
    <div id="hiddenFields"
         data-msurvey-page="@ViewBag.Page"></div>
    <input type="hidden" id="propertyIds" name="propertyIds" />
    <fieldset>
        <legend>@ViewBag.Title</legend>
        @if (ViewBag.PagedList.Count > 0)
        {
            <section id="PropertyList" style="margin-right: 28px;">
                <p>
                    The properties below have already been added to the contract <b>@SessionObjectsMSurvey.SelectedContract.ContractTitle</b>, but are NOT in this survey
                    <b>@SessionObjectsMSurvey.SelectedContract.SurveyTitle.</b>
                </p>
                <table class="GridTbl">
                    <thead>
                    <tr>
                        <th>UPRN</th>
                        <th>Block UPRN</th>
                        <th>Address</th>
                        <th style="text-align: center;">
                            Select All<br/>
                            <input type="checkbox" id="selectAll"/>
                        </th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <td colspan="3" style="text-align: right;">Select the properties you want to include in the survey, and click on the Save button.</td>
                        <td style="text-align: center;">
                            <button id="savePropertiesToBeAssigned" class="btn-mulalley">
                                Save
                            </button>
                        </td>
                    </tr>
                    </tfoot>
                    <tbody id="propertyRows">
                    @foreach (var property in ViewBag.PagedList)
                    {
                        <tr>
                            <td>@property.UPRN</td>
                            <td>@property.BlockUPRN</td>
                            <td>@property.Address</td>
                            <td style="text-align: center;">
                                <input type="checkbox"
                                       name="selectProperty"
                                       class="selectProperty"
                                       data-msurvey-property-id="@property.PropertyId"/>
                            </td>
                        </tr>
                    }
                    </tbody>
                </table>
                @Html.PagedListPager((IPagedList) ViewBag.PagedList, page => Url.Action("AddFromContract", new {page}))
            </section>
        }
        else
        {
            <p>Either no properties have been entered, or all of them have been assigned to the survey.</p>
        }
    </fieldset>
}
@section scripts
{
    @Scripts.Render("~/bundles/page/propertyTransfer")
}

【问题讨论】：

使用hidden输入元素不是更好吗？
正如@MinusFour 所说，您应该将它们放在命名输入中（隐藏或不隐藏）。 This 将解释发生了什么。由于 Action 是 [HttpPost]，mvc 将查看数据的 Http Headers 之后的内容，而不是查询字符串。
好的，我试过了。我发现我必须将数组转换为逗号分隔的字符串字段并在控制器方法中使用字符串类型参数才能使其工作 - 它确实做到了。当然，我现在可以拆分字符串，然后我的数组又回来了。问题是;这是最好的方法吗？问题似乎与发布整数数组有关，而不是我是否使用隐藏字段。
为什么不使用 jQuery AJAX 发送它们？
如果你想绑定到int[] PropertyIds，那么你的查询字符串需要是?PropertyIds=someIntValue&PropertyIDs=anotherIntValue&etc。但是这段代码没有意义。为什么要为 POST 方法创建查询字符串。你想做什么？ class="selectProperty" 的元素是什么？如果您的视图设置正确，则不需要此代码。也许展示你的观点会导致得到正确的答案。

标签： javascript jquery asp.net-mvc

【解决方案1】：

不需要任何 javascript 来解决这个问题。您的表单中已经有复选框元素，如果它们具有正确的 name 和 value 属性，它们将在 POST 方法中绑定到您的模型。

删除<input type="hidden" id="propertyIds" name="propertyIds" />并将视图更改为

@foreach (var property in ViewBag.PagedList)
{
    <tr>
        <td>@property.UPRN</td>
        ....
        <td style="text-align: center;">
            <input type="checkbox" name="propertyIds" value="@property.PropertyId" />
        </td>
    </tr>
}

并删除脚本。

当表单提交时，所有选中的复选框的值将被发送到控制器，并且由于复选框有name="propertyIds"，它们将在POST方法中绑定到您的int[] PropertyIds。

您还需要将<div id="hiddenFields" data-msurvey-page="@ViewBag.Page"></div> 更改为

<input type="hidden" name="page" value="@ViewBag.Page" />

旁注：我建议您开始使用视图模型而不是使用ViewBag，包括集合的视图模型，其中将包含属性int ID 和bool IsSelected，以便您可以将视图强输入模型.

【讨论】：