Wie kann ich ein Registerkartenmenü in ASP.NET MVC erstellen?

Question

Ich möchte ein Tab-Menü ähnlich der Profilverwaltung von StackOverflow erstellen.

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

Wenn Sie einen Blick auf die URL nehmen, sagte er:/users/FlesYm tab = Statistiken oder tab = Prefs?. Ich konnte das Tab-Menü erstellen, aber ich würde gerne wissen WIE kann ich eine Aktionsmethode aufrufen und das Ergebnis abhängig von der ausgewählten Registerkarte anzeigen.

Ich habe versucht, eine Teilansicht zu verwenden. Aber da meine Seite/users/flesym von Mvc.ViewPage (myApplication.Models.User) erbt, kann ich keine andere Vererbung in meiner Teilansicht verwenden (ich möchte z. B. Mvc.ViewUserControl (myApplication.Models) verwenden. Format)).

Irgendwelche Gedanken, wie es geht?

Answer 1

Ansicht erstellen Modell:

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

    public string PartialViewName; 

    public PartialViewModelBase Tab; 
} 

für jeden Tab Ansicht erstellen Modelle von PartialViewModelBase abgeleitet:

public abstract class PartialViewModelBase { 
} 

public class Tab1PartialViewModel : PartialViewModelBase { 
    ... 
} 

public class TabNPartialViewModel : PartialViewModelBase { 
    ... 
} 

Dann ist Ihre Ansicht machen und PartialViews stark typisiert:

Ausblick:

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

PartialViews

:

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

In Ihrem Controller-Aktion:

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

this helps

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Tab1PartialViewModel>" %> 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TabNPartialViewModel>" %> 

Dann in Ihrer Ansicht Sie Ihre Teilansichten als nutzen können.

Answer 2

sie wahrscheinlich mit den jQuery UI Tabs sind: http://docs.jquery.com/UI/Tabs

Answer 3

Von den Blicken von ihm, keiner der Tabs scheinen, nichts zu verraten, ohne den Link abzufeuern und Blick auf den HTML-Code für sie, scheint es gerade sie sind so aussehen, wie sie aussehen und nur bestimmte Abfragezeichenfolgen übergeben.

Um zu erreichen, was Sie zu sein scheinen, müssten Sie den angegebenen Abfragezeichenfolgenwert abrufen, wenn einer vorhanden ist, und die resultierenden Daten entsprechend sortieren.

Answer 4

Eine andere Lösung wäre, eine benutzerdefinierte Route (Ableiten von RouteBase) zu erstellen, die den Querystring verwendet, um eine andere Aktion auszuwählen. Jede Aktion würde eine separate Ansicht haben, die eine Masterseite mit dem gemeinsamen Inhalt für die Seite verwendet.

Im Grunde hätten Sie "UsersController" mit den Aktionen "stats", "prefs" usw. Alles ausgewählt von einer benutzerdefinierten Route-Klasse, die Sie implementiert haben.