Good structure for ASP.NET MVC 4 / MVVM / Web API? [closed] - asp.net-mvc

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a .NET MVC 4 project and just started Kendo UI MVVM framework. MVC uses ViewModels to send data from the controller to the view. I manage all my client side objects via the MVVM framework and use JSON to serialize them and send them back to my controller.
Currently I use the MVC ViewModel to return the data that will be static on my page and use jquery calls to fetch any dynamic data needed on my page. I find it confusing to have 2 methods to retrieve data. (And if I find it confusing, imagine the next developer that will have to work in my code)
I find it a bit useless to send the data to the View via ViewModels when I can easily have a structure where I query the controller (via Web API) on demand in my javascript code and save it into my MVVM view model directly.
I see a lot of advantages to using the MVVM framework in my UI, it makes control binding so much easier.
My question:
What is the best way to get the data from the controller to the MVVM ViewModel?
I feel that using the MVC ViewModel is duplicating work since I could query my Web API via ajax requests instead rather than translating my MVC ViewModel into my MVVM JS ViewModel.
Would it be a good approach to never return a MVC viewModel to my UI and always use client side Web API calls to retrieve all data?
Thanks,
Nicolas

Answer 1

Would it be a good approach to never return a MVC viewModel to my UI
and always use client side Web API calls to retrieve all data?
I would say it depends on your use case.
You could certainly return data that needs to be rendered the moment the page is displayed in the MVC Model. Remember that the MVC Model is rendered into the resulting HTML page on the server. This means that the values can be injected right into the HTML before it is returned to the client.
Also keep in mind that it could take overall longer to render your page completely if you have to hit the server multiple times; once to fetch the HTML then once for each Kendo widget to fetch data async.
That said, I usually end up doing what you said... Just render an MVC view with no Model, then have the Kendo UI widgets fetch their data after page load.
But really, it sort of depends on your data. If you have an MVC Model that contains:
public string Title { get; set; }
And in Razor you had:
<h1>#Title</h1>
Then that isn't really a case where I would want to re-fetch that data async. In those cases I usually do something sort of hacky, and put the value into the page:
<script type="text/javascript">
window.viewData = window.viewData || {};
window.viewData.Title = "#Title"
</script>
<h1 data-bind="text: Title"></h1>
<script src="viewmodel.js"></script>
Then in the viewmodel.js file (which I make a separate file from the returned HTML so that it can be cached by the browser)
(function (viewData) {
var viewModel = kendo.observable({
Title: viewData.Title
});
kendo.bind($("body"), viewModel);
})(window.viewData);
This is just my own approach though. It isn't necessarily the best for all situations. It all just depends what data you are pulling from where and how much.

Answer 2

From my understanding of the MVC architecture, View Model in MVVM and ViewModel in MVC are completely different from each other. What i can make out from your post is that you are using a framework with the help of which you are binding the data to the view. Can you elaborate on the framework or provide us with the code so that it can help others/me to get your question better.