Question

在为我的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")
}

Answer 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，以便您可以强烈使用输入您的模型视图。

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

1 个答案: