CODEWITHSUNDEEP
jqueryasp.net-mvc-3checkbox
gocman
gocman

Reputation: 33

MVC 3 Saving checkbox state in db

I have one problem i am hoping someone will have time to look at. I have view as table in my mvc 3 test project. Inside table there is checkbox. I am trying to have that checkboxes to be saved whenever i click on them. I tried with java script, tried with lots of examples from internet but still no luck for me. Can someone help? :)

This is my view:

@foreach (var item in Model)
{
    <tr>

        <td>
            @Html.DisplayFor(modelItem => item.date)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.section)
        </td>
        <td>

  @Html.CheckBoxFor(modelItem => item.check, new { onclick = "SomeMethod(this)" });

</td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.idImovine }) 

           </td>
    </tr>
}

</table>


<script type="text/javascript">

   function SomeMethod(checkboxInput) {

        $.ajax({
            type: 'POST',
            url: 'Home/Action',
            data: { newValue: checkboxInput.checked },
            success: success,
            dataType: 'json'
        });
    }

</script>

This is my controller

   public JsonResult Action(bool newValue)
        {

            var model = con.pro.Single(r => r.id == id);


            TryUpdateModel(model);
            con.SubmitChanges();

            return Json(true)


        }

I am using linq to sql for access to db. Can someone tell me what i am doing wrong, my intention is to have checkbox saved in dv whenever it is clicked, but that checkbox is getting clicked in a table which is coming from view and it needs to be saved to another tabe, so i am guessing i need to pass id which is inside view too, along with checkbox value.

Upvotes: 1

Views: 3461

Answers (3)

von v.
von v.

Reputation: 17108

You need to have an Id in your Model and then do this in your view:

@Html.CheckBoxFor(modelItem => item.check, 
    new { @dataid = item.Id, onclick = "SomeMethod(this)" });

Then do your ajax post like this:

function SomeMethod(checkboxInput) {
    $.ajax({
        type: 'POST',
        url: 'Home/Action',
        data: { newValue: $(checkboxInput).is(':checked'), id: $(checkboxInput).attr('dataid') },
        success: success,
        dataType: 'json'
    });
}

And accept it in your controller like this:

public JsonResult Action(bool newValue, int id)
{
    // do your saving here
}

Upvotes: 1

Shyju
Shyju

Reputation: 218752

You may need to pass the ID of the record which is represented by the checkbox. So let's update your razor code like this.

@foreach (var item in Model)
{
  <tr>
    <td>
      @Html.CheckBoxFor(modelItem => item.check,
                                              new { @id=item.ID, @class="chks"});
   </td>
  </tr>
}

Now we will have some unobutrusive javascript which listens for the click event of the check box

<script type="text/javascript">
  $(function(){

       $(document).on("click","input.chks", function (e) {
           var _this=$(this);
           var isChecked = _this.is(':checked');
           $.post("@Url.Action("Update","Home")?id="+_this.attr("id")+
                                          "&newValue="+isChecked,function(data){
                 // do something with the response
           });

       });
  });

</script>

Now make sure your Update method is accepting 2 parameters

[HttpPost]
public ActionResult Update(int id,bool newValue)
{
   //do your saving here.
  return Json(true); 
}

Upvotes: 2

pollirrata
pollirrata

Reputation: 5286

if you're using POST, then your action should be marked accordingly

[HttpPost]
 public JsonResult Action(bool newValue)

Upvotes: 1

Related Questions