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.
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:
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.
ModelThe 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.
ControllerThe 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.
ViewFrom 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 divsBecause 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
Check out http://www.MVC101.Net for links to great ASP.Net MVC Content.