for 循环中的 MVC Ajax 表单仅适用于第一个循环项答案

【问题标题】：MVC Ajax form within for loop only working for first loop itemfor 循环中的 MVC Ajax 表单仅适用于第一个循环项
【发布时间】：2014-03-05 23:28:22
【问题描述】：

我有一个页面显示要开具发票的付款列表，付款按客户分组，每个组周围都有一个 Ajax 表单。当我在页面上提交第一组发票的第一个表单时，它会正确回发，并将填充模型发送到我的控制器进行处理。如果我提交任何其他表单，该表单将与所有数据一起发回（我可以使用萤火虫看到它全部都已发送）但 MVC 在调用控制器方法时不会填充我的模型，它只是返回为空。

我的观点：

@for (int i = 0; i < Model.InvoicingReportModels.Count(); i++)
{
    @Html.EditorFor(m => m.InvoicingReportModels[i], "_InvoicingReportModel")
}

_InvoiceReportMode.cshtml

@using (Ajax.BeginForm(new AjaxOptions() { HttpMethod = "POST", OnSuccess = "InvoiceSaved", OnFailure="InvoiceSaveFailed" }))
{
    @Html.HiddenFor(m => m.DisplaySummary)
    @Html.HiddenFor(m => m.MasterAccountID)
    <div class="settings_bordered_box" style="margin-bottom: 20px;">
        <div class="settings">
            <table>
                <tr>
                    <th>
                        @Html.DisplayFor(m => m.DisplaySummary)
                        <span class="settings_box_divider">| </span>
                        <span>@Html.Raw(Model.Payments.Count().ToString()) Invoices</span>
                        <span class="settings_box_divider">| </span>
                        @Html.DisplayFor(m => m.TotalPrice)
                    </th>
                </tr>
            </table>
        </div>
        <div class="settings">
            <table>
                <tr>
                    <th>
                        <input type="checkbox" id="@Html.IdForModel()_chkAll" class="selectAll" /></th>
                    <th>PaymentID</th>
                    <th>Date</th>
                    <th>Total Price</th>
                    <th>Payment Method</th>
                    <th>Invoice Number</th>
                    <th>&nbsp;</th>
                </tr>
                @for (int i = 0; i < Model.Payments.Count; i++)
                {
                    Model.Payments[i].InvoiceNumberFieldID = Html.IdFor(m => m.Payments[i].InvoiceNumber).ToString();
                    <tr>
                        <td style="text-align: center; vertical-align: middle;">@Html.CheckBoxFor(m => m.Payments[i].Selected) @Html.HiddenFor(m => m.Payments[i].SingleSaveSelected)</td>
                        <td style="text-align: center; vertical-align: middle;">@Html.DisplayFor(m => m.Payments[i].DisplayPaymentID) @Html.HiddenFor(m => m.Payments[i].PaymentID) @Html.HiddenFor(m => m.Payments[i].PaymentType)</td>
                        <td style="text-align: center; vertical-align: middle;">@Html.DisplayFor(m => m.Payments[i].Date)</td>
                        <td style="text-align: center; vertical-align: middle;">@Html.DisplayFor(m => m.Payments[i].TotalPrice)</td>
                        <td style="text-align: center; vertical-align: middle;">@Html.DisplayFor(m => m.Payments[i].PaymentMethod)</td>
                        <td style="text-align: center; vertical-align: middle;">@Html.EditorFor(m => m.Payments[i].InvoiceNumber) @Html.HiddenFor(m => m.Payments[i].InvoiceNumberFieldID)</td>
                        <td style="text-align: center; vertical-align: middle;">
                            <input type="submit" name="submit" class="coloured_button" value="Save" onclick="SetSingleSave('@Html.IdFor(m => m.Payments[i].SingleSaveSelected)'); return true;" />
                            &nbsp;&nbsp;
                        <input type="button" class="coloured_button" value="Details" />
                        </td>
                    </tr>
                }
                <tr>
                    <td style="text-align: center; vertical-align: middle;">&nbsp;</td>
                    <td style="text-align: center; vertical-align: middle;">&nbsp;</td>
                    <td style="text-align: center; vertical-align: middle;">&nbsp;</td>
                    <td style="text-align: center; vertical-align: middle;">&nbsp;</td>
                    <td style="text-align: center; vertical-align: middle;">&nbsp;</td>
                    <td style="text-align: center; vertical-align: middle;">@Html.EditorFor(m => m.InvoiceNumber)</td>
                    <td style="text-align: center; vertical-align: middle;">
                        <input type="submit" name="submit" class="coloured_button" value="Save Selected" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
}

我的控制器

[HttpPost]
public ActionResult Index(InvoicingModel model, string submit)
{
    ... Do controller stuff here
}

我的模特

public class InvoicingModel
{
    public List<InvoicingReportModel> InvoicingReportModels { get; set; }
    public InvoicingModel()
    {
        InvoicingReportModels = new List<InvoicingReportModel>();
    }
}

