基于活动nav-tab的动态MVC Razor

我有一个使用Bootstrap的MVC Razor项目:

• 主视图有导航标签
导航选项卡有一个按钮和搜索字段
• 活动的导航选项卡加载
下面的部分视图
• 局部视图是一个List

主导航选项卡图片和部分视图列表加载在下面

我想有"创建新"按钮和搜索字段url根据哪个选项卡当前是活跃的改变。

因此，如果选择了查询，那么"创建新"按钮将链接到'inquiry' Create 'id

如果选择了Media，那么它将链接到' Media 'create'id

nav-tab的定义如下:

<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>

我试过很多不同的方法，但都不知道如何让这个工作。我经常遇到将Razor语法和Javascript混合在一起的问题。我将非常感谢任何反馈或建议，人们可能不得不让我走上正确的道路。

<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>

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