从循环中发布表单数据

本文关键字：表单 数据 布表单 循环 | 更新日期: 2023-09-27 18:30:44

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

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

编辑 从下面的评论中，我需要使用 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>
        }

从循环中发布表单数据

根据您的注释，您希望在行中发布模型的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 属性正确绑定，以便您可以在一个操作中更新集合中的所有项。

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

相关文章：