Есть ли элегантный способ реализовать выбираемые вкладки / меню в ASP.net - PullRequest
1 голос
/ 29 июня 2009

Я изо всех сил пытаюсь найти способ реализации системы меню в виде вкладок в ASP.net. Вкладки выглядят великолепно с точки зрения HTML / CSS и реализованы на главной странице, поэтому у меня нет доступа к тегу body со страницы содержимого. я пытаюсь понять, как изменить «активную вкладку» в зависимости от страницы, к которой обращается пользователь.

Я могу придумать несколько способов сделать это:

  1. Динамически генерировать HTML при каждой загрузке страницы
  2. Манипулировать элементами списка в Page_Load
  3. Использование jQuery для управления выбранным классом вкладок

У меня есть дополнительная проблема, которая, кажется, делает некоторые решения неподходящими; одна вкладка может включать несколько разных имен страниц, поэтому, например, вкладка «Курсы» должна быть выбрана как для Default.aspx, так и для CourseDetail.aspx.

Ничто из этого не выглядит особенно элегантно, у меня такое ощущение, что есть лучший способ сделать это в ASP.net, но я не знаю, что я ищу (или ищу).

HTML:

<div id="tabs">
    <ul>
        <li class="selectedtab"><a href="/">Courses</a></li>
        <li><a href="#">My Courses</a></li>
        <li><a href="#">Administration</a></li>
    </ul>
</div>

CSS:

#head ul 
{
    list-style: none;
    padding:0;
    margin:0;
}

#head li 
{
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
    background: #EEE;
    font-size: large;
    font-weight: bold;
    padding-top: 0.3em;
}

#head li a 
{
    padding: 0 1em;
    text-decoration: none;
    color: Black;
}

#head .selectedtab
{
    padding-bottom: 1px; 
    background: white;
    border-bottom: 1px solid white;
}

#tabs
{
    text-align: right;
    width: 100%;
    border-bottom: 1px solid;
}

Ответы [ 2 ]

1 голос
/ 29 июня 2009

Я думаю, что переключение класса CSS DIV или элемента управления на основе текущего местоположения - это довольно элегантный способ сделать это. Если вы связываете текущую страницу, к которой осуществляется доступ, с API-интерфейсом навигации ASP.NET (используя файл Sitemap), у вас все получится!

1 голос
/ 29 июня 2009

Способ, которым я всегда делал это в прошлом, состоит в том, чтобы дать телу класс, затем каждой вкладке класс (или идентификатор), а затем использовать их в CSS.

<!-- the tabs now have a class you can use -->
<div id="tabs">
    <ul>
        <li class="tabone"><a href="/">Courses</a></li>
        <li class="tabtwo"><a href="#">My Courses</a></li>
        <li class="tabtre"><a href="#">Administration</a></li>
    </ul>
</div>

первая страница

<body class="tabonepage">...

SecondPage

<body class="tabtwopage">...

css - это немного многословно, но локализовано в одном месте. Пока у вас нет 493 вкладок, вы будете золотой

.tabonepage .tabone,
.tabtwopage .tabtwo,
.tabtrepage .tabtre,
{
    padding-bottom: 1px; 
    background: white;
    border-bottom: 1px solid white;
}

изменить о том, как я получил класс в ...

Вот где я опускаю голову от стыда. Я обычно помещаю свойство в мой главный мастер, называемый BodyClass, затем помещаю немного кода в OnPreRender, который устанавливает указанное свойство, и помещаю дыру в выражении в главный мастер. Это не очень красиво, но я с этим согласен, преимущества того, что класс тела намного перевешивает код в моих глазах :-) Вероятно, есть способ, который не затрагивает код, я никогда не исследовал его полностью. Я чувствую, что MVC поможет.

MainMaster.Master:

<body class='<%=BodyClass%>'>

MainMaster.Master.cs

public string BodyClass{ get; set; }

everyotherpage .aspx (я не могу вспомнить, было ли это необходимо, я думаю, что вы строго указали доступ к свойству BodyClass в коде)

<%@ MasterType VirtualPath="~/MasterPages/MainMaster.Master" %>

everyotherpage .aspx.cs

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        this.Master.BodyClass = "areamydetails";
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...