MVC 3 Saving checkbox state in db

Question

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.

Can you save the data when you click into submit button from your form or just when you select some checkbox? — napfernandes
– napfernandes, Commented Apr 11, 2013 at 18:58
answer from Shyju did the trick, now everything is working as intended. Ty all for responses, lots of nice ppl here :D. When i learn mvc 3 better will try to help like this to other pll :) — gocman
– gocman, Commented Apr 11, 2013 at 19:34

Shyju · Accepted Answer · 2013-04-11 18:18:07Z

2

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

answered Apr 11, 2013 at 18:18

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

1 Comment

gocman Over a year ago

Thank you sir, that was just want i needed. Everything works fine now, checkbox is saved like it needs to be :)

pollirrata · Accepted Answer · 2013-04-11 18:08:15Z

1

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

[HttpPost]
 public JsonResult Action(bool newValue)

answered Apr 11, 2013 at 18:08

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

Comments

von v. · Accepted Answer · 2013-04-11 18:21:08Z

1

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
}

answered Apr 11, 2013 at 18:21

von v.

17.1k5 gold badges62 silver badges89 bronze badges

1 Comment

gocman Over a year ago

I got it now, mister Shyju answer was what i needed. I was close with my solution but i couldnt figure what is wrong :D Now i know. Thank you to mister von v :)

Collectives™ on Stack Overflow

MVC 3 Saving checkbox state in db

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related