从循环内发布表单数据答案

【问题标题】：Post Form Data from Within a Loop从循环内发布表单数据
【发布时间】：2016-01-18 10:04:31
【问题描述】：

我想在单击列表中的复选框时提交表单数据。目前我正在使用 onclick 事件，该事件不起作用，因为它发送一个获取请求，我需要它来发送一个发布请求。

如何从循环中将这两个参数发布到我的控制器方法。

编辑从下面的 cmets 我需要使用 AJAX，因为我打算保持在同一页面上。我错误地认为发布请求会这样做。如果有人愿意用 AJAX 为我指明正确的方向，我将不胜感激。

代码如下：

@for (var i = 0; i < Model.Count(); i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].InvoiceID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].Description)                     
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].InvoiceDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].DueDate)
                </td>
                <td>                        
                    <input asp-for="@Model[i].Paid" onclick="location.href='@Url.Action("UpdatePaidStatus", "Billing", new { invoiceID = Model[i].InvoiceID, paid = Model[i].Paid })'" />                       
                </td>                   
            </tr>
        }

【问题讨论】：

使用带有提交按钮的form（并添加invoiceID 和paid 作为路由参数或隐藏输入）
Url.Action 只是重定向，这是一个定义。使用 javascript 发送发布请求或使用某种使用 Form.FormActionMethod = FormActionMethod.Post 的表单构造
@Stephen - 但是如果我使用表单，我如何告诉它使用哪个列表项？表单不会只使用第一个列表项中的参数吗？
@Reafidy，ajax 停留在同一页面上，因此如果您在 POST 方法中重定向，那么它毫无意义。但是，如果您想留在同一页面上并继续提交价值，那么它就是要走的路。
是的 [你错了 :) ] - 如果你想留在同一页面上，你需要使用 ajax。

标签： javascript c# jquery ajax asp.net-core-mvc

【解决方案1】：

根据您的 cmets，您希望在行中发布模型的 invoiceID 以及指示复选框状态的值。将您的 html 更改为

<input type="checkbox" class="status" value="@Model[i].InvoiceID />

并添加以下脚本

var url = "@Url.Action("UpdatePaidStatus", "Billing");
$('.status').click(function() {
  var id = $(this).val();
  var isPaid = $(this).is(':checked');
  $.post(url, { id: id, isPaid : isPaid }, function(data) {
    if (data) {
      // do something based on the data you return
    } else {
      // oops
    }
  }).fail(function() {
     // oops
  });
});

将发布到以下方法

[HttpPost]
public JsonResult UpdatePaidStatus(int ID, bool isPaid)
{
  // save something
  return Json(true); // or return Json(null) is it fails?
}

您没有说明当 ajax 调用成功或失败时可能会发生什么，但例如您可能会更新 DOM 以显示指示成功或其他情况的消息。

旁注：这里可能不需要 ajax。如果您在每一行中包含Model[i].InvoiceID 的隐藏输入并执行普通表单提交到

public ActionResult UpdatePaidStatus(IList<yourmodel> model)

然后您的模型将与InvoiceID 和Paid 属性正确绑定，因此您可以在一个操作中更新集合中的所有项目。

【讨论】：

【解决方案2】：

您可以使用 jQuery 创建自己的处理程序来收集表单中的所有数据，然后手动发布到您的控制器或使用Ajax.BeginForm。一些相关答案已经发布在here和here。

【讨论】：