Accessing MVC's model property from Javascript

Question

I have the following model which is wrapped in my view model

public class FloorPlanSettingsModel
{
    public int Id { get; set; }
    public int? MainFloorPlanId { get; set; }
    public string ImageDirectory { get; set; }
    public string ThumbnailDirectory { get; set; }
    public string IconsDirectory { get; set; }
}

How do I access one of the above properties from Javascript?

I tried this, but I got "undefined"

var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);

Baudin

Just to be clear, what is happening is you are setting the value of the JavaScript variable to the value of the C# variable "Model.FloorPlanSettings", which will be the .ToString() value of that class (a string). Then you are trying to alert a JavaScript property called "IconsDirectory" on the JavaScript string variable you just created. You get undefined because a JavaScript string has no "IconsDirectory" property. – Peritoneum

Provided a complete Test case and explained all scenarios of assigning Model data to javascript variable, – Diplococcus

This does not work outside of the view (cshtml). i.e in an external .js file referenced by the view. – Roseannaroseanne

Answer 1

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));

Ariellearies

Just to confirm, there's no need to add a ; at the end of it? Because I do get a prompt from VS stating the statement isn't terminated. But when I try to add ; the code doesn't run – Baudin

You should have a semi-colon at the end; that was a miss on my part. What error do you get when you add it? – Ariellearies

I get this syntax error. My code still runs though oi40.tinypic.com/ou8fv4.jpg – Baudin

What do you know, I've got the same error in my various projects as well. Just ignore it; it's Visual Studio trying to help, but, it's wrong in this case. The resulting HTML and script that gets sent to the browser is correct. – Ariellearies

For me this worked: var myModel = @{@Html.Raw(Json.Encode(Model));} – Higbee

hi @JustinHelgerson can you help me with this , i am using your way but not getting worked #24624212 – Shaffert

You need to wrap in single quotes: var model = '@Html.Raw(Json.Encode(Model))'; – Hotchpot

Hello Justin Helgerson, If that Model List having more than one records, how we can get that value. Eg: var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))'; $.each(floorplanSettings , function () { alert('Icons : ' + this.IconsDirectory); }); – Nassi

Not working if the model is initial value (Create page instead of Edit page) and "ReferenceError: Model is not defined" is encountered. – Aerification

In ASP.Net Core, Json.Serialize() – Crellen

This does not work outside of the view (cshtml). i.e in an external .js file referenced by the view. – Roseannaroseanne

For me, this worked @(Html.Raw(Json.Encode(Model))); – Amesace

@SpencerSullivan This syntax is for use in a Razor view. Json.Encode() encodes the value into JSON as a string that can be included on the page. the Html.Raw() prevents Razor from encoded the result again as HTML, which is unnecessary and may cause special characters in it to be rendered incorrectly for use in JavaScript. – Nomism

Answer 2

Contents of the Answer

1) How to access Model data in Javascript/Jquery code block in .cshtml file

2) How to access Model data in Javascript/Jquery code block in .js file

How to access Model data in Javascript/Jquery code block in .cshtml file

There are two types of c# variable (Model) assignments to JavaScript variable.

1. Property assignment - Basic datatypes like int, string, DateTime (ex: Model.Name)
2. Object assignment - Custom or inbuilt classes (ex: Model, Model.UserSettingsObj)

Lets look into the details of these two assignments.

For the rest of the answer lets consider the below AppUser Model as an example.

public class AppUser
{
    public string Name { get; set; }
    public bool IsAuthenticated { get; set; }
    public DateTime LoginDateTime { get; set; }
    public int Age { get; set; }
    public string UserIconHTML { get; set; }
}

And the values we assign this Model are

AppUser appUser = new AppUser
{
    Name = "Raj",
    IsAuthenticated = true,
    LoginDateTime = DateTime.Now,
    Age = 26,
    UserIconHTML = "<i class='fa fa-users'></i>"
};

Property assignment

Lets use different syntax for assignment and observe the results.

1) Without wrapping property assignment in quotes.

