Question

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

主视图有nav-tabs
nav-tabs有一个按钮和搜索字段
有效的导航标签会在
部分视图是列表

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

我想拥有＆＃34;创建新的＆＃34;按钮和搜索字段网址会根据当前处于活动状态的标签进行更改。

因此，如果选择了查询，那么＆＃34;创建新的＆＃34;按钮将链接到\ inquiry \ create \ id

如果选择了媒体，则会链接到\ media \ create \ id

nav-tabs的定义如下：

＆＃13;

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

＆＃13;

我尝试了很多不同的方法，但无法弄清楚如何使其发挥作用。我经常遇到将Razor语法和Javascript混合在一起的问题。我非常感谢人们可能不得不让我走上正确道路的任何反馈或建议。

Answer 1

您基本上可以保持每个链接的data属性中每个标记的create 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"));
     });

});

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

基于活动导航标签的动态MVC Razor href

1 个答案: