Fragment portion of @Html.ActionLink overloaded method to link to a part of the page that is tabbed

Question

I am developing an ASP.NET MVC web application.

On one of my pages I have tabbed the information that looks like this:

Tabbed Content

My ActionLink looks like this:

@Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", null, null, "Documents", new { id = Model.InternID }, null)

Now when I hover over the link in my application it has the correct syntax with the InternID and fragment but when I click on it.. it sends me to the Tab that says "Applicant Profile", not "Documents"..

When I hover over the "Documents" tab it has the same url as when I hover my actionlink in my application.

Is there a way to fix this?

Answer 1

In addition to Chris Patt's answer.

You need to explicitly enable the specific tab you want.

First you need to pass one more param in your url querystring to represent which tab to be selected.

@Html.ActionLink("Back to Details", "RecordView", "ApplicantRecords", 
                                       new { id = Model.InternID ,tab="documents" }, null)

and in your RecordView() action method, you will accept this, set it to ViewBag so that you can read it in your razor view.

public ActionResult RecordView(int id,string tab="profile")
{ 
  ViewBag.CurrentTab = tab;
  return View();
}

and in your view, on the document ready event , we will read this value and use that to show a specific tab.

$(function() {

    var tab = "@ViewBag.CurrentTab";
    $('.nav-tabs a[href=#'+tab+']').tab('show');

});

Assuming your tab link's href values are "#profile" and "#documents"

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
       <a href="#profile" aria-controls="Profile" role="tab" data-toggle="tab">Profile</a>
   </li>
    <li role="presentation">
      <a href="#documents" aria-controls="documents" role="tab" data-toggle="tab">Docs</a>
    </li>
</ul>