access model in javascript asp .net mvc razor

Question

I am working on asp .net mvc project with razor.

I am trying to access my model in javascript as follows

alert(Model.SecurityProfile);
alert(model.SecurityProfile);
alert(@Model.SecurityProfile);
alert(@model.SecurityProfile);

var SecurityProfileViewModel = {
            ViewModel: model,
            Id: SecurityProfileId,
            ProfileId: $('#ProfileId').val(),
            JobTitleId: $('#JobTitle').val(),
            SecurityProfileTypeId: $('#SecurityProfileType').val(),
            Status: $('#ddlStatus').val(),
            Reason: $('#txtReason').val(),
            Mode: $('#hidMode').val()
        };

    $.ajax({
        url: '/SecurityProfile/Edit',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(SecurityProfileViewModel),
        success: function (data) {
            alert(data);
            window.location.href = '/SecurityProfile/Index';

        }
    });

But nothing works. I am getting model is undefined error

I have explained this in detail here http://stackoverflow.com/a/41312348/2592042 — Rajshekar Reddy, Dec 24 '16 at 11:46

score 59 · Accepted Answer · answered Jan 27 '14 at 21:00

model is undefined, as far as JavaScript is concerned. The server-side code in your view executes, well, server-side. JavaScript has no notion of that. It's only concerned with the client-side output of that code. You can kind of mix the two, but need to keep in mind that the server-side components are just there to emit strings which will be part of the client-side output.

So, for example, if you have a property on your model called:

Model.SomeProperty

Then you can't use it directly in JavaScript like this:

alert(Model.SomeProperty)
// or
alert(SomeProperty)

That's not using the razor view syntax to tell the view engine that there's server-side code here. This is syntactically client-side code, and there is no Model client-side. So you need to indicate that there's server-side pre-processing to do:

alert(@Model.SomeProperty)

Additionally, if SomeProperty is a string, then keep in mind that it's output isn't going to include quotes. So you'd need to provide those for client-side code as well:

alert('@Model.SomeProperty')

Thus, the server-side value of SomeProperty will be emitted here when it's rendered to the client. So if the value is something like "Hello World" then the resulting client-side code would be:

alert('Hello World')

The main thing is to keep in mind the separation between the server-side code and the client-side code. All JavaScript/HTML/CSS is just one big string as far as server-side code is concerned. The view is essentially just creating a big string to send to the browser. Once it's in the browser, the client-side rendering knows the difference between JavaScript/HTML/CSS and executes accordingly, long after the server-side code is gone.

I see your point. And it works perfectly. Thanks for that. Now if I want to assing the Model(the instance of the object) itself to the data: part of the ajax call, in order to access the same in the controller's action methods parameters, what am I supposed to do? — SARAVAN, Jan 27 '14 at 21:22
@SARAVAN: It's not clear what you mean. An AJAX call is a request/response just like any page load. Essentially you'll need to either provide the data in the call (such as in a POST where you include the model's fields from the client) or fetch the model's data from database persistence (such as if the POST only includes an ID and the model needs to be constructed server-side based only on that ID). — David, Jan 28 '14 at 00:48

score 3 · Answer 2 · answered Jul 13 '21 at 13:09

3

You can serialize the Model in the cshtml to a js variable so you can access it later via javascript

<script>
    var data = @Html.Raw(Json.Serialize(@Model));
</script>

answered Jul 13 '21 at 13:09

dkokkinos

361
2
9

access model in javascript asp .net mvc razor

2 Answers2

Linked