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

StackOverflow https://stackoverflow.com/questions/188124

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Добавьте свойство на свою главную страницу под названием 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; 
}

Другие советы

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

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

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

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

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

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

protected string _bodyId;

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

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

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

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

Вот как мы добились этого с помощью 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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top