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

Accepted Answer

`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.

access model in javascript asp .net mvc razor

Solution

Problem

Related problems