var Name = @Model.Name;  
var Age = @Model.Age;
var LoginTime = @Model.LoginDateTime; 
var IsAuthenticated = @Model.IsAuthenticated;   
var IconHtml = @Model.UserIconHTML;  

As you can see there are couple of errors, Raj and True is considered to be javascript variables and since they dont exist its an variable undefined error. Where as for the dateTime varialble the error is unexpected number numbers cannot have special characters, The HTML tags are converted into its entity names so that the browser doesn't mix up your values and the HTML markup.

2) Wrapping property assignment in Quotes.

var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML'; 

The results are valid, So wrapping the property assignment in quotes gives us valid syntax. But note that the Number Age is now a string, So if you dont want that we can just remove the quotes and it will be rendered as a number type.

3) Using @Html.Raw but without wrapping it in quotes

 var Name = @Html.Raw(Model.Name);
 var Age = @Html.Raw(Model.Age);
 var LoginTime = @Html.Raw(Model.LoginDateTime);
 var IsAuthenticated = @Html.Raw(Model.IsAuthenticated);
 var IconHtml = @Html.Raw(Model.UserIconHTML);

The results are similar to our test case 1. However using @Html.Raw()on the HTML string did show us some change. The HTML is retained without changing to its entity names.

From the docs Html.Raw()

Wraps HTML markup in an HtmlString instance so that it is interpreted as HTML markup.

But still we have errors in other lines.

4) Using @Html.Raw and also wrapping it within quotes

var Name ='@Html.Raw(Model.Name)';
var Age = '@Html.Raw(Model.Age)';
var LoginTime = '@Html.Raw(Model.LoginDateTime)';
var IsAuthenticated = '@Html.Raw(Model.IsAuthenticated)';
var IconHtml = '@Html.Raw(Model.UserIconHTML)';

The results are good with all types. But our HTML data is now broken and this will break the scripts. The issue is because we are using single quotes ' to wrap the the data and even the data has single quotes.

We can overcome this issue with 2 approaches.

1) use double quotes " " to wrap the HTML part. As the inner data has only single quotes. (Be sure that after wrapping with double quotes there are no " within the data too)

  var IconHtml = "@Html.Raw(Model.UserIconHTML)";

2) Escape the character meaning in your server side code. Like

  UserIconHTML = "<i class=\"fa fa-users\"></i>"

Conclusion of property assignment

• Use quotes for non numeric dataType.
• Do Not use quotes for numeric dataType.
• Use Html.Raw to interpret your HTML data as is.
• Take care of your HTML data to either escape the quotes meaning in server side, Or use a different quote than in data during assignment to javascript variable.

---

Object assignment

Lets use different syntax for assignment and observe the results.

1) Without wrapping object assignment in quotes.

  var userObj = @Model; 

When you assign a c# object to javascript variable the value of the .ToString() of that oject will be assigned. Hence the above result.

2 Wrapping object assignment in quotes

var userObj = '@Model'; 

3) Using Html.Raw without quotes.

   var userObj = @Html.Raw(Model); 

4) Using Html.Raw along with quotes

   var userObj = '@Html.Raw(Model)'; 

The Html.Raw was of no much use for us while assigning a object to variable.

5) Using Json.Encode() without quotes

var userObj = @Json.Encode(Model); 

//result is like
var userObj = {"Name":"Raj",
               "IsAuthenticated":true,
               "LoginDateTime":"\/Date(1482572875150)\/",
               "Age":26,
               "UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
              };

We do see some change, We see our Model is being interpreted as a object. But we have those special characters changed into entity names. Also wrapping the above syntax in quotes is of no much use. We simply get the same result within quotes.

From the docs of Json.Encode()

Converts a data object to a string that is in the JavaScript Object Notation (JSON) format.

As you have already encountered this entity Name issue with property assignment and if you remember we overcame it with the use of Html.Raw. So lets try that out. Lets combine Html.Raw and Json.Encode

6) Using Html.Raw and Json.Encode without quotes.

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

Result is a valid Javascript Object

 var userObj = {"Name":"Raj",
     "IsAuthenticated":true,
     "LoginDateTime":"\/Date(1482573224421)\/",
     "Age":26,
     "UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
 };

