4

I'm writing an MVC application and I've decided that Knockout.js will help with a lot of my issues, except in the process, it has created a new issue that I'm having a problem solving.

I converted all my MVC endpoints to just return views, and then I've created several other endpoints that returns the JSON objects. When the user browses to the website, the site loads the basic UI frame. After that, Knockout.js loads the model via AJAX calls. This has caused every page to load, and then "load" again where as with just the MVC the page loaded and all the data was present.

I've been looking into ways to get both to load at the same time, but I haven't found anything that doesn't require me to completely refactor the site. The best option was:

  • Merge the JSON endpoints into the view endpoints and convert the model to JSON in the codebehind using @Html.Raw(Json.Encode(object))

but then I have to get ride of all my pure JSON endpoints.

Is there anything else I can do to pass JSON endpoint data to the view on the serverside? Or any way to get the model and the view to load at the same time?

Improve this question

2 Answers 2

Reset to default
3

Your architecture is correct, but you want the initial load to pre-populate your views with data from the model. Within the controller action that just returns the Views, you should put data to populate in ViewData. Then the views are initially loaded with Model values, and each UI element can have an AJAX update that invokes the Controller action for that specific field.

This would also be an ideal case for a ViewModel. This may help as well.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for your answer! Just so I can make sure I'm on the same page, i should call the JSON endpoints inside the views? Something like: var model = @Html.Action("Data","Items") where model is in js?
Only call the JSON endpoints for updates. If you make a ViewModel object and interact with it in Javascript, you should only have the views interact with that object and have methods that encapsulate the AJAX request (taking with Controller endpoints). This would enable you to do intelligent things like caching or updating periodically.
Ok, so my view endpoints should return a model that is translated into JavaScript and I should have json endpoints that returns an updated version of that model? What can i do to eliminate code duplication I'm this case?
You could encapsulate the update in a method call (perhaps in a Service Layer) and then have that called in the initial action and the ajax update option(s). DRY is a good thing, but it's ok to call a method in more than one place. :)
1

I also agree that it's a good idea to let your initial view generation render the initial data right into the view. In general this does yield better performance than a separate AJAX call + JavaScript populating the data afterwards.

But I also think this really depends on the type of page you are loading. If your app is primarily AJAX based (SPA style model) then that first load is probably not that important because it happens only once, and it's probably OK to have that take a little extra time. It is somewhat easier and more consistent to have all your data loaded one way either via AJAX or via traditional View manipulation. And when your client side code requires you to re-load the entire set of data for a list or a record you don't end up duplicating the template/view logic to generate that output.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.