CODEWITHSUNDEEP
htmlasp.net-mvctwitter-bootstrap
amartin
amartin

Reputation: 350

Automatically Load Specific Section of Nav Panel

I have the following nav panel and would like to be able to select which section I display first based on a variable I get from the server. How can I do this? Normally you switch between the content within each nav pane by clicking on the buttons. Edit: See screen shot for an example. Example screen shot

<div class="hr-divider m-y-md">
  <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist">
    <li class="active" role="presentation">
        <a href="#Overview" role="tab" data-toggle="tab" aria-controls="Overview" aria-expanded="false" id="navpanel1">Nav Panel 1</a>
    </li>
    <li role="presentation" class="">
        <a href="#Tasks" role="tab" data-toggle="tab" aria-controls="Tasks" aria-expanded="true" id="navpanel2">Nav Panel 2</a>
    </li>
    <li role="presentation" class="">
        <a href="#IssuesNotes" role="tab" data-toggle="tab" aria-controls="IssuesNotes" aria-expanded="true" id="navpanel3">Nav Panel 3</a>
    </li>
  </ul>
</div>

<div role="tabpanel" class="tab-pane active" id="Nav Panel 1 Content">
  //content
</div>
<div role="tabpanel" class="tab-pane active" id="Nav Panel 2 Content">
  //content
</div>
<div role="tabpanel" class="tab-pane active" id="Nav Panel 3 Content">
  //content
</div>

Upvotes: 0

Views: 43

Answers (1)

James P
James P

Reputation: 2256

You will need to pass some variable for a conditional operator to your view.

Controller:

public ActionResult Index(string variable)
{
    switch (variable)
    {
        case "Overview":
        {
            ViewBag.Selected = "Overview";
            break;
        }
        case "Tasks":
        {
            ViewBag.Selected = "Tasks";
            break;
        }
        case "IssueNotes":
        {
            ViewBag.Selected = "IssueNotes";
            break;
        }
        default:
        {
            ViewBag.Selected = "IssueNotes";
            break;
        }
    }

    return View();
}

View:

<div class="hr-divider m-y-md">
    <ul class="nav nav-pills hr-divider-content hr-divider-nav" role="tablist">
        <li class="@(ViewBag.Selected == "Overview" ? "active" : "")" role="presentation">
            <a href="#Overview" role="tab" data-toggle="tab" aria-controls="Overview" aria-expanded="false">Overview</a>
        </li>
        <li class="@(ViewBag.Selected == "Tasks" ? "active" : "")" role="presentation">
            <a href="#Tasks" role="tab" data-toggle="tab" aria-controls="Tasks" aria-expanded="true">Tasks</a>
        </li>
        <li class="@(ViewBag.Selected == "IssueNotes" ? "active" : "")" role="presentation">
            <a href="#IssuesNotes" role="tab" data-toggle="tab" aria-controls="IssuesNotes" aria-expanded="true">IssuesNotes</a>
        </li>
    </ul>
</div>

<div class="tab-content clearfix">
    <div role="tabpanel" class="@(ViewBag.Selected == "Overview" ? "tab-pane active" : "tab-pane")" id="Overview">
        //Nav Panel 1 Content
    </div>
    <div role="tabpanel" class="@(ViewBag.Selected == "Tasks" ? "tab-pane active" : "tab-pane")" id="Tasks">
        //Nav Panel 2 Content
    </div>
    <div role="tabpanel" class="@(ViewBag.Selected == "IssueNotes" ? "tab-pane active" : "tab-pane")" id="IssuesNotes">
        //Nav Panel 3 Content
    </div>
</div>

Note: I have used ViewBag value for simple example but you could also use model value if it is already being passed to the view (e.g. class="@(Model.Value == "Overview" ? "active" : "")" )

This is an ok solution for a few tabs, but for a more robust solution you could implement a HTML Helper. See accepted answer here for more information: How to add "active" class to Html.ActionLink in ASP.NET MVC

Edit:

Not sure what you want exactly, maybe this helps?

$(document).ready(function () {
    $("li a").on('click', function() {
        alert($(this).attr('href'));
    });
});

Upvotes: 1

Related Questions