Load ASP.NET MVC partial view on JQueryUI tab selection

Question

I've been searching for the last day and can't find anything on this specific topic asked within the last year or two, and as JQuery appears to deprecate things quite a lot, it seems fair to ask this question with regard to the current JQuery API.

Bit new to JQuery, I'd like to know this;

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

If the tabs are populated on page load, is there a way to make it so that the tabs only populate when clicked? I can provide the source code if there's any point in doing so, just comment and ask for it.

EDIT 1

As I'm using ASP.NET MVC to render the partial views with contextual information, is it literally just the "ajax/" that is important in the href or does the href need to link to static content? Question regards:

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

Just noticed you don't need the divs for ajax content so that ain't gonna work either.

EDIT 2

Solution:

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

Credits to Ashwini Verma for the answer!

"If the href in the <li><a> tag references a div then the div must be page-loaded in order to be viewed, but if the href references an action or a link then it can be loaded on demand."

Solution

Example given on jQuery site.

Description

If the content pane for a tab references a HTML element then the tab will be page-loaded;

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

If the content pane for a tab references 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 which loads the partial view. Example

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

Action Method

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

Comments

[Inspector Squirrel]

Didn't know you could do that! For the purposes of ajax loading, should I include the "ajax/"+ part as well or is that not necessary?

[Ashwini Verma]

"ajax/content1.html" not necessary at all. it was just address to the page. "ajax" just a folder here.

[Inspector Squirrel]

Ohhhh I think I get it now, if the href references a div then the div must be page-loaded in order to be viewed, but if the href references an action or a link then it can be loaded on demand. Is that correct?

[Ashwini Verma]

absolutely correct. I think I should have mentioned that instead directly showing sample.