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

2024-05-02

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

选项卡式菜单 StackOverflow http://img410.imageshack.us/img410/3037/image1nw​​r.jpg http://img410.imageshack.us/img410/3037/image1nwr.jpg

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

我尝试使用局部视图。但由于我的页面 /users/flesym 继承自 Mvc.ViewPage(myApplication.Models.User),因此我无法在部分视图中使用另一个继承(例如,我想使用 Mvc.ViewUserControl(myApplication.Models.格式))。

关于如何去做有什么想法吗?


创建视图模型:

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

然后使您的 View 和 PartialViews 强类型化:

View:

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

部分视图:

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

希望这可以帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 ASP.NET MVC 中构建选项卡式菜单? 的相关文章

随机推荐