MVC Ajax jQuery Check box

Question

------------ 更新了代码---------------------

@for (int i = 0; i < Model.PeopleCheckBoxes.Count(); i++)
{
  <div class="person">
  <span>@Model.PeopleCheckBoxes.ToArray()[i].Username</span>
  @Html.CheckBoxFor(m => @Model.PeopleCheckBoxes.ToArray()[i].IsTaxExempt,
                    new { data_eventID = Model.catID, 
                          data_peopleID = Model.PeopleCheckBoxes.ToArray()[i].Id, 
                          @class = "PeopleCheckBox" }) 
   </div>

---

<script type="text/javascript">
    $(document).ready(function () {
        $('.PeopleCheckBox').change(function () {
            if (!$(this).is(':checked')) { // ignore checked items
                var url = '@Url.Action("RemoveMemberFromEvent2", "GiftList")';
                var eID = $(this).data('eventID');
                var pID = $(this).data('peopleID');
                $.post(url, { eventid: eID, peopleID: pid }, function (data) {
                    if (data) {
                        self.closest('.person').remove(); // remove the elements from the DOM
                    } else {
                        alert('Oops'); // the person was not removed
                    }
                });
            }
        });

---

  [HttpPost]
        public JsonResult RemoveMemberFromEvent2(int eventID, int peopleID) 
        {
             // database updated ..................
             return Json(true);
        }

------------ 结束 更新的代码---------------------

-------- 现在不使用此部分视图;添加它只是为了查看是否可以使用它-----

[HttpPost]
    public PartialViewResult RemoveMemberFromEvent(int eventID, int peopleID)
           {
              // removes checkbox from database :
              var aEvent = (from p in _EventMemberRepository.Table . . .
                _giftListService.DeletePersonOnGiftPage(aEvent);
                // queries database for new updated data : 
                var members2 = from c in _custRepository.Table  ....
                return PartialView("_RemoveMemberFromEvent", vModel);
            }

我想在取消选中复选框时运行方法，并向其传递 2 个值。什么是好方法？我想将Ajax与jQuery一起使用，但不知道如何编码：

@foreach (var item2 in Model.PeopleCheckBoxes)    
{
 @item2.Username 
 @Html.CheckBox("chkPeople", true, new {eventID = Model.catID, peopleID =item2.Id})
 ...
     public class GiftListController : Controller
        { 
     [HttpPost] 
            public ActionResult RemoveMemberFromEvent(int eventID, int peopleID) 
            {
                var aEvent = (from p in _EventMemberRepository.Table
                ............  
                return RedirectToAction("Index");
            }        

任何想法都值得赞赏。谢谢

Answer 1

您正在创建无效的 html，包括具有重复 ID 的复选框，您应该将值存储为自定义数据属性。而不是使用 foreach ，请使用 for 循环

@for (int i = 0; i < Model.PeopleCheckBoxes.Count; i++)
{
  <span>@Model.PeopleCheckBoxes[i].Username</span>
  @Html.CheckBoxFor(m => m.PeopleCheckBoxes[i].SomeProperty, true, new { data_eventID = Model.catID, data_peopleID = Model.PeopleCheckBoxes[i].ID, @class = "PeopleCheckBox")
}

或者如果它IEnumerable

@{ var i = 0; }
@foreach (var item2 in Model.PeopleCheckBoxes)
{
  var id = "mycheckbox" + i;
  <span>@item2.Username</span>
  @Html.CheckBoxFor(m => item2.SomeProperty, true, new { data_eventID = Model.catID, data_peopleID = item2.ID, @class = "PeopleCheckBox", id = @id)
  i++;
}

请注意，添加类名是为了用作 jQuery 选择器

脚本

$('.PeopleCheckBox').change(function () {
    if (!$(this).is(':checked')) { // ignore checked items
        var url = '@Url.Action("RemoveMemberFromEvent", "GiftList")';
        var eID = $(this).data('eventID');
        var pID = $(this).data('peopleID');
        $.post(url, { eventid: eID, peopleID: pid }, function (data) {
            // do something with the returned data if you want
        });
    }
});

但是，您在操作方法中进行重定向(它实际上不会在 post 方法的成功函数中返回任何内容(，因此不清楚您为什么采用这种方法，而不是说为每个person创建一个表单元素带有删除(提交(按钮。

编辑

作为替代方法，您可以更改控制器操作方法以返回 JSON 结果，指示删除是否成功，如果是，则删除项目。这将允许用户留在页面上并继续删除其他项目，而无需重定向。例如

[HttpPost]
public JsonResult RemoveMemberFromEvent(int eventID, int peopleID) 
{
  // delete member and return value indicating if successful
  if (isDeleted)
  {
    return Json(true);
  }
  else
  {
    return null;
  }
}

并在视图中，将与一个人相关的所有控件包装在一个容器中，以便可以选择它

@for (int i = 0; i < Model.PeopleCheckBoxes.Count; i++)
{
  <div class="person">
    <span>@Model.PeopleCheckBoxes[i].Username</span>
    @Html.CheckBoxFor(m => m.PeopleCheckBoxes[i].SomeProperty, true, ...
  </div>
}

然后在脚本中

if (!$(this).is(':checked')) {
  var self = $(this); // save scope
  ...
  $.post(url, { eventid: eID, peopleID: pid }, function (data) {
    if(data) {
     self.closest('.person').remove(); // remove the elements from the DOM
    } else {
      alert('Oops'); // the person was not removed
    }
  });

Answer 2

您的视图将如下所示：

@Html.CheckBox("mycheckbox", new { onclick="customMethod()"})

你的 JavaScript 方法有助于进行 Ajax 调用，可以这样：

function customMethod(){
$.ajax({
        url: "@Url.Action("ActionMethod", "Controller")",
        type: "POST",
        async: true,
        dataType: "json",
        data: {
            variable1: '@Model.catID',
            variable2: '@item2.id'
        },
        success: function(data) {
            //If you have a response, it will be in the 'data' object
        }
    });
}

然后您的控制器将采用以下形式：

public string ActionMethod (int variable1, int variable2)
    {
        //Use your variables here and return your response, if any.
    }