Question

So I have a problem…I am separating concerns in my web app: HTML in razor pages and JS in js files. My problem lies in the fact that I want to use data from my controller passed down in the view model from the server as the options of a select list. The problem lies in the fact that I have separated my js from my HTML and I can’t access Razor inside the js files.

I have a list of items coming down into my view model…


public List Stuffs { get; set; }


I json encode it server side and make sure to take care of circular refrences, so it looks like this

[{"id":1,"name":"blah"},{"id":2,"name":"blah2"},{"id":3,"name":"blah3"},{"id":4,"name":"blah4"}]

The problem is, I want to keep my separation of concerns, so how do I get that array into my js file so I can bind it to a select list using knockout? I definitely don’t want to do another round trip to the server.

Answer 1

Does your Javascript file contain a view model in the form of an instantiable function, e.g. something like:

function MasterVM(data)

or an object literal, e.g.

var masterVM = { ...

? I tend to go for instantiable view models (partly because they chain down through a hierarchy of view models using the mapping plugin – the top level one builds its children) and that being the case I think it’s nice for the Razor view to instantiate the view model with the JSON rendered from the MVC view model, e.g.:

var masterVM = new MasterVM(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

Or even have the Knockout view model “owned” by a revealing module and initialise it like:

productModule.init(@(Html.Raw(JsonConvert.SerializeObject(Model.ProductViewModel))));

Then productModule is also responsible for other things like mediating between your view model(s) and the server, watching for dirty state, etc.

Also, doing another round trip to the server is not necessarily bad if you are sourcing a massive set of reusable options which you’d like the browser to cache. If you are, you might want to have an MVC controller which emits a big object literal containing all of your commonly used options, which you can then use as the “options” property across multiple selects. But if your options are specific to the particular view model, then I guess they have to be part of your view model.