Posting Data with an MVC action

Hi Friends,

In today’s discussion we’ll discuss more on posting data to an MVC action. So, for that i need to 1st create an user interface which will allow us to post some data back to the server. so, am going to create a link in the index page which will navigate to Post Movie Page as shown below.



and subsequently i do need to setup the route in the modules page as shown below.


Now, i need to create one PostMovies template as shown below.


so, notice this form is using that ng-model to bind to a movie object. so, this will create a movie object to angular scope and the movie object will have name, director, Releaseyear and the same i’ll be wiring up with angular controller. But, 1st let’s go to the MVC controller and make changes.


Now, again i need to make some minor changes in the html page for the same as shown below



so, as you can see above i have added one button to carry the model, which is basically handled by ng-click event where in it is taking movie model with it. So, now i have to create that PostMovie angular controller and it’s repository for the same.



so, now i just need to add the newly added scripts on the index page.



so, let’s build and refresh the page and see the behavior.


Now, let’s try and post some values in it.


so, now Test the post Movie event in the network tab of chrome debugging tool 1st, whether we are on right page or not.

91th 92nd

so, when you see the network tab you can see that 200 response is getting returned which means that data is getting posted to the server correctly also, when you see the header tab you will see the data being supplied from the UI itself. Now, in order to verify @ the controller side just put one debug point @ PostMovie MVC Controller and try to see the values receiving @ controller’s end.


So, with this i would like wrap this section. With this am attaching solution for your reference as well. What you can do from here is extend the same according to your need . Till then stay tuned and Happy Coding.

Download Link:- MVCPlusAngular


1,737 total views, 1 views today