带有Bootstrap的C＃ASP.NET

Question

I'm trying to generate anchors using @Html.ActionLink in a Bootstrap style Nav bar. I'm having trouble making the tabs switch active, what's the best way to accomplish this?

I've tried to append data-toggle="pill" to the a tags after the are generated but that doesn't seem to work.

Code:

            <ul class="nav nav-pills nav-justified" id="myTab">
                <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("Movies", "Index", "Movies")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Bootstrap Test", "Bootstrap", "Home")</li>
            </ul>

Thanks.

Answer 1

I don't see anything wrong with your code, though this might not be the exact problem you are facing, following blog post might help you to switch a tab dynamically.

https://madushaonline.wordpress.com/2013/09/24/active-links-on-bootstrap-navbar-with-asp-net-mvc/

Answer 2

Use a overloaded ActionLink method which is accepting html parameters and pass the @class=active and you need to replace data- to data_ (underscore) in MVC.

 <ul class="nav nav-pills">
  <li>
    @Html.ActionLink("Home", "Index", "Home", null, new {@class = "active",  
                     @data_toggle="pill" })
  </li>
  <li>@Html.ActionLink("Movies", "Index", "Movies")</li>
  <li>@Html.ActionLink("About", "About", "Home")</li>
  <li>@Html.ActionLink("Bootstrap Test", "Bootstrap", "Home")</li>
 </ul>