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

我想构建一个与StackOverflow的概要文件管理非常相似的选项卡式菜单

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

我试着使用局部视图。但是由于我的页面/users/flesym继承自Mvc.ViewPagemyApplication.Models.User，因此我不能在局部视图中使用其他继承。例如，我想使用Mvc.ViewUserControlmyApplication.Models.Format

---

有什么想法吗？

他们可能在使用jquery ui选项卡：

从外观上看，没有一个选项卡在不触发链接并查看HTML的情况下会显示任何内容，只是看起来它们的样式与它们的外观相似，并且只传递特定的查询字符串值

若要实现您在创建视图模型后的预期效果，您需要获取指定的查询字符串值（如果有），然后对结果数据进行相应排序。

创建视图模型：

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 {
    ...
}

然后将视图和部分视图强类型化：

视图：

部分观点：

<%@ 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);
}

---

希望这有帮助。

另一个解决方案是创建一个自定义路由，该路由派生自RouteBase，使用querystring选择不同的操作。每个操作都会有一个单独的视图，该视图使用包含页面公共内容的母版页

---

基本上，您会有一个UsersController，其中包含操作统计信息、pref等，所有这些都是由您实现的自定义路由类选择的。

这似乎是解决我的问题的一个很好的方法。但是PartialViewModelBase类呢？这是我必须创建的类吗？TabRepository.gettabbynametb；必须返回PartialViewModelBase。我该怎么做？PartialViewModelBase只是PartialViewModels的基类。它可能只是一个空的抽象类。TabRepository只是一个例子。您可以创建Dictionary TabTypes=new{{Tab1，typeofTab1ViewModel}，…}；然后执行以下操作：Tab=Activator.createInstanceTableTypes[Tab]；我会很惊讶，jQueryUI选项卡是全客户端的。不，它们不是，有一个选项可以通过ajax加载它们：是的，但是当您单击它们时它们不会回发，它们将使用XmlHttpRequest

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);
}