Get returned object from controller into the javascript

Question

In my controller, I send an object list into the view ( index.cshtml )

return View(AdsPrevModel);

in my index.cshtml :

<div id ="ele">
    <ul>
        <li> name1<input id="a1" type="checkbox"/></li>
    </ul>
</div>

when the user clicks the checkbox, I use jquery to know if the user checked the box or not:

My javascript file:

$('#ele :checkbox').click(function () {
    if ($(this).is(':checked')) {
        alert($(this).attr('id'));
    } else {
        alert('unchecked');
    }
});

How can I get my AdsPrevModel into my js file?

I know I can do something like this:

In my html, add:

<input type="hidden" id="AdsPrevModel" value="@Model.AdsPrevModel" />

and in the js:

var adsPrevModel = JSON.parse(document.getElementById('AdsPrevModel').value);

Is there another option without adding a hidden input in my html?

Maybe something like the following in the js file:

var adsPrevModel = JSON.parse(Model.AdsPrevModel));

Answer 1

The best practise is

do an ajax call to that controller and that controller should return json results

return JSON( model ) ; 

Answer 2

In the code you've shared there's nothing emitting the model to the client, so there's currently no direct way for the JavaScript code to access it.

Since you're binding the view to the model, the view can include it in various ways. It could be a series of hidden fields for the members of the model (not the model in its entirety, unless it can be represented as a string in its entirety). Something like this:

@Html.HiddenFor(x => x.SomeField)
@Html.HiddenFor(x => x.AnotherField)

This would create two hidden input s for two fields on the model. Depending on how complex the model is, this could get cumbersome.

You might also emit the model to the JavaScript code directly in a similar fashion:

var someField = @Model.SomeField;
var anotherField = @Model.AnotherField;

Again, if the model is complex, this gets cumbersome quickly. Even if you try to build an actual JavaScript object from it:

var theModel = {
    someField : @Model.SomeField,
    anotherField : @Model.AnotherField
};

(Note also that I've seen Visual Studio get very confused when you mix razor syntax and JavaScript like this. Not so much in 2012 anymore, but a lot in 2010.)

You might use something like the JavaScriptSerializer to add a property on the model for a serialized version of itself. I've never done this before, but it should work. Something like this on the model:

public string SerializedCopy
{
    get
    {
        return new JavaScriptSerializer().Serialize(this);
    }
}

It might take some tweaking to get it to work, though.

Finally, a particularly clean option which only requires another request to the server would be to have another action which just returns the JSON version of that model. Something like this:

public ActionResult SomeActionName()
{
    // get the model somehow, then...
    return Json(AdsPrevModel);
}

Your JavaScript code would then just need to call this action to get the JSON object representing the whole model:

var theModel = {};
$.get('@Url.Action("SomeActionName", "SomeController")', function (data) {
    // maybe do some error checking here?
    theModel = data;
});

Then if your actual view isn't actually binding anything to the model then the action which returns that view doesn't need to fetch the model and supply it to the view. The JavaScript code would get the model by calling this other action which returns JSON data instead of a view.