Как создать меню с вкладками в ASP.NET MVC?

Question

Я хотел бы создать меню с вкладками, очень похожее на управление профилями в StackOverflow.

меню с вкладками StackOverflow http://img410.imageshack.us/img410/3037/image1nwr.jpg

Когда вы смотрите на URL, он говорит: / users / flesym? Tab = stats или? Tab = prefs. Мне удалось создать меню с вкладками, но я хотел бы знать, КАК я могу вызвать метод действия и отобразить результат в зависимости от выбранной вкладки.

Я пытался использовать частичное представление. Но поскольку моя страница / users / flesym наследуется от Mvc.ViewPage (myApplication.Models.User), я не могу использовать другое наследование в своем частичном представлении (например, я хотел бы использовать Mvc.ViewUserControl (myApplication.Models). Format)).

Есть мысли о том, как это сделать?

Answer 1

Создать вид модели:

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

    public string PartialViewName;

    public PartialViewModelBase Tab;
}

Создание моделей представления для каждой вкладки, полученных из PartialViewModelBase:

public abstract class PartialViewModelBase {
}

public class Tab1PartialViewModel : PartialViewModelBase {
    ...
}

public class TabNPartialViewModel : PartialViewModelBase {
    ...
}

Тогда сделайте ваши View и PartialViews строго типизированными:

Вид:

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

Надеюсь, это поможет.

Answer 2

они, вероятно, используют вкладки jquery ui: http://docs.jquery.com/UI/Tabs

Answer 3

Другим решением будет создание пользовательского маршрута (производного от RouteBase), который использует строку запроса для выбора другого действия. Каждое действие будет иметь отдельное представление, использующее главную страницу, содержащую общее содержимое страницы.

По сути, у вас будет «UsersController» с действиями «stats», «prefs» и т. Д. Все они выбираются с помощью пользовательского класса маршрута, который вы реализовали.

Answer 4

Судя по всему, ни одна из вкладок, кажется, ничего не показывает, не открывая ссылку и не просматривая HTML-код, просто кажется, что они выглядят так, как они выглядят, и просто передают конкретные значения строки запроса.

Чтобы достичь того, что вам кажется после того, как вам понадобится получить указанное значение строки запроса, если оно есть, и затем соответствующим образом отсортировать полученные данные.