asp.net-mvc如何加载 tabstrip 内容对 MVC 的需求

标签: Asp.net-MVC
发布时间: 2017/3/25 4:17:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我用引导 tabstrip 来创建选项卡。但当我点击菜单选项 TabStrip 加载所有标签数据。我想当我点击,加载我的选项卡条数据。

下面是我的代码来创建选项卡地带使用引导︰

             <div class="container-fluid">
<ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

    <li class="active"><a href="#OverView" role="tab" data-toggle="tab"><strong>Overview</strong></a></li>
    <li role="presentation"><a href="#NodeView" role="tab" data-toggle="tab"><strong>Node</strong></a></li>
    <li role="presentation"><a href="#ConnectView" role="tab" data-toggle="tab"><strong>Connect</strong></a></li>

</ul>

<div class="tab-content">

    <div class="tab-pane fade" id="OverView">@Html.Action("Overview")</div>
    <div class="tab-pane fade" id="NodeView">@Html.Action("Node")</div>
    <div class="tab-pane fade" id="ConnectView">@Html.Action("Connect")</div>

</div>

如何可以加载不同的选项卡的内容时单击该选项卡上的?

解决方法 1:

您可以使用 ajax 加载选项卡内容,当用户点击链接选项卡。

所以更新您的标记,以便链接将具有一个 css 类和 html5 数据属性在那里我们将存储的分部视图当用户点击它时要加载的 url。我们将作为我们的 jQuery 选择器使用的 css 类,注册这种行为。

<div class="container-fluid">
    <ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

        <li class="active">
         <a href="#OverView" role="tab" class="ajaxTabs" data-url="@Url.Action("Overview")" data-toggle="tab"><strong>Overview</strong></a></li>
        <li role="presentation"><a href="#NodeView" role="tab" class="ajaxTabs" data-url="@Url.Action("Node")" data-toggle="tab"><strong>Node</strong></a></li>
        <li role="presentation"><a href="#ConnectView" role="tab" class="ajaxTabs" data-url="@Url.Action("Connect")" data-toggle="tab"><strong>Connect</strong></a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade" id="OverView"></div>
        <div class="tab-pane fade" id="NodeView"></div>
        <div class="tab-pane fade" id="ConnectView"></div>

    </div>
</div>

在你文档的准备活动中,注册这些链接上的单击事件与我们新的 css 类,单击时,读取的数据 url 属性值,使用 jQuery load 方法将数据加载到相应的选项卡内容 div

$(function () {

    $("a.ajaxTabs").click(function (e) {
        e.preventDefault();
        var u = $(this).data("url");
        var targetItem = $(this).attr("href");
        $(targetItem).load(u);
    });

});
赞助商