我想构建一个非常类似于StackOverflow的配置文件管理的选项卡式菜单。
tabbed menu StackOverflow http://img410.imageshack.us/img410/3037/image1nwr.jpg
当你看一下网址时,它说:/ users / flesym?tab = stats或?tab = prefs。 我能够创建选项卡式菜单,但我想知道如何调用操作方法并根据所选选项卡显示结果。
我尝试使用局部视图。但是当我的页面/ users / flesym继承自Mvc.ViewPage(myApplication.Models.User)时,我不能在我的局部视图中使用另一个继承(例如,我想使用Mvc.ViewUserControl(myApplication.Models)。格式))。
有关如何做的任何想法?
答案 0 :(得分:9)
创建视图模型:
public class UserViewModel {
public myApplication.Models.User User;
public string PartialViewName;
public PartialViewModelBase Tab;
}
为每个Tab创建视图模型,派生自PartialViewModelBase:
public abstract class PartialViewModelBase {
}
public class Tab1PartialViewModel : PartialViewModelBase {
...
}
public class TabNPartialViewModel : PartialViewModelBase {
...
}
然后强烈输入您的View和PartialView:
查看:
<%@ 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);
}
希望这有帮助。
答案 1 :(得分:2)
他们可能正在使用jquery ui标签:http://docs.jquery.com/UI/Tabs
答案 2 :(得分:0)
从它的外观来看,没有任何标签似乎在没有触发链接并查看HTML的情况下显示任何内容,它们似乎看起来像它们的外观并且只是传递特定的查询字符串值。
要实现您的目标,您需要获取指定的查询字符串值(如果有),然后相应地对结果数据进行排序。
答案 3 :(得分:0)
另一个解决方案是创建一个自定义路由(从RouteBase派生),它使用查询字符串来选择不同的操作。每个操作都有一个单独的视图,该视图使用包含页面公共内容的母版页。
基本上你有“UsersController”,其中包含“stats”,“prefs”等操作。所有这些都是由你实现的自定义路由类选择的。