基于活性NAV-标签

上我有使用自举其中的MVC剃刀项目动态MVC剃刀HREF：基于活性NAV-标签

主视图已经NAV-突片
的NAV-翼片具有一个按钮，搜索字段
活性NAV-标签加载下面
的局部视图的局部视图是一个列表

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

我想要“创建新的”按钮和搜索字段网址根据哪个标签当前处于活动状态进行更改。

因此，如果选择了查询，那么“新建”按钮将链接到\查询\创建\ ID

如果选择媒体，那么它会链接到\媒体\创建\ 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混合在一起的问题。我将不胜感激任何反馈或建议，人们可能必须让我走上正确的道路。

来源

2016-08-22 Calvin Smith

基本上，每个链接的数据属性中的每个标记都可以保持创建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")); 
    }); 

});

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

来源

2016-08-22 18:52:54 Shyju

基于活性NAV-标签

回答

相关问题