jQuery bookmarks and Partial View, use AJAX

In my current project, I needed to use the Tab control, but the data is too heavy to load the page for the first time. Luckily, jQuery Tab provides the right functionality. However, I had to find a way to easily organize bookmark data from the server. ASP.NET MVC provides a convenient mechanism - partial views (Partial View).

In this small tutorial, I'll tell you how to set up jQuery Tab and how to set up partial views in ASP.NET MVC to work with bookmarks.

Customize your presentation

As we work in ASP.NET MVC, we will speak of our pages as representations. I will use the standard ASP.NET MVC application project template. After downloading and connecting the jQuery and jQuery UI scripts to your view (you can also in the master page), add the following code:

< asp:Content ID ="indexContent" ContentPlaceHolderID ="MainContent" runat ="server" >
< script type ="text/javascript" >
$( document ).ready( function () {
$( "#tabContainer" ).tabs();
});
</ script >

< div id ="tabContainer" >
< ul >
< li >< a href ="/Home/GetHomeTab" > Home </ a ></ li >
< li >< a href ="/Home/GetProductTab" > Products </ a ></ li >
< li >< a href ="/Home/GetContactUsTab" > Contact Us </ a ></ li >
</ ul >
</ div >


This code replaces the existing part of the data in the Index view of the Home controller. The most interesting part is the tabContainer div. Inside it we declare a list and several list items. jQuery uses this definition to format the bookmark control.
')
You have already noticed that inside the list (<li> tags) we use links for different actions (yes, I know that you can use HTML helper methods). Now we need to create views that will be rendered inside the bookmarks.

Here is an example of how the GetHomeTab view will look like. Nothing special, but make sure you create a partial view. Partial views do not contain any head, html or body. This is great for our bookmarks.



Do the same for GetProductTab and GetContactUsTab. Add a few lines of text to the views to see at least some result. Here is an example of how GetHomeTab should look like:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

< h1 > Home </ h1 >
< p > You're inside the Home tab, which was rendered via a partial view! </ p >


Before we can test, we need to change our controller so that it returns the requested views:

public ActionResult GetHomeTab()
{
return PartialView();
}
public ActionResult GetProductTab()
{
return PartialView();
}
public ActionResult GetContactUsTab()
{
return PartialView();
}


You can bind models for these views and they will work fine. Now, run the application.



And to make sure everything works through AJAX, let's take a look at FireBug:



Firebug will show that when I click on the Contact Us tab, an AJAX call automatically occurs, which goes to the Home controller and returns a partial view.

Kevin is cool, but why all this?

Using bookmarks can be quite inconvenient. They contain tons of markup to display inside the bookmark. All this should be located in one file. By loading our pages dynamically, we reduce the load on the server. Imagine that we have 10 bookmarks. If the user needs only two of them, we spend traffic loading all the rest. The browser will have to draw them and store in memory, waiting for user action. When using AJAX, we load only really needed bookmarks. Loading, thereby, the server on a minimum.

Next, place the markup in 11 small files is much easier than in one large. If you need to make changes in the Contact Us tab, you do not have to search for it in the main page. You just open the GetContactUsTab view and make your changes.

I hope you learned something new for yourself and, perhaps, you will use this approach in future projects. I can tell you that I felt a significant difference in my application, where 10 bookmarks contain a lot of data. Sharing everything in pieces, you will achieve simplicity in the structure of the application.

From the translator. Do not forget a few basic problems that you should not forget to allow in this approach: a) the user will not be able to get a direct link to the bookmark (for this you should use anchors); b) allow the user to work without AJAX. All this is not difficult, just a little change the current example.