Wednesday, May 19, 2010

Using jQuery UI Tabs with ASP.Net MVC and Ajax Form Submit

Using jQuery UI Dialog with ASP.Net and AJAX Update Panel is the most popular post in my blog.  While these dialog boxes are ok,  I have come to hate them. Primarily because of their over use.  And the one thing I hate most about them is they take the control away from the user and forces the user to attend to the dialog box before proceeding.  While this may be appropriate in certain situations, I have seen far too much abuse of the dialog boxes.

And that is the reason I like jQuery UI Tabs.  It does just the opposite.  It allows the user to move freely from tab to tab.  Implementing JQuery UI with ASP.Net Web Forms is difficult.  But with ASP.Net MVC it is fairly straight forward. 

In this example we will look at a simple but non-trivial example.  It involves maintaining  a list of people and performing add, edit, view and delete operations.  Performing each operation opens a new tab and you can perform multiple operations at the same time, switching back and forth between the tabs.

For this example I am using Visual Studio 2010, ASP.Net MVC2,  JQuery 1.4.2 and JQuery UI 1.8.1.  I am also using jQuery Form Plug-in.  This plug-in allows us easily and unobtrusively use AJAX with Forms.  Even though I am using MVC 2.0, this could easily be adapted for MVC 1.0 as well.




Some more screen shots:

add validation message

Download Source Here
I do not intend to go on a step by step tutorial here. Most of the code is standard ASP.Net MVC. As always, the source is the best tutorial.  However I will touch upon the major points.


The Person model in the sample is straight forward.  The only point of note is the Validation Data Annotations.  We will be using these for our validation.



The code for the controller is the same as how you would do for any model based CURD operation.  All of our controller methods except the index, return partial views.  We will discuss this further later.



From the point of this sample, the Views are the most interesting.  Except the initial view (Index.aspx) which loads up the tabs, all others are all partial views.  This helps us in loading the view onto a tab on the client side using ajax.


Unique Ids for all forms and divs

Because of the nature of the Tabs, the user could be adding a new Person and editing the Person side-by-side. This means we have to keep the ids of our divs and forms unique.  This helps jQuery to be able to submit the form asynchronously and load up the results in the required div.  
This sample, keeps the ids unique by post-fixing the id of the model to the div and form ids.   If that is not possible as in the Create View, where the model does not yet have an id, I am using DateTime.Now.Ticks.ToString() as an unique id.  But you can use whatever means best suits your scenario. 


So How Does This Work?

For example when the “Create New User” button is clicked,  a new tab is dynamically created with the url for the Create view.  In this new tab we load a form nested within a div. They both have unique ids.  So even if the user opens up new tab it does not interfere with each other.  And also using the Form Plug-in, we setup the form to post asynchronously
When a new person is created or a existing person is edited, the form hosting the peoples table is posted hereby displaying the updated data. All this happens asynchronously and the whole page is never refreshed any point. The standard jQuery UI Tabs API is used for all the tabs dynamics.
Please add a comment if you have any particular queries or a better implementation.

Download Source Here

Happy Coding


Check out http://www.MVC101.Net for links to great ASP.Net MVC Content.