Question

基本上我在ASP.NET MVC中实现了这样的引导选项卡我想在选项卡上调用控制器单击以从数据库中获取最新数据并显示最新数据。怎么可以这样做？假设我的控制器名称是TabList（int？id）

触发onclick的代码如下，但我不确定要放入哪些代码

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //code here
        });

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
</ul>

<div id="tab-1" class="tab-pane">
{ Html.RenderPartial("_Tab1", Model.Tab1); }
</div>

<div id="tab-2" class="tab-pane">
{ Html.RenderPartial("_Tab2", Model.Tab2); }
</div>

<div id="tab-3" class="tab-pane">
{ Html.RenderPartial("_Tab3", Model.Tab3); }
</div>

Answer 1

通过使用JavaScript和Ajax，可以以相当简单的方式实现。如果您将一个函数附加到该选项卡的onClick并获取函数以对您的数据发出GET请求，然后处理返回的数据，以便放置到您的页面上。

function getDataFunction()
{
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //Data is now loaded. Display the data on the page by using "xmlhttp.responseText"
            }
        }
        xmlhttp.open("GET","Url/To/Data/");
        xmlhttp.send();
}

我不确定是否有一些很酷的MVC方式，但上面的解决方案很容易解决你的问题。

有关Ajax的更多信息，W3Schools有一些很棒的初学者指南http://www.w3schools.com/ajax/

Answer 2

使用Ajax执行此操作的另一种方法：

    function GetPartialView() {
    $.ajax({
        type: "POST",
        url: siteRoot + 'ControllerName/ActionName',
        dataType: "html",
        success: function (data) {
            debugger;
            $('#AnyDivIdYouWant').html(data);
        }
    }).error(function () {

    });;
}

MVC在bootstrap选项卡上单击重新加载控制器并刷新

2 个答案: