通过JQuery UI选项卡的ASP.NET MVC 3导航

是否有可能使用jquery ui选项卡而不是asp.net mvc 3项目中的标准选项卡实现导航？与本网站上的标签非常相似（问题，标签，用户...）。有任何例子可以做到吗？通过JQuery UI选项卡的ASP.NET MVC 3导航

这是我的实现。

1）我用剃刀视图引擎创建了标准的MVC 3项目。布局页面中的菜单看起来像这样。

<div id="menucontainer"> 
    <ul id="menu"> 
     <li>@Html.ActionLink("Home", "Index", "Home", null, new { title="Index"})</li> 
     <li>@Html.ActionLink("About", "About", "Home", null, new { title="About"})</li> 
    </ul> 
</div>

2）这是我的HomeController操作。

public PartialViewResult Index() 
{ 
    ViewBag.Message = "Welcome to ASP.NET MVC!"; 
    return PartialView(); 
} 

public PartialViewResult About() 
{ 
    return PartialView(); 
} 

public ViewResult Default() 
{ 
    return View(); 
}

3）我也改变了Global.asax.cs来显示Default页面。

public static void RegisterRoutes(RouteCollection routes) 
{ 
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

    routes.MapRoute(
     "Default", // Route name 
     "{controller}/{action}/{id}", // URL with parameters 
     new { controller = "Home", action = "Default", id = UrlParameter.Optional } // Parameter defaults 
    ); 

}

4）最后这里是我的脚本应用标签的行为。

$(document).ready(function() { 
$('#menucontainer').tabs(); 
$("menucontainer").bind('tabsselect', 
    function(event, ui) { 
     document.title = ui.tab.title; 
    } 
);});

所以jQuery UI的只是增加了额外的div的（在这种情况下，2）每个选项卡页面和该div＃主追加后。我想在用户转到菜单栏中的其他选项卡之后，动态地替换div＃main的内容。现在看起来像这样。

<div id="menucontainer"> 
    ... 
    <div id="Index"> 
     Content of Index tab. 
    </div> 
    <div id="About"> 
     Content of About tab. 
    </div> 
</div> 
<div id="main"> 
    Content of the page. 
</div>

来源

2012-06-19 Pavel Shchegolevatykh

你有什么尝试？这不应该是一个难以解决的问题，因为它只是改变一些小标记的情况。 – BenjaminPaul

我试图实现这一点。我已更改控制器操作以返回部分视图。但是当我转到某个选项卡时，新的内容只能追加到底部，并不能取代旧的内容。 –

你可以发布一些代码给我们看看吗？ – BenjaminPaul

确保您已经为了隐藏不活动标签页中定义的ui-tabs-hide CSS类：

.ui-tabs-hide { 
    display: none; 
}

方式的jQuery UI选项卡的工作，改变标签后，它只是增加了ui-tabs-hide所有其他在从AJAX调用刷新其内容后，将其从当前可见标签中移除。

来源

2012-06-20 08:40:22

通过JQuery UI选项卡的ASP.NET MVC 3导航

回答

相关问题