Comment puis-je créer un menu à onglets dans ASP.NET MVC?

Question

Je voudrais construire un menu à onglets assez similaire à la gestion des profils de StackOverflow.

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

Lorsque vous jetez un oeil à l'url, il a dit:?/Users/flesym tab = statistiques ou onglet = prefs?. J'ai été capable de créer le menu à onglets, mais je voudrais savoir comment puis-je appeler une méthode d'action et afficher le résultat en fonction de l'onglet sélectionné.

J'ai essayé d'utiliser une vue partielle. Mais comme mon page/users/flesym hérite de Mvc.ViewPage (myApplication.Models.User), je ne peux pas utiliser un autre héritage dans ma vue partielle (par exemple, je voudrais utiliser Mvc.ViewUserControl (myApplication.Models. Format)).

Des idées sur la façon de le faire?

Answer 1

Créer une vue Modèle:

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

    public string PartialViewName; 

    public PartialViewModelBase Tab; 
} 

Créer Voir les modèles pour chaque onglet, dérivé de PartialViewModelBase:

public abstract class PartialViewModelBase { 
} 

public class Tab1PartialViewModel : PartialViewModelBase { 
    ... 
} 

public class TabNPartialViewModel : PartialViewModelBase { 
    ... 
} 

Ensuite, faire votre vue et PartialViews fortement typé:

Vue:

<%@ 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>" %> 

Ensuite, dans votre vue, vous pouvez utiliser vos vues partielles:

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

Dans votre action du contrôleur:

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

Hope this helps.

Answer 2

ils utilisent probablement les onglets ui jquery: http://docs.jquery.com/UI/Tabs

Answer 3

Des regards de celui-ci, aucun des onglets semblent révéler quoi que ce soit sans tirer hors le lien et en regardant le code HTML, il semble juste qu'ils sont style pour ressembler à quoi ils ressemblent et juste passer des valeurs de chaîne de requête spécifiques.

Pour obtenir ce que vous semblez être après avoir saisi la valeur de chaîne de requête spécifiée, s'il y en a une, puis triez les données résultantes en conséquence.

Answer 4

Une autre solution consisterait à créer une route personnalisée (Dériver à partir de RouteBase) qui utilise la chaîne de requête pour sélectionner une action différente. Chaque action possède une vue distincte qui utilise une page maître contenant le contenu commun de la page.

Fondamentalement, vous auriez "UsersController" avec des actions "stats", "prefs", etc. Tous choisis par une classe de route personnalisée que vous avez implémentée.