Calvin Smith Calvin Smith - 3 months ago 76
C# Question

Dynamic MVC Razor href based on active nav-tab

I have an MVC Razor project using Bootstrap where:


  • A main view has nav-tabs

  • The nav-tabs have a button and search field

  • The active nav-tab loads a partial view below

  • The partial view is a List



Picture Of Main Nav-Tabs and partial view list loaded below

I would like to have the "Create New" button and Search field urls change based on which tab is currently active.

So, if inquiries are selected, then the "Create New" button would link to \inquiry\create\id

If Media is selected, then it would link to \media\create\id

The nav-tabs are defined like so:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">
<a href="#inquiries" data-toggle="tab">Inquiries</a>
</li>
<li>
<a href="#events" data-toggle="tab">Events</a>
</li>
<li>
<a href="#media" data-toggle="tab">Media</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group is-empty">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<input type="text" class="form-control col-md-8" placeholder="Search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="@Url.Action(" Create ", "Inquiry ", new { id = Model.ID })">
<span class="glyphicon glyphicon-plus"></span>
<strong>Create New</strong>
</a>
</li>
</ul>
</div>
</div>


<div class="tab-content">
<div class="tab-pane active" id="inquiries" role="tabpanel">
@{Html.RenderAction("List", "Inquiry", new { id = Model.ID });}
</div>
<div class="tab-pane" id="events" role="tabpanel">
@{Html.RenderAction("List", "Event", new { id = Model.ID });}
</div>
<div class="tab-pane" id="media" role="tabpanel">
@{Html.RenderAction("List", "Media", new { id = Model.ID });}
</div>
</div>





I have tried many different methods, but can't figure out how to get this working. I constantly run into issues mixing Razor syntax and Javascript together. I would greatly appreciate any feedback or suggestions that people may have to get me on the right path.

Answer

You can basically keep the create url link for each tag in the data attribute of each link listen for the click event. When clicked, read this data attribute value and set the create link's href value

<li class="active">
    <a href="#inquiries" 
     data-create="@Url.Action("Create","Inquiries")"
     class="tabLinks"  data-toggle="tab">Inquiries</a>
</li>
<li>
    <a href="#events" data-create="@Url.Action("Create","Events")"
      class="tabLinks" data-toggle="tab">Events</a>
</li>
<li>
    <a href="#media" data-create="@Url.Action("Create","Media")"
     class="tabLinks" data-toggle="tab">Media</a>
</li>

<a id="createLink" 
 href="@Url.Action("Create", "Home ", new { id = Model.ID })">
     <span class="glyphicon glyphicon-plus"></span>
     <strong>Create New</strong>
</a>

Now listen to the click event on these links, read the data attribute value and set it to the href property value of the create link.

$(function() {

     $(".tabLinks").click(function (e) {
          $("#createLink").attr("href", $(this).data("create"));
     });

});

You can do the same for the search form.