In this post, I am going to show you how to do Ajax in an Asp.net MVC4 Application using C#. It is very easy to create a very simple Ajax demo up and running. Here are few things you need in order to get basic Ajax demo running in your application. The complete source code for this application is available on my gitHub account.
0. Create basic Asp.net MVC4 application using VS2012
1. You need an Ajax.ActionLink in one of your views
2. Public Method that will return a Partial View
3. PartialView with some content
Open Index.cshtml and remove all the content and paste Ajax.ActionLink as below. Ajax.ActionLink has 12 overloads (msdn link) to do Ajax and all of them are very self explanatory. In the code below, I am passing in the text to display as link text, the controller action to hit, and Ajax Options that’s it.
We need a div whose content we wish to replace or the target location where we wish to replace the contents.
Then we need a public method inside our home controller that will return a partial view with some data in it. You can pass data to the Partial View using a ViewBag. As in our case I am using ViewBag.Tiffin variable to hold that data and retrieve inside Partial View. Next in our Partial View we retrieve it.
Hit F5 and click on the link to see what happens. All of the text will be replaced if you created a default Asp.net MVC4 Internet application. Because by default Asp.net Template for MVC4 Internet Application doesn’t load the Jquery Validation bundle to do Unobtrusive JavaScript. Include this line
You might be curious to ask why are you using a
I have recorded a screencast video to show upto this point. Check it out and if you have any feedback let me know.
Now moving on to some more stuff like how can we put animated gifs showing that something is running. That is actually even more easy. For this purpose we are going to use few more attributes of AjaxOptions object. This object has some events like OnCompleted, OnBegin, OnSuccess, OnFailure and we will assign javascript functions to them. So when we trigger a ajax request then OnBegin function we will load the gif and OnCompleted we will hide the image.
What about passing Parameters? For this we will use another overloaded method of Ajax.ActionLink which will pass routeparameters to our public method. We are going to change our public method and Ajax.ActionLink as shown in the code below.
Ok I get it but what about some HtmlAttributes? Actually there is very easy you use another overload of Ajax.ActionLink and you can pass in an anonymous object with values to it. There are different options you can consider for HtmlAttributes. And also what about jQuery mobile data-role attribtues? For jQuery data attributes you will have to use _ instead of - as shown below. Alright but now I want to implement Async and Await into this mix how can I do that? Hmmm. For this we will have to modify our public method inside our controller to return Task of type PartialViewResult. That is pretty easy too.
Oh! But I am told to just use jQuery to do Ajax then you have be a little bit careful. Please check your jQuery version. If you have jQuery 1.7 then Ajax is done differently and jQuery 1.9 does little bit differently. I am using 1.9 for this demo. There is a difference where you detect start and success events. You attach these events to the document object (see upgrade guide).
What-If Error
Why Ajax is still not working out for me? Here are some very common issues which I ran into while learning Ajax in MVC4 application.
1. Always debug using Internet Explorer. If you run your application then Chrome will show you red error count only if you inspect the page but will happily show you the page. Compare this to Internet Explorer it will give you Microsoft JavaScript Runtime Error. Doing a quick StackOverflow search will give you most of the common problems’ solutions.
2. Check if you have loaded Jquery Validation bundle
3. Check if you are even loading jQuery or not. Actually this should be number 0.
4. Check if you are loading multiple versions of Jquery or validation, if yes then deletes older ones.
5. Open up fiddler to see what is going on. If I am working with web then I have fiddler open by default most of the times. And it has affected my debugging skills.
6. Put breakpoints as this is very basic debugging skill.
7. Try deleting packages for jQuery and delete related entry in packages.config and again install those packages using Nuget.
8. The complete source code for this application and demo is at gitHub. Check this link
0. Create basic Asp.net MVC4 application using VS2012
1. You need an Ajax.ActionLink in one of your views
2. Public Method that will return a Partial View
3. PartialView with some content
Open Index.cshtml and remove all the content and paste Ajax.ActionLink as below. Ajax.ActionLink has 12 overloads (msdn link) to do Ajax and all of them are very self explanatory. In the code below, I am passing in the text to display as link text, the controller action to hit, and Ajax Options that’s it.
We need a div whose content we wish to replace or the target location where we wish to replace the contents.
Then we need a public method inside our home controller that will return a partial view with some data in it. You can pass data to the Partial View using a ViewBag. As in our case I am using ViewBag.Tiffin variable to hold that data and retrieve inside Partial View. Next in our Partial View we retrieve it.
Hit F5 and click on the link to see what happens. All of the text will be replaced if you created a default Asp.net MVC4 Internet application. Because by default Asp.net Template for MVC4 Internet Application doesn’t load the Jquery Validation bundle to do Unobtrusive JavaScript. Include this line
@Scripts.Render("~/bundles/jqueryval") in your _layout.cshtml page and you are all good to go. Run again and you should see the output.You might be curious to ask why are you using a
POST instead of GET inside Ajax.ActionLink? Because depending on which browser you are running it will cache the response and will not trigger an ajax request every time you wish to do Ajax. To overcome this problem you can disable cache for just that method use GET in Ajax.ActionLink. I have recorded a screencast video to show upto this point. Check it out and if you have any feedback let me know.
Now moving on to some more stuff like how can we put animated gifs showing that something is running. That is actually even more easy. For this purpose we are going to use few more attributes of AjaxOptions object. This object has some events like OnCompleted, OnBegin, OnSuccess, OnFailure and we will assign javascript functions to them. So when we trigger a ajax request then OnBegin function we will load the gif and OnCompleted we will hide the image.
What about passing Parameters? For this we will use another overloaded method of Ajax.ActionLink which will pass routeparameters to our public method. We are going to change our public method and Ajax.ActionLink as shown in the code below.
Ok I get it but what about some HtmlAttributes? Actually there is very easy you use another overload of Ajax.ActionLink and you can pass in an anonymous object with values to it. There are different options you can consider for HtmlAttributes. And also what about jQuery mobile data-role attribtues? For jQuery data attributes you will have to use _ instead of - as shown below. Alright but now I want to implement Async and Await into this mix how can I do that? Hmmm. For this we will have to modify our public method inside our controller to return Task of type PartialViewResult. That is pretty easy too.
Oh! But I am told to just use jQuery to do Ajax then you have be a little bit careful. Please check your jQuery version. If you have jQuery 1.7 then Ajax is done differently and jQuery 1.9 does little bit differently. I am using 1.9 for this demo. There is a difference where you detect start and success events. You attach these events to the document object (see upgrade guide).
What-If Error
Why Ajax is still not working out for me? Here are some very common issues which I ran into while learning Ajax in MVC4 application.
1. Always debug using Internet Explorer. If you run your application then Chrome will show you red error count only if you inspect the page but will happily show you the page. Compare this to Internet Explorer it will give you Microsoft JavaScript Runtime Error. Doing a quick StackOverflow search will give you most of the common problems’ solutions.
2. Check if you have loaded Jquery Validation bundle
3. Check if you are even loading jQuery or not. Actually this should be number 0.
4. Check if you are loading multiple versions of Jquery or validation, if yes then deletes older ones.
5. Open up fiddler to see what is going on. If I am working with web then I have fiddler open by default most of the times. And it has affected my debugging skills.
6. Put breakpoints as this is very basic debugging skill.
7. Try deleting packages for jQuery and delete related entry in packages.config and again install those packages using Nuget.
8. The complete source code for this application and demo is at gitHub. Check this link
No comments:
Post a Comment