asp.net-mvc - 如何在ASP.NET MVC中建立选项卡式菜单？

Question

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

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

当您查看网址时，它说:/users/flesym？tab = stats或？tab = prefs。
我能够创建选项卡式菜单，但是我想知道如何调用一个 Action 方法并根据所选选项卡显示结果。

我尝试使用局部 View 。但是，由于我的页面/users/flesym继承自Mvc.ViewPage(myApplication.Models.User)，因此无法在部分 View 中使用其他继承(例如，我想使用Mvc.ViewUserControl(myApplication.Models)。格式))。

关于如何做的任何想法？

Answer 1

创建 View 模型:

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

    public string PartialViewName;

    public PartialViewModelBase Tab;
}

为每个选项卡创建 View 模型，该 View 模型是从PartialViewModelBase派生的:

public abstract class PartialViewModelBase {
}

public class Tab1PartialViewModel : PartialViewModelBase {
    ...
}

public class TabNPartialViewModel : PartialViewModelBase {
    ...
}

然后，使您的View和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>" %>

然后，您可以在“ View ”中将“部分 View ”用作:

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

在您的 Controller Action 中:

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

希望这可以帮助。