Saturday, May 21, 2011

Mvc 3 with Ajax Support

Recently I started working on ASP.NET MVC3 with the Razor view engine. Initially had to face some difficulty with lack of knowledge about Razor view engine and then I managed to handle things smoothly. I came across an issue when implementing a simple AJAX post back form where I needed to show my submitted results in a grid view without user to experiencing a post back in the same page. I created a partial view for my input data form and included in the Index page using @Html.RenderPartial. Then I created an Ajax.BeginForm block and moved my partial view into AJAX block. AJAX post back was successful but every time it returns a whole page into my UpdateTargetId which is a DIV.

After doing couple of hours of R&D I was able come up with the following solution and it is working fine.

Solution
I created another partial view for my grid and placed in the Index page. Now my index page markup looks like below.



We need to introduce a new overload for Index method and the return type should be PartialViewResult. My Index overload method in controller as follows.


Finally my page looks like as follows.


You can download the complete source code here

No comments: