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

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

10 голосов
/ 09 октября 2008

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

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

Ответы [ 7 ]

13 голосов
/ 19 января 2009

Рассматривали ли вы использование файла Web.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 соответственно. Это техника, которую я использую на своем сайте, и она прекрасно работает.

10 голосов
/ 09 октября 2008

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

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; 
}
3 голосов
/ 10 октября 2008

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

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

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

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

А в КСС: 

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}
0 голосов
/ 05 сентября 2013

Вот как мы добились этого, используя 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, который печатается в Menu ...

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

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

Systems Plus Pvt. Ltd.

www.systems-plus.com

0 голосов
/ 22 февраля 2010

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

protected string _bodyId;

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

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

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

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

0 голосов
/ 09 октября 2008

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

0 голосов
/ 09 октября 2008

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...