Loading a partial ASP.NET MVC view in a jQueryUI tab

Question

I searched the last day and cannot find anything in this particular topic asked over the past two or two years, and since jQuery seems to condemn things a lot, it seems fair to ask this question in light of the current jQuery API.

A bit new to jQuery, I would like to know this;

If I have a tab for each team member and for each of these tables the data table is loaded in a partial view from the database, when I load the start page, will all the tabs be filled with their partial or will they be filled only when the tab is clicked?

If the tabs fill when the page loads, is there a way to make it so that the tabs fill only when clicked? I can provide the source code, if there is any point, just comment and ask for it.

EDIT 1

How do I use ASP.NET MVC to render partial views with contextual information, is it literally just "ajax /", which is important in href, or does href need to be associated with static content? Question:

<div class="h-single" id="users"> <ul> @{ foreach (var user in Model) { <li><a href="ajax/" [e-mail] ><span>@user.Name</span></a></li> } } </ul> @{ foreach (var user in Model) { <div id=@user.EHLogin >@Html.Action("_userAdvisoryRequests", new { username = user.EHLogin }) </div> } } </div> 

Just noticed that you don't need divs for ajax content so that it doesn't work either.

EDIT 2

Decision:

 <div class="h-single" id="users"> <ul> @{ foreach (var user in Model) { <li><a href=@Url.Action ("_partial","Home", new { param = @user.Param })><span>@user.Name</span></a></li> } } </ul> </div> 

Ashvini Verma loans for the answer!

"If the href in the <li><a> refers to a div, then the div must be loaded on the page for viewing, but if href refers to an action or link, then it can be loaded on demand."

Answer 1

Example given on jQuery site.

Description

If the content panel for a tab refers to an HTML element, the tab will be loaded onto the page;

 <li><a href="#tabs-1">Preloaded</a></li> 

If the content pane for a tab refers to a URL, the tab will be loaded via AJAX when the tab is selected;

 <li><a href="ajax/content1.html">Tab 1</a></li> 

Example

 <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"></div> </div> <script> $(function() { $( "#tabs" ).tabs({ beforeLoad: function( event, ui ) { ui.jqXHR.error(function() { ui.panel.html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); }); } }); }); </script> 

Updated

href should be the URL of the action method that loads the partial view. Example

 <a href="@Url.Action("YourActionForContent", "Home")">Load Tab Content</a> 

Action method

 public PartialViewResult YourActionForContent() { return PartialView("_Content"); }