CheckBox in Asp.Net MVC 4

Question

I have checkbox. When I select the checkbox I want it to automatically change its value in the Database to true and refresh the view and invoke a JQuery method.

I also have a checkbox and label. I want the checkbox to disappear when selected and the text in the label to change.

    <h2>Tasks</h2>
<fieldset>
<legend>Tasks</legend>
    <table class="table">
        @foreach(var item in ViewBag.x)
        {
            <tr class="clr">
                <td style="width:520px">
                    @item.User.UserName
                </td>
                <td>
                    @item.date.ToString("MM/dd/yyyy")
                </td>
                </tr>
            <tr class="clr">
                <td>
                    @item.Discription
                </td>
                <td></td>
                </tr>

                <tr>
                    <td ></td>
                <td>
                    <div><input type="checkbox" id="ch" class="ch" /><span id="d"  >Done</span></div>
               </td>

            </tr>
        }

How would I do this in JQuery or ASP MVC?

Image example

Answer 1

You can listen to the change event on the check box and then make an ajax call to your server to make updates to your db and have your action method return a response. You can check this response and hide/show whatever you want.

You probably want to associate the user id with the checkbox because you need to make this update against a specific user.. You may keep the user id in html 5 data attributes in the check box. Also looks like you are hard coding the id value of checkbox and the span in the loop, which will produce the same value for multiple checkboxes. Id values should be unique. So let's remove the id property value from your markup since we are not using it now.

<div>
   <input type="checkbox" data-user="@item.UserId" class="ch" />
   <span class="msg">Done</span>
</div>

And your javascript code will be

$(function(){

   $("input.ch").change(function(e){

      var _this=$(this);

      var userId=_this.data("user");
      var isChecked=_this.prop("checked");
      $.post("@Url.Action("Change","Home")", { isChecked :isChecked, userId:userId },
                                                                          function(re){
          if(re.status==="success")
          {
            _this.closest("div").find("span.msg").html(re.message); //update span content
            _this.remove();  // remove checkbox
          }
          else
          {
            alert("Failed to update!");               
          }
      });
   });    

});

I am using Url.Action helper method to generate the relative url to the action method. This code will work if you include your script inside the razor view, but if your javascript code is in an external js file, you should build the path to the app root and pass that to your external js files via some variables as explained in this answer.

Assuming you have a Change action method in your HomeController which accepts the isChecked value

[HttpPost]
public ActionResult Change(int userId, bool isChecked)
{

  try
  {
    // to do: using userId  and isChecked param value, update your db
     return Json( new { status="success", message="done"});
  }
  catch(Exception ex)
  {
     //to do : Log ex
     return Json( new { status="error", message="Error updating!"});
  }
}