Styjun

I am working on an MVC project which uses model binding. I need to access the whole model in a javascript file which is referenced in the view page.
I tried JSON encoding the whole model inside a script tag in the view page.

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

which works fine.

In my case, the entire script has to stay in a separate page ie. Not inside the view page itself. How can I access the entire model from that script page?

A single property can be bound to a hidden input field, and the value can be accessed from js by its id i.e.:

<input type="hidden" id="modelObject" value="@model.property")/>
 var model = $("#modelObject").val();

I need the whole model in the js page. How can this can be achieved?.

Thanks in Advance.

Razor templates output text, which can typically be a "page" (html/css/js) served with a content type of text/html. But you can serve other content types, like text/javascript, if you want.

First, create a controller action decorated with the ActionName attribute:

public class ScriptsController 
 [ActionName("model.js")]
 public ActionResult ModelJs() 
 var model = new Object(); // your actual model here.
 return View();
 

Then you create your view, which is just like your script tag in your current page:

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

make sure you remove the script element from your current page.

Then reference the new js view in your page:

<script type="text/javascript" src="@Url.Action("model.js", "Scripts")"></script>

You can create a constructor for your JavasScript model and then instantiate that with razor code.

For example:

Model

public class Car
 public string Brand get; set; 
 public string Fuel get; set; 

Javascript file in module pattern, but you can use something else as well:

var car = (function(jsonModel)
 var runs = "My " + jsonModel.Brand + " runs on " + jsonModel.Fuel;
 return 
 Runs : runs
 
 );

Razor view

@model Car

<!--load the javascript file somewhere-->

<script type="text/javascript">
 $(function()
 var myFord = new car(@Html.Raw(Json.Encode(@Model)) );
 alert(myFord.Runs);
 );
</script>

.NET fiddle I could not add an external javascript file, but you will probably get the point

Although I should say that using @Html.Raw is not recommended as it makes you vulnerable to XSS attacks (read more on the internet after a search). It is better to return the JSON object from your controller.

Edit

Here is an example how to use the JsonResult on .Net fiddle
controller

 [HttpGet]
 public JsonResult Car()
 
 return Json(new Car("ford","gasoline"), JsonRequestBehavior.AllowGet);
 

razor view JS to get the json result and instantiate your JS module

$(function()
 var model = $.ajax(
 url: "@Url.Action("Car","Home")",
 dataType: 'json',
 contentType: 'application/json; charset=utf-8',
 ).done(function(response)
 console.log(response);
 var myFord = new car(response);
 alert(myFord.Runs);
 );
 );