Пользовательская навигация ASP.NET на главной странице

Question

Все,

Я пытаюсь выбрать лучший способ конвертировать мою текущую страницу asp.net в главную страницу.Эта проблема у меня есть с навигацией.У меня есть 3 страницы aspx, которые по сути являются HTML, но ничего не вспыхивает.Это:

• Домашняя страница
• Отчеты
• Администратор

На моих текущих страницах меню построено с использованием статического html следующим образом:

<div id="nav">
    <ul>            
        <li><a href="Default.aspx" class="tab-unselected" title="Home">Home</a></li>            
        <li><a href="reports.aspx" class="tab-unselected" title="Reports">Reports</a></li>
        <li><a href="administration.aspx" class="tab-selected" title="Admin">Admin</a>
        </li>
    </ul>
</div>

Класс для каждого класса li в настоящее время определяется в фактическом источнике HTML.Таким образом, в Default.aspx класс для li a href = "Default.aspx" ... будет указывать на выбранный класс вкладки в моем css, tab-selected.Другие классы для остальных библиотек будут не выбраны с помощью табуляции.

Опять же в reports.aspx класс для li a href = "reports.aspx" ... будет указывать на выбранный класс вкладки вмой css, выбранный вкладкой.Другие классы для остальных библиотек будут не выбраны.

Мой CSS прекрасно отображает меню, как описано выше.

Затем я подумал, что попробую перейти на мастер-страницы.Таким образом, я скопировал вышеупомянутое в главную страницу.Это выглядит нормально, но проблема в том, что навигация находится на главной странице, как я могу изменить выделение текущей страницы в навигации.

Тогда я подумал, что попробую использовать элемент управления и поставить вышеупомянутую навигациюпредметы в нем.Когда я запускал навигацию, она отображалась как таблица и полностью сломала мой CSS.Я думал, что таблицы были плохими с точки зрения размещения таких вещей, как меню, и вы должны использовать неупорядоченные списки?

Вопрос в том, как лучше всего реализовать мою навигацию с ASP.NET?

Спасибо

Андез

Answer 1

Если вы хотите использовать свой HTML-список для отображения навигации, но стилизовать элементы списка с помощью CSS, то вы можете использовать эту технику.

Используйте встроенные кодовые блоки, такие как (при условии VB)

<% If Page.Request.Path.Contains("Default.aspx") Then %>
  <li class="selected">
<% Else %>
  <li>
<%End If%>
  <a href="Default.aspx" class="tab-unselected" title="Home">Home</a></li>

Вам потребуется оператор IF для каждой страницы, и код будет выглядеть немного неаккуратно. Я не говорю, что это лучший способ, но в основном, если вы используете один кусок html для вашего меню (но на главной странице или в элементе управления), вам нужно будет где-то использовать некоторый логический код, чтобы html отличался на каждом стр. Вы можете сделать это и в коде, но добавление некоторых встроенных блоков кода, возможно, самый простой / быстрый способ. Вы можете стать более прикольным и написать вспомогательный класс, который обернет все это в операторе select и просто вызовет

MenuHelper.RenderLink("Default.aspx")

но это потребует больше работы - напишите мне, если хотите попробовать этот подход.

Что касается того, почему ваши столы сломались, я не знаю. Мое мнение было бы, если вы хотите использовать таблицы, и ваш сайт / пользователи не пострадают от этого, тогда продолжайте - но если вам нужно рассмотреть мобильные устройства и программы для чтения с экрана и т. Д., То я понимаю, что с таблицами будет сложнее ориентироваться. Это действительно зависит от вас!

Приветствия

Answer 2

Может быть, решение, которое я пытаюсь предложить, не оптимизировано, а работает для меня.

В статическом HTML-меню на главной странице есть все теги "li" с идентификатором в качестве имени страницы.

<ul>
   <li ID="home"><a href="home.aspx">Home</li>
   <li ID="About"><a href="about.aspx">About</li>
<ul>

Затем на главной странице используйте JQuery, чтобы получить имя страницы. Нечто вроде

$(function () {
     var filePath = window.location.pathname;
     var fileName = filePath.substr(filePath.lastIndexOf("/") + 1);
     var name = fileName.split('.');
     var page_name = name[0];
     $('#' + page_name).addClass("active"); // Add the CSS class which sets the active Menu
     });

В CSS сделать что-то вроде

.active { фон = # 000; Цвет = # FFF; }

Надеюсь, это поможет ..

Answer 3

Наткнулся на следующую ссылку:

http://forums.asp.net/t/1626206.aspx

Версия 4.0 .NET Framework имеет некоторые приятные изменения в asp: Элемент управления меню.Одним из них является рендеринг в виде списка.Ура!Итак, на данный момент я перешел с VS2008 на VS2010 Express.

После небольшой суеты я теперь использую карту сайта с меню asp: на главной странице следующим образом:

Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="" title=""  description="">
        <siteMapNode url="Default.aspx" title="Home"  description="" />
        <siteMapNode url="reports.aspx" title="Reports"  description="" />
        <siteMapNode url="administration.aspx" title="Administration"  description="" />
        <siteMapNode url="ChildPage.aspx" title="Master Template"  description="" />
    </siteMapNode>
</siteMap>

Site.master

...
<head runat="server">
    <link rel="stylesheet" type="text/css" href="styles/mystyle.css" />
</head>
<body>
    <form id="Form1" runat="server">
    <div id="header">
        <div id="nav">
            <asp:SiteMapDataSource id="nav1" runat="server" /> 
            <asp:Menu ID="main-menu" runat="server" DataSourceID="nav1" 
                Orientation="Horizontal" StaticSelectedStyle-CssClass="tab-selected" 
                CssClass="nav" 
                StaticDisplayLevels="2" IncludeStyleBlock="False" RenderingMode="List"     >                
            </asp:Menu>
        </div>
    </div>    
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </form>
</body>

С картой сайта связано то, что вам необходим 1 верхний уровеньsiteMapNode который я оставляю как пустой.StaticDisplayLevels имеет значение 2 в меню asp:, поэтому список отображается следующим образом:

<ul class="level1">
    <li><a></a></li>
    <li><a class="level2 selected" href="/Web%20Portal/Default.aspx">Home</a></li>
    <li><a class="level2" href="/Web%20Portal/reports.aspx">Reports</a></li>
    <li><a class="level2" href="/Web%20Portal/administration.aspx">Administration</a></li>
    <li><a class="level2" href="/Web%20Portal/ChildPage.aspx">Master Template</a></li>
</ul>

Как видно, он помещает siteMapNode верхнего уровня в качестве первого элемента в списке.Который я не хочу.Чтобы обойти это, я скрываю элемент, используя следующий CSS.

#nav li:first-child a
{
    display: none;
}

Теперь все выглядит красиво и очень похоже на статические html-страницы.

Andez