7) Using Html.Raw and Json.Encode within quotes.

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

As you see wrapping with quotes gives us a JSON data

Conslusion on Object assignment

• Use Html.Raw and Json.Encode in combintaion to assign your object to javascript variable as JavaScript object.
• Use Html.Raw and Json.Encode also wrap it within quotes to get a JSON

Note: If you have observed the DataTime data format is not right. This is because as said earlier Converts a data object to a string that is in the JavaScript Object Notation (JSON) format and JSON does not contain a date type. Other options to fix this is to add another line of code to handle this type alone using javascipt Date() object

var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)'); 
//without Json.Encode

---

---

How to access Model data in Javascript/Jquery code block in .js file

Razor syntax has no meaning in .js file and hence we cannot directly use our Model insisde a .js file. However there is a workaround.

1) Solution is using javascript Global variables.

We have to assign the value to a global scoped javascipt variable and then use this variable within all code block of your .cshtml and .js files. So the syntax would be

<script type="text/javascript">
  var userObj = @Html.Raw(Json.Encode(Model)); //For javascript object
  var userJsonObj = '@Html.Raw(Json.Encode(Model))'; //For json data
</script>

With this in place we can use the variables userObj and userJsonObj as and when needed.

Note: I personally dont suggest using global variables as it gets very hard for maintainance. However if you have no other option then you can use it with having a proper naming convention .. something like userAppDetails_global.

2) Using function() or closure Wrap all the code that is dependent on the model data in a function. And then execute this function from the .cshtml file .

external.js

 function userDataDependent(userObj){
  //.... related code
 }

.cshtml file

 <script type="text/javascript">
  userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function     
</script>

Note: Your external file must be referenced prior to the above script. Else the userDataDependent function is undefined.

Also note that the function must be in global scope too. So either solution we have to deal with global scoped players.

Diplococcus

Can Model property be updated in javascript and send to the controller action method? – Disharmony

@sortednoun yes you can, You can submit back the modified data from a form, Or if you don't want to reload the page then you can make use of AJAX – Diplococcus

I was not using ajax, and just tried to modify model property in javascript. but on submitting the form this change was not reflected in model. I was doing something like: var model = @Html.Raw(Json.Encode(Model)); model.EventCommand = "updatedvalue"; It gave me model correctly and updated value, but on submit the change was missing in action method. (Although I did the same thing using hidden Html control and bound it to EventCommand and updated it's value in javascript. But wondering if could do same directly to model?) – Disharmony

@sortednoun I got your point, var model = @Html.Raw(Json.Encode(Model)); this will create a javascript object model which has no connection with the C# Model which you pass to the view. Infact there will be no Model after the view has been rendered. So the Form in the UI will have no clue on the javascript object data changes. You need to now pass this entire modified model to controller via AJAX, Or you need to update the value of your input controls with in the form using javascript. – Diplococcus

Although I did the same thing using hidden Html control and bound it to EventCommand and updated it's value in javascript. But wondering if could do same directly to model? for this statement .. there is no EventCommand in MVC, its for Webforms where there is a connection between the UI and server actions, In MVC its all separated. Only way for you to interact with controller is via AJAX or Form Submit or New page Request (reload too) – Diplococcus

Yes got your point I have same insight that updating model in JS will not change the reference. Regarding that EventCommand, in fact I was doing something intentionally to change the mvc crud operation in spa style using custom MVVM. – Disharmony

Your second solution, setting a global javascript variable in the page then using it in the JS file, did not work for me, until I removed type="txt/javascript". Now it works, thanks :) – Meatus

@Meatus thanks for pointing that out. It was a typo.. It should have been text and not txt. I will update it.. – Diplococcus

@Rajshekar Reddy... this still valid in asp.net core 2.2 using razor pages? I am trying to create a model object in my js file using var modelObj = @Html.Raw(Json.Encode(Model)); but VS2019 doesn't like any part of that code line, for starters it thinks Json is a variable – Dyslalia

