Выделение строки меню в веб-приложении ASP.NET - PullRequest
Новая
       8

Выделение строки меню в веб-приложении ASP.NET

0 голосов
/ 01 апреля 2011

У меня есть Visual Studio 2010, и когда я добавляю НОВЫЙ проект, VS дает мне темы CSS и UI по умолчанию.У меня есть 6 страниц ASPX.Теперь, когда пользователь заходит на какую-то конкретную страницу, я хочу, чтобы строка меню этой страницы выделялась, чтобы пользователь знал, какая это страница.

У меня есть страница с именем: CommSetup.aspx.В page_load я написал этот код:

И на главной странице я изменил это:

В коде позади: 

protected void Page_Load(object sender, EventArgs e)
    {
        foreach (MenuItem item in NavigationMenu.Items)
        {
            var navigateUrlParams = item.NavigateUrl.Split('/');
            if (Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
            {
                item.Selected = true;
            }
        }
    }

Разметка: 

 <body runat ="server" clientidmode ="Static" id = "MasterBody">
    <form runat="server">......
<asp:Menu ID="NavigationMenu" runat="server"  StaticSelectedStyle-CssClass ="Selected"      CssClass="menu" .....

Это то, что я добавил в Site.css: 

div.menu ul li a.Selected
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

Ответы [ 3 ]

3 голосов
/ 01 апреля 2011

Вот пример выполнения именно того, что вы просите с помощью CSS:

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

Этого можно добиться, используя статическое именование идентификаторов в своих элементах управления (вместо того, чтобы ASP.NET присваивал значение идентификатора каждому элементу управления).

EDIT: Чтобы это работало с главной страницей, измените тег <body> на главной странице на: 

<body runat="server" clientidmode="Static" id="MasterBody">

Затем в Page_Load каждой страницы вы можете перезаписать идентификатор для каждой страницы (главная страница в моем примере имеет тип SiteMaster): 

protected void Page_Load(object sender, EventArgs e)
{
    Control c = Page.Master.FindControl("MasterBody");
    if (c != null)
    {
        c.ID = "Page1";
    }
}

Обновление (2):

Я попытался запустить пример Фарзина, но он, похоже, не сработал, поэтому вот что я смог проверить, сработало ли для меня (вам не понадобится Page_Load с того момента на ваших страницах контента):

Site.Master 

<asp:Menu ID="NavigationMenu" ...>
    <StaticSelectedStyle CssClass="selected" />
    ...
</asp:Menu>

Site.master.cs 

protected void Page_Load(object sender, EventArgs e)
{
    foreach (MenuItem item in NavigationMenu.Items)
    {
        item.Selected = Page.ResolveUrl(item.NavigateUrl).ToLowerInvariant() == Request.Path.ToLowerInvariant();
    }
}

Стили / site.css 

div.menu ul li a.selected
{
    /* put your style definition here */
}
1 голос
/ 01 апреля 2011

Вы должны проанализировать текущий URL на главной странице (код сзади) и назначить другой класс CSS для пункта меню, который принадлежит текущему URL.

        foreach (MenuItem item in NavigationMenu.Items)
        {
            var navigateUrlParams = item.NavigateUrl.Split('/');
            if(Request.Url.AbsoluteUri.IndexOf(navigateUrlParams[navigateUrlParams.Length - 1]) != -1)
            {
                item.Selected = true;
            }
        }

просто поместите этот код в событие Form_Load вашей главной страницы (код позади)

0 голосов
/ 01 апреля 2011

Вы можете использовать функцию навигации по сайту ASP.NET. Скотт Митчелл выложил одну из окончательных статей об этом здесь .

...