Different Partial Views on Tab click

Question

I have two partial views which need to be loaded when their respective tab is selected. I am unable to get the tabs to change and it always shows the same partial view. I tried to base my code on this answer https://stackoverflow.com/a/22483758/4761773

Here is my code :

<div>
    <ul class="nav nav-tabs">
        <li>@Html.ActionLink("Organization Users", "Index", new { allUsers = 0 }, new { id = "OrgUsers" })</li>

        <li>@Html.ActionLink("All Users", "Index", new { allUsers = 1 }, new { id = "AllUsers" }) </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="OrgUsers">
            @Html.Partial("_ListUsers")
        </div>
        <div class="tab-pane" id="AllUsers">
            @Html.Partial("_ListAllUsers")
        </div>

    </div>
</div>

Am I missing some thing?

score 2 · Accepted Answer · answered Apr 19 '17 at 19:36

I do not see any condition of how you can differenciate between the _ListUsers and _ListAllUsers. Maybe you can have an if condition with one partial loading for one condition and another partial for the other.

<div class="tab-content">
        @if (some condition)
        {
        <div class="tab-pane active" id="OrgUsers">
            @Html.Partial("_ListUsers")
        </div>
        }
        else if (condition 2)
        {
            <div class="tab-pane active" id="AllUsers">
            @Html.Partial("_ListAllUsers")
        </div>
        }
    </div>

some condition here could be a Viewbag property or a @Model Property — John Youngtree, Jan 15 '19 at 14:55

Different Partial Views on Tab click

1 Answers1