Question

我想在ASP.NET MVC 3中重新加载每个选项卡我更改选项卡的选项卡内容，当我选择第一个选项卡（index = 0）时，我想重新加载内容。在选项卡中，它是ASP.NET MVC部分视图

我有这段代码：

<script type="text/javascript">
    $(function () {
        $('#tabs').tabs();
    });
</script>

<div id="tabs"> 
    <ul> 
        <li><a href="#tabs-1">AAAA</a></li> 
        <li><a href="#tabs-2">BBBB</a></li>
    </ul>

    <div id="tabs-1"> 
        @Html.Partial("PartialViewA", Model)
    </div> 
    <div id="tabs-2"> 
        @Html.Partial("PartialViewB", Model)
    </div> 

<div>

你有什么想法吗？

Answer 1

根据jQuery tabs demos，它应该像做：

一样简单

<div id="tabs"> 
    <ul> 
        <li><a href="@Url.Action("myActionA", "myController")">Tab 1</a></li>
        <li><a href="@Url.Action("myActionB", "myController")">Tab 2</a></li>
    </ul>
</div>

然后在你的控制器中：

public ActionResult MyActionA
{
    return Partial("PartialViewA");
}

public ActionResult MyActionB
{
    return Partial("PartialViewB");
}

Answer 2

这是一个简单的示例，当您初始化选项卡时，IMPORTANT部分是select: function(e, ui)位，因为这会覆盖默认的bahaviour并允许访问选项卡点击事件：

<div id="menu" style=" background-color:White; width:950px; height:400px; float:left;">             
    <div id="tabContainer">
        <ul> 
            <li><a href="#tab0">Home</a></li> 
            <li><a href="#tab1">Products</a></li> 
            <li><a href="#tab2">Contact Us</a></li>                                               
        </ul>                    

        <div id="tab0"></div>    
        <div id="tab1"></div> 
        <div id="tab2"></div>       
    </div>          
</div> 

$(function() {
    var $tabs = $("#tabContainer").tabs({
        select: function(e, ui) {
            var thistab = ui;
            runMethod(thistab.index);
        }
    });
});

function runMethod(thistab) {
    selectedtab = thistab;
    switch (thistab) {
        case 1:
            getTab0Data();
            break;

        case 2:
            getTab1Data();
            break;

        case 3:
            getTab2Data();
            break;
    }
}

基本上，getTab * n * Data（）函数运行一个ajax请求，通过partialview结果填充相应的div（即tab0，tab1，tab2等）。

对于jquery ajax，请参阅：

jquery ajax

希望这会有所帮助

Answer 3

看一下这篇文章：

http://dalldorf.com/blog/2011/03/jquery-ui-tabs-main-menu-1/

它可以帮助您找到解决方案。

它解释了如何使用jQuery UI样式选项卡的外观和感觉，但让您可以更好地控制内容的呈现方式。

它避免了对布局的递归调用的缓存和嵌套...

Answer 4

检查来自jQuery Tabs Ajax Demos的演示，只需致电您的控制器并从中返回部分视图。

Answer 5

我找到了一个解决方法，即拒绝缓存操作方法，同时保持选项卡缓存启用，这样在切换这样的标签时不会丢失任何当前输入：

[OutputCaching(Location=OutputCacheLocation.None,NoStore=true)]
Public ActionResult YourMethod()...

Answer 6

根据jQuery UI site，您可以尝试明确指定缓存选项

e.g。

$(function () {
    $('#tabs').tabs({
        cache: false
    });
});

这会阻止浏览器缓存原始的ajax内容，因此当您重新访问该选项卡时，它将重新加载其内容。

ASP.NET MVC 3应用程序中的jQuery UI重新加载选项卡内容

6 个答案: