MVC 5: jQuery nested tabs are not displaying properly

Question

Note: I am new to jQuery and tabs.

I am attempting to implement nested tabs with jQuery tabs in an MVC 5 web application. For some reason, the implementation is not working correctly and I assume there is a bug based on the behavior on the website and I suspect it is with how the active tab is being set.

When the user logs in, they are taken to a page for MainAppTabs. The two top tabs are Client and Account. The Client tab has nested tabs Client Info, Billing Selections, and About whereas the Account tab currently has only one nested tab called Account, which should only display a list of accounts.

With the current implementation below, the Account tab is the first tab to be displayed, as opposed to the Client tab, along with the nested Account tab. When I click on the Client tab then it will display fine with its nested tabs. However, when I click on the Account tab again then the page clears out and I must refresh the page (F5) in order to get the Account tab and its nested tabs to display. Also, the nested tab appears to be displayed twice where it is offset to the right and has a duplicate border, but the nested tab border and data spill outside of the parent tab border.

<div id="MainAppTabs">
    <ul>
        <li>@Html.ActionLink("Client", "ClientTabs", "ClientSetup")</li>
        <li>@Html.ActionLink("Account", "AccountTabs", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function () {
        $("#MainAppTabs").tabs({ active: 1 });
    });
</script>

ClientTabs:

<div id="ClientSetupTabs">
    <ul>
        <li>@Html.ActionLink("Client Info", "Edit", "ClientSetup")</li>
        <li>@Html.ActionLink("Billing Selections", "BillingSelections", "ClientSetup")</li>     
    </ul>
</div>

<script>
    $(function ()
    {
        $("#ClientSetupTabs").tabs({ active: 1 });
    });
</script>

AccountTabs:

<div id="AccountSetupTabs">
    <ul>
        <li class="active">@Html.ActionLink("Accounts", "Index", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function ()
    {
        $("#AccountSetupTabs").tabs({ active: 1 });
    });
</script>

That is not the normal way of defining the html for tabs. Typically you have a link with `
The href attribute of "a" element and id of the div must be equal in order to display tabs properly. — MonkeyDLuffy, Mar 19 '18 at 14:08
@Stephen, are partial views required for nested tabs only or for all tabs? Do you have any examples or documentation that I can read on the subject? — J Weezy, Mar 19 '18 at 14:56
@Monkey, I am not sure I understand what you mean. Can you please provide a code example? Is it possible to do this with the Razor Views engine? — J Weezy, Mar 19 '18 at 14:56
Refer [this fiddle](https://jsfiddle.net/y7m3zksw/11/) for how you view needs to be set up. Just eplace the "content for ...." with `@Html.Partial()` or `@Html.Action()` to render the content. — , Mar 19 '18 at 23:27
@Stephen. The Fiddle that you provided is what I was looking for. Please post it as the answer so I can give you credit for it. Thank you very much. — J Weezy, Mar 20 '18 at 06:00

score 1 · Accepted Answer · 2018-03-21T22:50:50.747

1

This appears to be an issue with nested tabs, possibly because of the way the ajax calls are made and the scripts within your partials (scripts should not be in partials). To make this work, you can provide placeholder elements for the content of each tab and have the links reference those elements using id attributes.

The html would be

<div id="main"> // main (parent) tabs
  <ul>
    <li><a href="#client">Client</a></li>
    <li><a href="#account">Account</a></li>
  </ul>
  <div id="client"> // client tabs
    <ul>
      <li><a href="#client-info">Client Info</a></li>
      <li><a href="#billing-selections">Billing Selections</a></li>
    </ul>
    <div id="client-info">
      // content for client information
    </div>
    <div id="billing-selections">
      // content for billing selections
    </div>
  </div>
  <div id="account"> // account tabs
    <ul>
      <li><a href="#accounts">Accounts</a></li>
    </ul>
    <div id="accounts">
      // content for accounts
    </div>
  </div>
</div>

and to initialize the tabs

$('#main').tabs({ ... }); // set options as required
$('#client').tabs({ ... });
$('#account').tabs({ ... });

To display the content, use @Html.Partial() if the model in the view contains the data need to generate the partial, or @Html.Action() if you want to call a server method that returns the partial. For example, if the Edit() method of ClientSetupController returns the partial view to show in your Client Info tab, then

<div id="client-info">
    @{ Html.RenderAction("Edit", "ClientSetup"); } // or @Html.Action("Edit", "ClientSetup")
</div>

Where the controller method is

[ChildActionOnly]
public PartialViewResult Edit
{
    var model = ... // initialize you model for the view
    return PartialView("_Edit", model);
}

and _Edit.cshtml is a partial view and contains the html you want to display in the tab

edited Mar 21 '18 at 22:50

answered Mar 20 '18 at 06:54

Regarding the scripts, do you know what set options are required? Regarding the display of content, you mention using Html.Partial and Html.Action and then provide a code sample for Html.RenderAction. Can you please expand on the latter? – J Weezy Mar 20 '18 at 14:47
1

What ever options you want :) - for example, `{ active: 1 }` as per the code in your initial question, but there are other options you can also set (refer [docs](http://api.jqueryui.com/tabs/)). – Mar 20 '18 at 21:32
1

`@Html.Action()` and `@{ Html.RenderAction(); }` generate the same output. Refer [this answer](https://stackoverflow.com/questions/2955261/difference-between-html-renderaction-and-html-action) for an explanation of how they work – Mar 20 '18 at 21:33
Do you have any good resources for how to use partial views with jQuery tabs? I am needing partial views only to bypass _ViewStart that way I don't get the _Layout view to be replicated within the tab. This is resulting in two footers showing up on the site. The actual view itself is unlikely to be replicated anywhere else. – J Weezy Mar 21 '18 at 14:35
1

I have updated the answer with an example of what the method should look like (the main point is that you should return a partial view, not a view (and to prevent users navigating to that method via the address bar, you should add the `[ChildActionOnly]` attribute – Mar 21 '18 at 22:52
Just to confirm, @{ Html.RenderAction("Edit", "ClientSetup"); } should be @{ Html.RenderPartial"Edit", "ClientSetup"); }? – J Weezy Mar 22 '18 at 05:28
1

That depends. If you use `Html.RenderPartial` it does not call the server method. It just passes the model in the main view to the partial and renders it. In that case the usage would be `Html.RenderPartial("_Edit");` where the partial is `_Edit.cshtml`. Or you can use `Html.RenderPartial("_Edit", Model.SomeProperty);` to pass a specific property of the model to the view, or `Html.RenderPartial("_Edit", new SomeModel());` to pass a new instance of a model to the partial – Mar 22 '18 at 05:35
1

But I suspect that is not what you want. If you want to call the server method so you can initialize a specific model and use that in a partial, then you need `RenderAction()` as I noted in the answer – Mar 22 '18 at 05:36
You are correct. I have implemented the changes to the [HttpGet] and it works. For the [HttpPost], should those stay as ActionResults without the [ChildActionOnly] attribute while still returning PartialViews? – J Weezy Mar 22 '18 at 06:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/167311/discussion-between-stephen-muecke-and-j-weezy). – Mar 22 '18 at 06:23

MVC 5: jQuery nested tabs are not displaying properly

1 Answers1