Accessing MVC's Model Property from JavaScript

Accessing MVC's model property from Javascript

You could take your entire server-side model and turn it into a Javascript object by doing the following:

var model = @Html.Raw(Json.Encode(Model));

In your case if you just want the FloorPlanSettings object, simply pass the Encode method that property:

var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));

Access model property from javascript

You can achieve it by this way

if (!@Model.isNew)
{
  <script>
   DoSomeStuff(); // call another javascript function
  </script>
}  

access model in javascript asp .net mvc razor

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.

ASP MVC Access View Model from Javascript

You can not access model properties from external JavaScript files so you have two options. You can include all of your JavaScript in the razor file as seen in the link below.

access model in javascript asp .net mvc razor

Otherwise you can set a global JavaScript variable and use it in your external file as seen below.

razor.cshtml

@model Order
<script>
    var isEdit = '@Model.IsEditable'
</script>

externalfile.js

function getEdit() {
alert(isEdit);
}

Access MVC model property in Javascript

@foreach (var item in Model)
    {

        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ControlLabel)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ControlType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ControlDatatype)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.MasterModule.ModuleName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Form.FormName)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ControlID }) |
            @Html.ActionLink("Details", "Details", new { id = item.ControlID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.ControlID })
            </td>
        </tr>

        if (item.ControlType == "blah")
        {
        <script type="text/javascript">

          alert("a");

        </script>

        }
    }

Access a Model property in a javascript file?

There is no way to implement MVC / Razor code in JS files.

You should set variable data in your HTML (in the .cshtml files), and this is conceptually OK and does not violate separation of concerns (Server-generated HTML vs. client script code) because if you think about it, these variable values are a server concern.

Take a look at this (partial but nice) workaround: Using Inline C# inside Javascript File in MVC Framework

---

Related Topics