如何在ASP.NET MVC中构建选项卡式菜单？

Question

我想建立一个选项卡式菜单非常类似于StackOverflow的配置文件管理。

tabbed menu StackOverflow http://img410.imageshack.us/img410/3037/image1nwr.jpg

当您查看url时，它显示: /users/flesym?tab=stats or ?tab=prefs。我能够创建选项卡式菜单，但我想知道如何调用操作方法并根据所选的选项卡显示结果。

我尝试使用局部视图。但是，因为我的页面/users/ Mvc.ViewUserControl(myApplication.Models.Format)).继承自Mvc.ViewPage(myApplication.Models.User)，所以我不能在部分视图中使用另一个继承(例如，我想使用flesym

你有什么想法吗？

Answer 1

创建视图模型：

public class UserViewModel {
    public myApplication.Models.User User;

    public string PartialViewName;

    public PartialViewModelBase Tab;
}

为每个选项卡创建视图模型，派生自PartialViewModelBase：

public abstract class PartialViewModelBase {
}

public class Tab1PartialViewModel : PartialViewModelBase {
    ...
}

public class TabNPartialViewModel : PartialViewModelBase {
    ...
}

然后让你的视图和PartialViews强类型：

查看：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<UserViewModel>" %>

PartialViews：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Tab1PartialViewModel>" %>

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TabNPartialViewModel>" %>

然后在你的视图中，你可以像这样使用你的局部视图：

<% Html.RenderPartial(Model.PartialViewName, Model.Tab); %>

在您的控制器操作中：

public ActionResult YourAction(string tab)
{
    // check if tab is valid !!!

    var model = new UserViewModel {
        User = new myApplication.Models.User();
        PartialViewName = tab;
        Tab = TabRepository.GetTabByName(tab);
        /*
         * or
         * Tabs = (new Dictionary<string, type> {
         *     {"Tab1", typeof(Tab1PartialViewName)},
         *     {"TabN", typeof(TabNPartialViewName)}
         *     })[tab];
         */
    };

    Return View(model);
}

希望这能有所帮助。

Answer 2

他们可能使用jquery ui选项卡：http://docs.jquery.com/UI/Tabs

Answer 3

从外观上看，这些选项卡似乎没有显示任何内容，除非触发链接并查看HTML，只是看起来它们的样式看起来像它们看起来的样子，只是传递了特定的查询字符串值。

要实现您想要的结果，您需要获取指定的查询字符串值(如果有)，然后对生成的数据进行相应的排序。