public class InvoicingReportModel
    {
        public int MasterAccountID { get; set; }
        public string DisplaySummary { get; set; }
        public string InvoiceNumber { get; set; }
        [DataType(DataType.Currency)]
        public double TotalPrice
        {
            get
            {
                if (Payments != null && Payments.Count > 0)
                {
                    return Payments.Sum(p => p.TotalPrice);
                }
                else
                {
                    return 0.0;
                }
            }
        }
        public List<PaymentListModel> Payments { get; set; }

        public InvoicingReportModel()
        {
            Payments = new List<PaymentListModel>();
        }
    }

public class PaymentListModel
{
    public int PaymentID { get; set; }
    public string DisplayPaymentID { get; set; }
    [DataType(DataType.Currency)]
    public double TotalPrice { get; set; }
    public string PaymentMethod { get; set; }
    public string InvoiceNumber { get; set; }
    public bool Selected { get; set; }
    public bool SingleSaveSelected { get; set; }
    public DateTime Date { get; set; }

    public string InvoiceNumberFieldID { get; set; }
    public PaymentType PaymentType { get; set; }
}

第一个表单回传填充了一个 InvoicingReportModel 的 InvoicingModel，并且所需数量的 PaymentListModel 全部填充完毕。如果它提交第二个或以后的表单，控制器将获得一个 InvoicingModel，其中 InvoicingReportModel 列表为 null。

我已尝试更改控制器，以便它接受 InvoicingReportModel（因为这是表单所围绕的），但随后我将所有内容都设为 null。

不知道还能尝试什么。

如果这有帮助，那就是萤火虫捕获从提交页面上的第 3 个表单发送的帖子数据。

Parametersapplication/x-www-form-urlencoded
InvoicingReportModels[2]....    1316 - Some Thing Here
InvoicingReportModels[2]....    123
InvoicingReportModels[2]....    1316
InvoicingReportModels[2]....    
InvoicingReportModels[2]....    InvoicingReportModels_2__Payments_0__InvoiceNumber
InvoicingReportModels[2]....    13276
InvoicingReportModels[2]....    Standard
InvoicingReportModels[2]....    true
InvoicingReportModels[2]....    false
InvoicingReportModels[2]....    False
InvoicingReportModels[2]....    
InvoicingReportModels[2]....    InvoicingReportModels_2__Payments_1__InvoiceNumber
InvoicingReportModels[2]....    13298
InvoicingReportModels[2]....    Standard
InvoicingReportModels[2]....    true
InvoicingReportModels[2]....    false
InvoicingReportModels[2]....    False
X-Requested-With    XMLHttpRequest
submit  Save Selected
Source
submit=Save+Selected&InvoicingReportModels%5B2%5D.DisplaySummary=1316+-+Some+thing+Here&InvoicingReportModels%5B2%5D.MasterAccountID=1316&InvoicingReportModels%5B2%5D.Payments%5B0%5D.Selected=true&InvoicingReportModels%5B2%5D.Payments%5B0%5D.Selected=false&InvoicingReportModels%5B2%5D.Payments%5B0%5D.SingleSaveSelected=False&InvoicingReportModels%5B2%5D.Payments%5B0%5D.PaymentID=13276&InvoicingReportModels%5B2%5D.Payments%5B0%5D.PaymentType=Standard&InvoicingReportModels%5B2%5D.Payments%5B0%5D.InvoiceNumber=&InvoicingReportModels%5B2%5D.Payments%5B0%5D.InvoiceNumberFieldID=InvoicingReportModels_2__Payments_0__InvoiceNumber&InvoicingReportModels%5B2%5D.Payments%5B1%5D.Selected=true&InvoicingReportModels%5B2%5D.Payments%5B1%5D.Selected=false&InvoicingReportModels%5B2%5D.Payments%5B1%5D.SingleSaveSelected=False&InvoicingReportModels%5B2%5D.Payments%5B1%5D.PaymentID=13298&InvoicingReportModels%5B2%5D.Payments%5B1%5D.PaymentType=Standard&InvoicingReportModels%5B2%5D.Payments%5B1%5D.InvoiceNumber=&InvoicingReportModels%5B2%5D.Payments%5B1%5D.InvoiceNumberFieldID=InvoicingReportModels_2__Payments_1__InvoiceNumber&InvoicingReportModels%5B2%5D.InvoiceNumber=123&X-Requested-With=XMLHttpRequest

【问题讨论】：

标签： ajax asp.net-mvc forms asp.net-ajax

【解决方案1】：

我找到了解决方案。要使用缺少数组元素的模型绑定器，您需要为每个名为 Index 的数组元素设置一个隐藏字段。将表单移到顶层视图中，并为每次迭代添加了一个隐藏的 Index 元素，如下所示，一切正常。

@for (int i = 0; i < Model.InvoicingReportModels.Count; i++ )
{   
    using (Ajax.BeginForm(new AjaxOptions() { HttpMethod = "POST", OnSuccess = "InvoiceSaved", OnFailure = "InvoiceSaveFailed" }))
    {
        @Html.Hidden("InvoicingReportModels.Index", i)
        @Html.EditorFor(m => Model.InvoicingReportModels[i], "_InvoicingReportModel")
    }
}

【讨论】：