如何编写复选框的 ajax 事件以立即将行上的值 Id 传递给控制器

Question

如何通过单击复选框传递 PGId 的值并获取复选框的值以更新值。

我的视图显示从方法 "Index"

获得的列表

        @model PagedList.IPagedList<PG.Admin.Models.PGProfiles.PGProfileViewModel>
        @using (Html.BeginForm("UpdateStatus", "PGProfile", FormMethod.Post))
        {
            for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => m[i].PGId)
                        @Html.HiddenFor(m => m[i].PGId)
                    </td>
                    <td>
                        @Html.CheckBoxFor(m => m[i].Status)
                        <button type="submit" class="btn btn-primary btn-sm">update</button>
                    </td>
                </tr>
            }
        <script>
         // how can I write a ajax event of checkbox to pass value of PGId to controller
        </script

我的控制器嵌套方法 Index 获取所有数据和方法 Post UpdateStatus

    // bind all data and work fine
    public ActionResult Index()
    {
      var pgProfiles = _pgProfileService.GetAllPGProfiles().ToListViewModel();
      return View(pgProfiles)
    }

    //update status by pgID
    [HttpPost]
     public ActionResult UpdateStatus(IEnumerable<PGProfileViewModel> model)
    {
        foreach (var item in model)
        {
            var pgProfiles = _pgProfileService.GetPGProfileById(item.PGId);
            pgProfiles = item.ToEntity(pgProfiles);

            pgProfiles.PGId = item.PGId;
            _pgProfileService.UpdatePGProfile(pgProfiles);
        }
        return RedirectToAction("Index");
    }

Answer 1

如果您一次只想更新一个，那么您的控制器方法需要为对象 ID 和 Status 属性提供参数

[HttpPost]
public JsonResult UpdateStatus(int id, bool status)

然后在视图中（注意 CheckBoxFor() 生成一个带有 value="True" 的复选框和一个带有 value="false" 的隐藏输入，这在您的情况下不是必需的）

@foreach (var item in Model)
{
  <tr>
    <td>
      @Html.DisplayFor(modelItem => item.PGId)
    </td>
    <td>
      if(item.Status) {
        <input type="checkbox" class="status" value=@item.PGId checked="checked />
      } else {
        <input type="checkbox" class="status" value=@item.PGId />
      }
    </td>
  </tr>
}

脚本

var url = '@Url.Action("UpdateStatus", "YourControllerName")';
$('.status').click(function() {
  var id = $(this).val();
  var status = $(this).is(':checked') ? 'true' : "false";
  $.post(url, { id: id, status: status }, function(data) {
    // do something with any data you return?
  });
});

或者，为了避免多次调用，您可以只提交表单并绑定集合（不需要 javascript，并且在用户完成所有必需的更改后调用一次）

@model IList<PGProfileViewModel>
@using(Html.BeginForm())
{
  for(int i = 0; i < Model.Count; i++)
  {
    <tr>
      <td>
        @Html.DisplayFor(m => m[i].PGId)
      </td>
      <td>
        @Html.HiddenFor(m => m[i].PGId)
        @Html.CheckBoxFor(m => m[i].Status)
      </td>
    </tr>
  }
  <input type="submit" />
}

和 post 回到

[HttpPost]
public ActionResult UpdateStatus(IEnumerable<PGProfileViewModel> model)

如何编写复选框的 ajax 事件以立即将行上的值 Id 传递给控制器

How do I write a ajax event of checkbox to pass value Id immediately on row to controller

checkbox

asp.net-mvc

jquery