MVC Model property not updated when accessed in javascript

Question

I have this in my cshtml file:

@for (var i = 0; i < Model.Vehicles.Count; i++){
@Html.CheckBoxFor(m => Model.Vehicles[i].Selected)}

Basically Model.Vehicles is a List of vehicles and the Selected property is a bool...

I have a button that when clicked, calls this function:

function delSel(){
    var vehicles = '@Html.Raw(Json.Encode(Model.Vehicles))';
    var selIDs = "";
    for(var i = 0; i < vehicles.length; i ++)
    {
        if (vehicles[i].Selected == "true") {
            selIDs = selIDs + vehicles[i].ID + ",";
        }
    }
    document.getElementById('CRVehicleIDs').value = selIDs;
}

My problem is, eventhough the Checkbox is checked, the value of the Selected property is always equal to false... Is there a better way to get the selected items in this case?

@Html.Raw(Json.Encode(Model.Vehicles)) is the original model. not the values which may have been edited. — user3559349
– user3559349, Commented Aug 10, 2016 at 9:13

Ryan Searle · Accepted Answer · 2016-08-10 12:26:58Z

1

var vehicles = '@Html.Raw(Json.Encode(Model.Vehicles))';

This will not work as you are expecting, the razor syntax is rendered server side which means the value of this will not get updated when a user clicks on the checkboxes.

What you can do however is when you create you're checkboxes, give them an ID using i variable in your for loop.

@Html.CheckBoxFor(m => Model.Vehicles[i].Selected, new { id = "checkbx_" + i })

Then you can iterate through your checkboxes with a for loop.

function delSel(){
    var vehicles = @Html.Raw(Json.Encode(Model.Vehicles));
    var selIDs = "";
    for(var i = 0; i < vehicles.length; i ++)
    {
        if (document.getElementById('checkbx_' + i).checked) {
            selIDs = selIDs + vehicles[i].ID + ",";
        }
    }
    document.getElementById('CRVehicleIDs').value = selIDs;
}

edited Aug 10, 2016 at 12:26

answered Aug 10, 2016 at 9:20

Ryan Searle

1,6271 gold badge20 silver badges30 bronze badges

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

2 Comments

Ian Caparanga Over a year ago

I see... I'll do what you suggest and then I'll get back after... :) Thank you... :)

Ian Caparanga Over a year ago

Yay! It worked! Thank you so much... But a change in your answer... instead of checking for the value, I've check the checked property... Instead of this: if (document.getElementById('checkbx_' + i).value) I checked this: if (document.getElementById('checkbx_' + i).checked)

Dai · Accepted Answer · 2016-08-10 09:13:53Z

0

You're rendering this.Model.Vehicles to JSON which is then rendered within Javascript single-quotes - this will likely result in invalid Javascript syntax when accessed in a browser because JSON object property names are also enclosed in quotes.

Remove the quotes around @Html.Raw.

You would have spotted this if you looked at the rendered HTML of the page and saw that a large chunk of it would be covered in syntax errors.

Other tips:

JavaScript is typically styled with the opening brace on the same line as the keyword (as with Java), not the line below (as C#). It's also customary to use camelCase for JavaScript objects, not TitleCase. You should be able to customize your JSON-generator to use camelCase, refer to the documentation.
Boolean properties tend to be prefixed with Is, so it would be IsSelected (or isSelected in camelCase).
This is suboptimal:
```
if( vehicles[i].Selected == "true" ) {
```
Assuming that the Selected property is rendered as Javascript boolean value, you need only act on it directly:
```
if( vehicles[i].Selected ) {
```

answered Aug 10, 2016 at 9:13

Dai

157k31 gold badges314 silver badges436 bronze badges

4 Comments

Ian Caparanga Over a year ago

Thank you so much for the reply... I enclosed the @Html.Raw with single quotes because it was suggested... Without them there's always a warning saying syntax error but the code still words... Having you said that, I'll just remove them... :)

Dai Over a year ago

@IanCaparanga If you're getting syntax errors without the quotes then something else is wrong. Please post the rendered output to your question so we can take a look.

user3559349 Over a year ago

@IanCaparanga, You can ignore the syntax error - which will underline the semi-colon at the end (its just an annoying issue with the Razor engine but the code will still run fine)

Ian Caparanga Over a year ago

I've been ignoring it for quite sometime... I literally just added it before this post... Again, thank you so much for this tip...

Collectives™ on Stack Overflow

MVC Model property not updated when accessed in javascript

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related