For my requirements I could not use a <Script> block because we mandate that the DOM loads 100% first. And in a partial view this would be executed before the DOM loads. I ended up sticking the JSON value of the Model object in a <input type="hidden" /> tag and then setting the global in $(document).ready() using var myGlobal = JSON.parse($('#global').val()) in case anyone else has the same perf requirement – Heirloom

Answer 3

try this: (you missed the single quotes)

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

Frit

@JuanPieterse with quotes gives you a JSON wihtout quotes gives you a javascript Object. Check my answer in the same thread for more details. https://mcmap.net/q/127982/-accessing-mvc-39-s-model-property-from-javascript – Diplococcus

That is not true, @Frit solution worked in my case, I got issues and wrapping it between single quotes worked like a charm, THANK YOU ;) – Externalize

Wrapping in single quotes will only work if there are no single quotes nested within your json string – Traitorous

Don't forget to do a JSON.parse(floorplanSettings) after that to handle by JavaScript – Evante

Answer 4

Wrapping the model property around parens worked for me. You still get the same issue with Visual Studio complaining about the semi-colon, but it works.

var closedStatusId = @(Model.ClosedStatusId);

Indecipherable

Answer 5

I used the following to convert a Model object passed from the controller in the Razor view to JSON Object in JavaScript. This worked perfectly for me in ASP.Net Core.

<script>
    let jsonData = @Html.Raw(Json.Serialize(Model))
    console.log(jsonData)
</script>

Nauru

I'm getting this error: 'Json' does not contain a definition for 'Serialize' – Tasteful

Try using JSON.parse('@Html.Raw(Json.Serialize(Model))') – Nauru

Answer 6

I know its too late but this solution is working perfect for both .net framework and .net core:

@System.Web.HttpUtility.JavaScriptStringEncode()

Boutte

Not perfect. That works for strings but not for other types. But +1 for an alternative option. – Nomism

Answer 7

For MVC 4

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

.Net Core 3.1

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

Controversial

Answer 8

If "ReferenceError: Model is not defined" error is raised, then you might try to use the following method:

$(document).ready(function () {

    @{  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
         var json = serializer.Serialize(Model);
    }

    var model = @Html.Raw(json);
    if(model != null && @Html.Raw(json) != "undefined")
    {
        var id= model.Id;
        var mainFloorPlanId = model.MainFloorPlanId ;
        var imageDirectory = model.ImageDirectory ;
        var iconsDirectory = model.IconsDirectory ;
    }
});

Arnie

Answer 9

In addition to @Rajshekar's thorough answer, I prefer a helper method that returns a IHtmlString value, which Razor recognizes as already-encoded HTML. Then, the Html.Raw() wrapper isn't needed, improving readability.

public static class JSHelper
{
    /// <summary>
    /// Encode a value as a JSON value or object for use in JavaScript code.
    /// </summary>
    /// <param name="value">Value to encode.</param>
    /// <returns>HTML string containing the JavaScript value or object.</returns>
    public static IHtmlString JsonEncode(object value)
    {
        return MvcHtmlString.Create(Json.Encode(value));
    }
}

Then I can just use, obj = @JSHelper.JsonEncode(myObject); in my JavaScript section.

Include a using clause in your view or update view/web.config to resolve the namespace within the view.

Nomism

Answer 10

So here is how we do it in .net core razor pages.

@section scripts
{
    <script>
        $(document).ready(function () {
            leaveStatusDictionary = @Html.Raw(Json.Serialize(Model.LeaveStatusDictionary));
        });

        function GetStatusName(status) {
            return window.leaveStatusDictionary[status];
        }
    </script>
}

Note the following.

1. I did not use var keyword before leaveStatusDictionary. So this now a property on the window object. So I was able to access that in a different js function - GetStatusName you see there.

2. LeaveStatusDictionary is a property on the model class of type Dictionary<int, string>.

Munshi

Answer 11

if 'IJsonHelper' does not contain a definition for 'Encode' error occur then try this:

@section scripts {
    <script>
        var data = @Json.Serialize(Model);
        console.log(data);
    </script>
}

Unpaid