Программное решение для изменения идентификатора навигации для выделения текущей страницы ASP.NET
Я пишу веб-сайт с Visual Studio 2008 и ASP.NET 3.5. У меня есть главная страница, настроенная для упрощения макета и сохранения страниц содержимого для содержимого, а не для содержимого и макета.
Навигация - это список, css'd, поэтому он выглядит как панель. Чтобы выделить страницу на панели, элемент списка должен иметь вид <li id = "current">. Я не хочу использовать <asp:ContentPlaceHolder>, если я могу этого избежать. Есть ли какой-то код, который я могу добавить на каждую из моих страниц (или только на главную?), Чтобы выполнить это, или я застрял с использованием <asp:ContentPlaceHolder>?
Ответы 7
Использование или неиспользование ContentPlaceHolder не повлияет на то, для какого элемента установлен id = "current".
Вам нужно будет посмотреть на какой-то метод, будь то в вашем коде для главной страницы, функция javascript или что-то еще при рендеринге компонента меню, чтобы правильно добавить id = "current" в список при его создании.
Для этого я бы использовал javascript. В css измените свой #current на класс (.current), а затем укажите идентификаторы для каждого из ваших ListItems, которые вы создаете. Затем с помощью RegisterStartupScript вызовите метод javascript, который получает соответствующий ListItem и назначает ему стиль current. Используя Prototype, это будет выглядеть как $ ('MyPageLi'). ClassName = 'current'.
Нет, дайте им каждый уникальный ID и общий класс. Затем вы можете использовать javascript, чтобы получить все элементы с этим классом и убедиться, что ни один из них не имеет текущего класса, затем получить единственный элемент с конкретным идентификатором для текущей страницы и добавить к нему текущий класс.
Добавьте свойство на главную страницу под названием Раздел страницы.
public string PageSection { get; set; }
Добавьте директиву MasterType page в верхнюю часть ваших содержательных страниц.
<%@ MasterType VirtualPath = "~/foo.master" %>
В коде страницы содержимого установите свойство PageSection главной страницы
Master.PageSection = "home";
На своей главной странице сделайте тег тела тегом сервера.
<body ID = "bodyTag" runat = "server">
В исходном коде главной страницы используйте это свойство, чтобы установить класс в теге body.
bodyTag.Attributes.Add("class", this.PageSection);
Дайте каждому из ваших элементов навигации уникальный атрибут ID.
В вашем css измените отображение элементов навигации на основе текущего класса страницы
.home #homeNavItem,
.contact #contactNavItem
{
color: #f00;
}
Я использую VB.NET в качестве бэкэнда, а не C#, и, честно говоря, я мало знаю о C#. при создании свойства что мне нужно поместить в get ... end get // set ... end set, чтобы оно работало правильно?
о, у меня уже есть CSS. все, что нужно изменить, чтобы сделать ссылку выбранной, - это наличие id = "current" в теге элемента списка.
Затем в коде главной страницы добавьте атрибут «текущий» в элемент списка на основе раздела страницы.
Для свойства VB вам просто нужно простое строковое свойство. Я не знаю синтаксиса под рукой. Синтаксис C#, который я использовал, - это новые автоматические свойства C# 3.0.
Я, должно быть, делаю что-то не так, я не могу заставить свойство отображаться на моих страницах с контентом. Master.PageSection не работает, как и Me.PageSection. Свойство объявлено как «Public Shared Property PageSection () As String».
Хорошо, сделал это, но он все еще не отображается. Я добавил виртуальный путь MasterPage, но все еще без кубиков. Очень странный.
напишите мне на johnsheehan в gmail, и я посмотрю, смогу ли я вам больше помочь
Быстрый вопрос: я пытаюсь использовать это на сайте ASP.NET MVC. Как добавить свойство на главную страницу? У меня нет заданного кода главной страницы - весь другой код главной страницы встроен в блоки <% %>.
Это не сработает для сайта MVC. Для MVC просто поместите раздел страницы в ViewData и получите к нему доступ через <% = ViewData ["PageSection"]%> от мастера.
Это лучшее семантическое соответствие и, вероятно, более простая переменная для установки, чтобы навигация использовала одни и те же классы или идентификаторы повсюду и изменяла только идентификатор элемента тела для соответствия:
<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);}
Вы рассматривали возможность использования файла 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 соответственно. Это метод, который я использую на своем сайте, и он отлично работает.
По моему скромному мнению, это лучший путь.
Это сработало для меня - одна небольшая проблема, мне пришлось добавить проверку SiteMap.CurrentNode == null, поскольку не все страницы, которые у меня были, находятся в карте сайта. Тем не менее, это кажется самым чистым вариантом!
Как насчет создания защищенного строкового свойства в классе кода главной страницы? Переопределить 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, который печатается в Menu ...
Если он найден, применяет класс css с именем navselected к конкретному тегу / элементу ul-> li->.
С уважением, Минеш Шах
Systems Plus Pvt. ООО
www.systems-plus.com
так что в основном каждый элемент имеет уникальные классы (я полагаю, я мог бы назвать их, например,
<li class = "nav_faq">), а затем, когда я переходил на другую страницу, вызываю javascript, чтобы изменить "nav_faq" на текущий?