MVC/Javascript:如何在表单提交中发布整数数组

MVC/Javascript: how to post an array of integers in a form submission?

本文关键字:布整数 整数 数组 表单提交 Javascript MVC      更新时间:2023-09-26

在为MVC网页提交表单之前,我想查看控制器的关键字段列表。但是,控制器上的参数为null。我的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 });
    }

PropertyId错误地显示为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")
}

不需要任何javascript来解决这个问题。表单中已经有checkbox元素,如果它们具有正确的namevalue属性,它们将在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 IDbool IsSelected,这样您就可以在模型中强烈键入视图。