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.

81th

 

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

82nd

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

83rd

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.

84th

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

85th

 

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.

86th

93rd

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

88th

 

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

89th

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

90th

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.

94th

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

Thanks,
Rahul

1,737 total views, 1 views today