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

Answer 1

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.

Answer 2

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>