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

标签 javascript c# jquery asp.net-mvc razor

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

最佳答案

您基本上可以在每个链接的数据属性中为每个标签保留创建 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"));
     });

});

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

关于javascript - 基于事件导航选项卡的动态 MVC Razor href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39086519/

相关文章:

javascript - 从javascript中的元素为对象的数组中检索元素

c# - 从数组列表中获取字典

javascript - "Google like"图像预览按钮不起作用

javascript - 这是禁用滚动的好方法吗?

javascript - websql成功回调在查询后无法访问变量

javascript - 如何更改大屏幕上的菜单对齐方式?

javascript - 通过添加标题和一些计算数据将两个 excel 数据导出到单个 excel 表中

c# - 此代码如何抛出 NullReferenceException?

c# - 如何从 JavaScript 中下载整个网页内容,包括图像?

jquery - 主干 subview 事件