¿Cómo puedo crear un menú con pestañas en ASP.NET MVC?

Question

Me gustaría crear un menú con pestañas bastante similar a la gestión de perfiles de StackOverflow.

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

Al echar un vistazo a la url, que dijo:?/Usuarios/flesym tab = estadísticas o pestaña de preferencias? =. Pude crear el menú con pestañas, pero me gustaría saber CÓMO puedo llamar a un método de acción y mostrar el resultado según la pestaña seleccionada.

He intentado utilizar una vista parcial. Pero como mi página/users/flesym hereda de Mvc.ViewPage (myApplication.Models.User), no puedo usar otra herencia en mi vista parcial (por ejemplo, me gustaría usar Mvc.ViewUserControl (myApplication.Models). Formato)).

¿Alguna idea sobre cómo hacerlo?

Answer 1

Crear vista del modelo:

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

    public string PartialViewName; 

    public PartialViewModelBase Tab; 
} 

Crear Visualización de modelos para cada ficha, derivado de PartialViewModelBase:

public abstract class PartialViewModelBase { 
} 

public class Tab1PartialViewModel : PartialViewModelBase { 
    ... 
} 

public class TabNPartialViewModel : PartialViewModelBase { 
    ... 
} 

A continuación, hacer que su visión y PartialViews inflexible:

Vista:

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

A continuación, en su opinión, que puede utilizar sus vistas parciales como:

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

En su acción de controlador:

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

Espero que esto ayude.

Answer 2

es probable que estén usando las pestañas jquery ui: http://docs.jquery.com/UI/Tabs

Answer 3

Desde el aspecto de la misma, ninguna de las pestañas parecen revelar nada sin disparar el enlace y mirar el código HTML para ello, sólo parece que son estilo para que luzca como se ven y solo pase valores de cadena de consulta específicos.

Para lograr lo que parece ser, necesitará tomar el valor de la cadena de consulta especificada, si existe, y luego ordenar los datos resultantes en consecuencia.

Answer 4

Otra solución sería crear una ruta personalizada (derivada de RouteBase) que utiliza la cadena de consulta para seleccionar una acción diferente. Cada acción tendría una vista separada que usa una página maestra que contiene el contenido común para la página.

Básicamente tendría "UsersController" con acciones "stats", "prefs", etc. Todos elegidos por una clase de ruta personalizada que haya implementado.