Hi Friends,
In today’s discussion i’ll be discussing more about using ajax in conjunction with MVC Action methods. so, in the previous section, we have seen that how to bootstrap the data which means, when browser makes the request, server will send both HTML and data at one go to the browser, however, this data will be available to angular app via custom angular data service. This approach is also nice, but very less common. So, in this module we’ll see the same implementation via ajax way. so, with this approach when browser makes the request, the server will respond by sending just the html not the data and then the browser will make the 2nd request for the data, then the server will send the data back to the browser asynchronously. so, let’s get started how to achieve the same using MVC controllers.
so, now i’ll start changing with the common controller where in we were sending both the data to the view. Now, we don’t want to do the same. so, it will look like now
we also don’t need the MovieBuilderVM class, so we can delete this class and the associated method from movieVMBuilder . Now, it will look like below
I have removed the serialization, reason being because am not going to push the data down to view rather than am going to use the controller to take care of these. so, we need to have two controllers one for movie and the another one is for movieReview as shown below. However, i already have those controllers but, i just need to modify a bit to take the Json request as shown below.
same thing i need to do for movieReview case
so, this will convert the array to Json data and push the same down to view. Now, we need to modify angular movies controller, so now don’t need bootstrapped data, instead of that we will be using angular $Http as shown below. so, i’ll be doing the same using one repository with $q service as well to handle the response as shown below.
so, what this above case is doing basically $q library is a promise library, it basically allows you to handle the async communication. so, when the call is successful, it will resolve the promise. Now, we need to do the same thing for moviesReview case.
Now, we need to include these scripts in the index page.
Now, when i build and refresh then i can see my data in action as shown below.
so, with this i would like to wrap this module up and in the next section we’ll see more on posting the data using MVC. Till then stay tuned and Happy Coding.
Thanks,
Rahul
Happy Coding
