Программное решение для изменения идентификатора навигации для выделения текущей страницы ASP.NET

Я пишу веб-сайт с Visual Studio 2008 и ASP.NET 3.5. У меня есть мастер-страница, настроенная для упрощения макета и содержания страниц контента для контента, а не контента и макета.

Навигация - это список, css'd, поэтому он выглядит как панель. Чтобы выделить страницу на панели, элемент списка должен выглядеть следующим образом: <li id="current">. Я не хочу использовать <asp:ContentPlaceHolder>, если я могу избежать этого. Есть ли какой-нибудь код, который я могу добавить на каждую из моих страниц (или только на главную страницу?), Чтобы выполнить это, или я застрял с помощью <asp:ContentPlaceHolder> 's?

Ответы

Ответ 1

Добавьте свойство на свою главную страницу под названием Страница Секция

public string PageSection { get; set; }

Добавьте директиву страницы MasterType в начало страницы содержимого

<%@ MasterType VirtualPath="~/foo.master" %>

В коде страницы содержимого позади задайте свойство PageSection главной страницы

Master.PageSection = "home";

На главной странице сделайте тег body тегом сервера

<body ID="bodyTag" runat="server">

В коде главной страницы, используйте это свойство, чтобы установить класс в теге body

bodyTag.Attributes.Add("class", this.PageSection);

Дайте каждому из ваших навигационных элементов уникальный атрибут идентификатора.

В вашем css измените отображение элементов навигации на основе текущего класса страницы

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}

Ответ 2

Считаете ли вы, что используете файл Web.sitemap? Это делает его очень легким. Если ваш файл Sitemap выглядит так...

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

... тогда вы можете сделать это на своей главной странице, чтобы добиться желаемых результатов:

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

Текущая страница LI будет иметь класс "activenav" (или то, что вы решите использовать), а остальные будут иметь класс "inactivenav". Вы можете написать свой CSS соответственно. Это метод, который я использую на своем сайте, и он отлично работает.

Ответ 3

Это лучшее семантическое соответствие и, скорее всего, более простая переменная, позволяющая сохранять навигацию с использованием одних и тех же классов или идентификаторов во всем мире и только изменять идентификатор элемента тела, чтобы он соответствовал:

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

а затем на каждой странице...

<body id="home">
<body id="blog">

И в css:

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}

Ответ 4

Использование или неприменение ContentPlaceHolder не повлияет на то, какой элемент имеет id = "current", установленный на нем.

Вам нужно будет взглянуть на какой-либо метод, будь то ваш код для главной страницы, функцию javascript или что-то еще, когда рендеринг компонента меню должен правильно добавить id = "current" в список при его создании.

Ответ 5

Как создать защищенное свойство строки в классе кода главной страницы? Переопределить OnLoad:

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

Затем на вашей главной странице aspx:

<body id="<%= _bodyId %>">

Тогда вам не нужно возиться со своим CSS, особенно полезно, если CSS пришел из дизайнерского агентства.

Ответ 6

Вот как мы это сделали, используя JQuery, добавив класс css для изменения фона.

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

".nav" в ul.nav (в JQuery) - это класс css, применяемый к тегу UL.

:contains помогает проверять содержимое всего "a" тега/элемента в ul- > li- > a с заголовком ParentNode, который печатается в меню...

Если найден, применяется класс css с именем navselected к определенному тегу/элементу ul- > li- > a.

С уважением, Минеш Шах

Systems Plus Pvt. Ltd.

www.systems-plus.com

Ответ 7

Я бы использовал javascript для этого. В css измените ваш #current на класс (.current), а затем введите id для каждого из создаваемых вами списков ListItems. Затем, используя RegisterStartupScript, вызовите метод javascript, который получает соответствующий ListItem и присваивает ему стиль текущего. Используя Prototype, это будет выглядеть как $('MyPageLi'). ClassName = 'current'.