MVC Ajax jQuery Check box

Question

------------ Updated code ---------------------

@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);
        }

------------ End Updated code ---------------------

-------- Not using this partial view now; added it just to see if it could be used -----

[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);
            }

I want to have a Method run when a Check box is un-checked, and pass in 2 values to it. What is a good way to do it? I would like to use Ajax with jQuery but have no idea how to code it :

@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");
            }

Any ideas appreciated. Thanks

score 2 · Accepted Answer · 2014-08-25 21:40:34Z

2

You are creating invalid html including checkboxes with duplicate ID's and you should store the values as custom data attributes. Rather that using foreach, use a for loop

@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")
}

or if its 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++;
}

Note the class name is added for use as a jQuery selector

Script

$('.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
        });
    }
});

However you doing a redirect in the action method (its not actually going to return anything in the success function of the post method) so its unclear why you are taking this approach as opposed to say creating a form element for each person with a Delete (submit) button.

Edit

As an alternative you could change you controller action method to return a JSON result indicating if the delete was successful, and if so remove the item. This would allow the user to stay on the page and continue deleting additional items without the redirects. For example

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

and in view, wrap all he controls relating to a person in a container so it can be selected

@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>
}

then in script

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
    }
  });

edited Aug 25, 2014 at 21:40

answered Aug 19, 2014 at 23:44

user3559349

Sign up to request clarification or add additional context in comments.

9 Comments

user3559349 Over a year ago

OK, you using IEnumerable, not IList. I'll update answer.

user3559349 Over a year ago

Updated. But your action method redirects to another page so this does not make a lot of sense. Would it not be better to return a value indicating if the item was successfully deleted, then remove it from the DOM so the user could continue deleting items?

user3559349 Over a year ago

@MikeHowe, Sorry error in script, now corrected. I'll update again later with an alternative to stay on the page

Mike Howe Over a year ago

thanks for the Json code. I'm getting and error "undeterminded string constant" for line : self.closest('.person).remove(); / . . . . Also, if you think it's easier or can use it, I was experimenting with returning a Partial View (see my updated post).

user3559349 Over a year ago

Was just missing apostrophe - now updaed

|

Tech Hands · Accepted Answer · 2014-08-19 20:43:41Z

1

Your View will look somewhat like this:

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

Your JavaScript method which helps make the Ajax call can go thus:

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
        }
    });
}

And then your Controller would take the form below:

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

answered Aug 19, 2014 at 20:43

Tech Hands

535 bronze badges

2 Comments

Mike Howe Over a year ago

Cannot get this function to fire.

Tech Hands Over a year ago

@MikeHowe The JavaScript or Controller Action?

Collectives™ on Stack Overflow

MVC Ajax jQuery Check box

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related