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."

both ways are possible you can load all partials at page load and show them in tabs or you can also load partial on click... — Kartikeya Khosla
– Kartikeya Khosla, Commented Aug 1, 2014 at 9:54
Any information on how would be appreciated, I don't find the API docs to be particularly clear on this, as I'm new to JQuery. — Inspector Squirrel
– Inspector Squirrel, Commented Aug 1, 2014 at 9:56
@AshwiniVerma I have similar issue where I want to load partial view once tab is selected but when I tried to implement the above solution, it loads partial view in tab-2 when tab-1 is selected. Could you please help? — Mrudang Vora
– Mrudang Vora, Commented Sep 12, 2014 at 14:31

Inspector Squirrel · Accepted Answer · 2014-11-17 12:50:52Z

10

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");
}

edited Nov 17, 2014 at 12:50

Inspector Squirrel

2,5462 gold badges29 silver badges38 bronze badges

answered Aug 1, 2014 at 9:59

Ashwini Verma

7,5257 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Inspector Squirrel Over a year ago

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 Over a year ago

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

Inspector Squirrel Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

Load ASP.NET MVC partial view on JQueryUI tab selection

1 Answer 1

Description

Example

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Description

Example

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related