javascript - 基于事件导航选项卡的动态 MVC Razor href

Question

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

• 主视图有导航标签
• 导航标签有一个按钮和搜索字段
• 事件的导航选项卡加载下面的部分 View
• 局部 View 是一个列表

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

我希望根据当前处于事件状态的选项卡更改“新建”按钮和搜索字段 url。

因此，如果选择查询，则“新建”按钮将链接到\inquiry\create\id

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

导航标签定义如下:

<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 混合在一起的问题。我将非常感谢人们可能需要的任何反馈或建议，以使我走上正确的道路。

Answer 1

您基本上可以在每个链接的数据属性中为每个标签保留创建 url 链接，监听 click 事件。单击时，读取此数据属性值并设置创建链接的 href 值

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

现在监听这些链接上的click事件，读取数据属性值并将其设置为创建链接的href属性值。

$(function() {

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

});

您可以对搜索表单执行相同的操作。