2009-06-10 70 views
9

Me gustaría crear un menú con pestañas bastante similar a la gestión de perfiles de StackOverflow.¿Cómo puedo crear un menú con pestañas en ASP.NET MVC?

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?

Respuesta

9

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.

+0

Esta parece ser una gran manera de lidiar con mi problema.Pero, ¿qué pasa con la clase PartialViewModelBase? ¿Es una clase que tengo que crear? TabRepository.GetTabByName (tab); tiene que devolver un PartialViewModelBase. Cómo puedo hacer esto ? – Flesym

+0

PartialViewModelBase es solo una clase base para sus PartialViewModels. Podría ser solo una clase abstracta vacía. TabRepository es solo por ejemplo. Podrías crear Dictionary TabTypes = new {{"Tab1", typeof (Tab1ViewModel)}, ...}; en algún lugar de su controlador y luego haga lo siguiente: Tab = Activator.CreateInstance (TabTypes [tab]); –

2

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

+0

Me sorprendería que las pestañas JQuery UI sean solo para clientes. – erikkallen

+0

no, no, no, hay una opción para cargarlos a través de ajax: http://docs.jquery.com/UI/Tabs#option-ajaxOptions –

+0

Sí, pero no se devolverán al hacer clic en ellos, van a use XmlHttpRequest – erikkallen

0

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.

0

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.

Cuestiones relacionadas