javascript - 基于事件nav-tab的动态MVC Razor href

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


主视图具有导航选项卡
导航标签具有按钮和搜索字段
活动的导航标签会在下面加载部分视图
部分视图是一个列表


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

我想使用“新建”按钮，并根据当前处于活动状态的标签更改“搜索”字段的网址。

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

如果选择了媒体，则它将链接到\ 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的问题。对于人们可能需要让我走上正确道路的任何反馈或建议，我将深表感谢。

最佳答案

您基本上可以将每个标记的create url链接保留在每个链接的data属性中，以侦听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事件，读取数据属性值并将其设置为create链接的href属性值。

$(function() {

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

});

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

关于javascript - 基于事件nav-tab的动态MVC Razor href，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39086519/