Question

我正在使用bootstrap和ASP.NET mvc来创建一个Web应用程序。我在每个选项卡上使用视图，但是现在所有数据都是相同的。我想在选项卡处于活动状态时调用我的视图并返回数据。我怎样才能做到这一点？所以我需要使用相同的参数加载diferents视图。我怎么能用js做到这一点！？这是标签：

<div class="board isactive">
<div class="board-inner">
    <ul class="nav nav-tabs2" id="myTab">
        <div class="liner"></div>
        <li class="active">
            <a href="#six" data-toggle="tab" title="Project Details">
                <span class="round-tabs six">
                    <i class="glyphicon glyphicon-globe"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#one" data-toggle="tab" title="Contract Details">
                <span class="round-tabs one">
                    <i class="glyphicon glyphicon-list"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#two" data-toggle="tab" title="Assignments">
                <span class="round-tabs two">
                    <i class="glyphicon glyphicon-user"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#three" data-toggle="tab" title="Purchase Orders">
                <span class="round-tabs three">
                    <i class="fa fa-file-powerpoint-o"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#four" data-toggle="tab" title="Invoices">
                <span class="round-tabs four">
                    <i class="fa fa-file-text-o"></i>
                </span>
            </a>
        </li>
    </ul>
</div>

单击选项卡时需要加载的选项卡和页面

</div>
    <div class="tab-pane fade" id="one">
        <h4>Contracts for @Model.Item1.Name</h4>
        <p class="narrow text-center">
            @Html.Action("index", "contracts", new { Model.Item1.ProjectID })
        </p>
    </div>
    <div class="tab-pane fade" id="two">
        <h4>Assignments for @Model.Item1.Name</h4>
        <p class="narrow text-center" >
            @Html.Action("index", "assignments", new { Model.Item2.ContractID })
        </p>
    </div>

    <div class="tab-pane fade" id="three">
        <h4>Purchase Orders for @Model.Item1.Name</h4>
        <p class="narrow text-center">
            @Html.Action("index", "purchaseorders", new { Model.Item2.ContractID })
        </p>
    </div>
    <div class="tab-pane fade" id="four">
        <h4>Invoices for @Model.Item1.Name</h4>
        <p class="narrow text-center">
            @Html.Action("index", "invoices", new { Model.Item2.ContractID })
        </p>
    </div>

Answer 1

您可以为选项卡中的每个p标记添加id标记，并使用ajax调用动态加载视图。像这样的东西;

分别更改每个（命名约定可能不错）。

<div class="tab-pane fade" id="one">
    <h4>Contracts for @Model.Item1.Name</h4>
    <p class="narrow text-center" id="oneContent">

    </p>
</div>

然后添加一个类似这样的javascript块;

 $(document).ready(function () {

        // get yourid parameter
        var contractId = '@Model.Item2.ContractID';
        var params = { id: contractId };

        // just change these based on the tab....
        var url = ''; 
        var target = '';

        // capture the on tab click and see which tab you are showing
        $('a[data-toggle="tab"]').on('shown.bs.tab',
            function (e) {
                var tabId = $(e.target).attr("href");
                switch(tabId) {
                case "#one":
                    var url = '/contracts/index/';
                    var target = 'oneContent';
                    break;
                case "#two":
                    var url = '/assignments/index/';
                    var target = 'twoContent';
                    break;
                case "#three":
                    var url = '/purchaseorders/index/';
                    var target = 'threeContent';
                    break;
                case "#four":
                    var url = '/invoices/index/';
                    var target = 'fourContent';
                    break;
                }
                //    e.target; // newly activated tab
                //   e.relatedTarget // previous active tab
            });

           //now get the view and load it to the tab content id that you named above
           getView(url, params, target);
    });

调用您的局部视图（确保它们返回PartialView）

function getView(url, params, target) {
        $.ajax({
            type: "GET",
            url: url,
            error: function (a, b, c) {
                debugger;
            },
            data: params,
            cache: false,
            success: function (returnValue) {
                $(target).html(returnValue);
            }
        });
    }

未经测试 - 但它应该让你去...

希望有所帮助史蒂夫

使用mvc和JS在选项卡上加载多个视图

1 个答案: