CODEWITHSUNDEEP
c#asp.net-mvcasp.net-mvc-3
Steve Paul
Steve Paul

Reputation: 109

Checkbox in MVC3 does not refresh from Model

My checkboxes are updating the db but on refresh the "checked" value is not there.

<input type="checkbox" id="chkPriorityOnly" @if(Model.PriorityOnly){<text>  checked="checked" </text>}/> Priority Only <br />

Then as suggested, I used:

  @Html.CheckBoxFor(model => Model.PriorityOnly, new { id = "chkPriorityOnly" }) Priority Only<br />

And this is my html upon saving the selections:

<input id="chkPriorityOnly" name="PriorityOnly" type="checkbox" value="true" /><input name="PriorityOnly" type="hidden" value="false" /> Priority Only<br />

And here is my save:

    function OnRestrictionsSaveClick() {

            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/Audience/UpdateRestrictions?audienceID=" + Model.AudienceID)'                
                + '&priorityOnly=' + $('#chkPriorityOnly:checked').val() 
                + '&home=' + $('#chkHome:checked').val() 
                + '&work=' + $('#chkWork:checked').val() 
                + '&cell=' + $('#chkCell:checked').val() 
                + '&text=' + $('#chkText:checked').val() 
                + '&other=' + $('#chkOther:checked').val() ,
                success: function (data) {SaveRestrictionsResponse(data); }
            });
}

Upvotes: 0

Views: 1737

Answers (3)

Uchendu Nwachuku
Uchendu Nwachuku

Reputation: 450

Why not use the Html.CheckboxFor method?

@Html.CheckBoxFor(model => model.PriorityOnly) Priority Only<br />

The way you're doing the AJAX save is wonky, to say the least. You're specifying POST but building a query string, which is just weird.

Instead, try:

function OnRestrictionsSaveClick() {
    $.post({
        url: '@Url.Action("UpdateRestrictions", "Audience")',
        data: $("input:checkbox").serialize(),
        success: function(data) { SaveRestrictionsResponse(data); }
    });
}

This way, jQuery does the heavy lifting of building the POST request data for you, automatically getting the values of all checked checkboxes. Checkboxes that have not been checked will not be sent, so the viewmodel passed to your UpdateRestrictions() action should default all the boolean properties to "false" (the model binder will automatically set the checked properties to "true".)

Also, you can use the Url.Action method to generate a URL for the action you want. You should never hard-code URLs to actions. Always use one of the UrlHelper or HtmlHelper routing-aware methods to build those URLs. This is because they will respect your routing table, so you can easily change your routes without having to change the URLs in your views.

Upvotes: 1

Shelakel
Shelakel

Reputation: 1070

I don't know if this will answer your question, but what you are doing in javascript isn't correct.

The $("*:checked") selector will look for the check boxes that are checked.

Meaning $("#chkHome:checked") will return null if the checkbox isn't checked.

Uing .val() will retrieve the value attribute of an input. Calling $("#chkHome:checked").val() will return "true" (the value attribute of the input) if it's checked, otherwise null.

You should use $("#chkHome").is(":checked") (returns true if checked, otherwise false) instead.

Don't have the hidden input, rather use:

<input type="checkbox" name="chkPriorityOnly" id="chkPriorityOnly" @(Model.PriorityOnly ? "checked=checked" : "") value="true" />
<label for="chkPriorityOnly">Priority only</label>

It's also probably better if the name attribute matches the property name on the model (ex. PriorityOnly vs chkPriorityOnly) for databinding purposes.

Upvotes: 1

karaxuna
karaxuna

Reputation: 26940

When the form posts, only checkboxes that are checked are posted. And because of that Html.CheckBoxFor has hidden field: when checkbox is not checked, hidden field's false value is posted instead of nothing (notice that hidden field has the same name as checkbox)

And try this:

+ '&priorityOnly=' + $('#chkPriorityOnly').val()

instead of this:

+ '&priorityOnly=' + $('#chkPriorityOnly:checked').val()

Upvotes: 0

Related Questions