C# - Как изменить атрибуты HTML-элементов

ProgramBox

C# — Как изменить атрибуты HTML-элементов

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#c# #html #asp.net

Вопрос:

Моя главная страница содержит список, как показано здесь. Однако я хотел бы добавить атрибут «class=active» в список, который в настоящее время активен, но я понятия не имею, как это сделать. Я знаю, что код входит в событие page_load страницы aspx, но понятия не имею, как получить доступ к li, мне нужно добавить атрибут. Пожалуйста, просвети меня. Большое спасибо.

 <div id="menu">
  <ul id="nav">
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
    <li id="screenshots"><a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>
    <li id="future"><a href="future.aspx" title="Future">Future</a></li>
    <li id="news"><a href="news.aspx" title="News">News</a></li>
    <li id="download"><a href="download.aspx" title="Download">Download</a></li>
    <li id="home"><a href="index.aspx" title="Home">Home</a></li>
    <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
  </ul>
</div>

Ответ №1:

Чтобы получить доступ к этим элементам управления со стороны сервера, вам необходимо сделать их runat=»сервер».

 <ul id="nav" runat="server">
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_right.jpg" /></li>               
  <li id="screenshots"><a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>
  <li id="future"><a href="future.aspx" title="Future">Future</a></li>
  <li id="news"><a href="news.aspx" title="News">News</a></li>
  <li id="download"><a href="download.aspx" title="Download">Download</a></li>
  <li id="home"><a href="index.aspx" title="Home">Home</a></li>
  <li class="forcePadding"><img src="css/site-style-images/menu_corner_left.jpg" /></li>
</ul>

в коде-за:

 foreach(Control ctrl in nav.controls)
{
   if(!ctrl is HtmlAnchor)
   {
      string url = ((HtmlAnchor)ctrl).Href;
      if(url == GetCurrentPage())  // <-- you'd need to write that
         ctrl.Parent.Attributes.Add("class", "active");
   }
}

Ответ №2:

Приведенный ниже код можно использовать для поиска именованного элемента управления в любом месте иерархии элементов управления:

 public static Control FindControlRecursive(Control rootControl, string id)
{
    if (rootControl != null)
    {
        if (rootControl.ID == id)
        {
            return rootControl;
        }

        for (int i = 0; i < rootControl.Controls.Count; i  )
        {
            Control child;

            if ((child = FindControlRecursive(rootControl.Controls[i], id)) != null)
            {
                return child;
            }
        }
    }

    return null;
}

Так что вы могли бы сделать что-то вроде:

 Control foundControl= FindControlRecursive(Page.Master, "theIdOfTheControlYouWantToFind");
((HtmlControl)foundControl).Attributes.Add("class", "active");

Забыл упомянуть ранее, что вам действительно нужен runat=»сервер» для любого элемента управления, который вы хотите найти таким образом =)

Ответ №3:

Добавьте runat=»сервер» в теги li на главной странице, затем добавьте это в соответствующее событие page_load, чтобы добавить «активный» класс в li на главной странице

HtmlGenericControl li = HtmlGenericControl)Страница.Мастер.FindControl(«скриншоты»); li.Атрибуты.Добавить(«класс», «активный»);

Ответ №4:

Вы могли бы зарегистрировать клиентский скрипт, подобный этому:

(установите идентификатор на идентификатор li, который вы хотите сделать активным)

 ClientScript.RegisterStartupScript(this.GetType(), "setActiveLI", "document.getElementById("" id "").setAttribute("class", "active");", true);

Это создает вызов JavaScript на странице внизу после того, как элементы уже были отрисованы.

Ответ №5:

Все части уже были приведены в предыдущих ответах, но чтобы собрать все воедино, вам нужно:

добавьте атрибут runat=»сервер» <ul> <li> в элементы и

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

вызовите метод из Page_Load страниц

В качестве альтернативы вы также можете добавить код в метод OnLoad(…) главной страницы, поэтому вам не нужно добавлять вызов метода в Page_Load на каждой странице.

Ответ №6:

Если бы они были runat=server, вы могли бы использовать свойство attributes.

Ответ №7:

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

Или вам нужно будет завернуть публичный доступ в кодовую строку.

Ответ №8:

Вы можете предоставить ли на главной странице для любых страниц содержимого, поместив их в свойства на главной странице:

 public GenericHtmlControl Li1
{
    get
    {
        return this.LiWhatever;
    }
}

Затем на странице содержимого:

 MasterPage2 asd = ((MasterPage2)Page.Master).Li1.Attributes.Add("class", "bla");

Если я правильно понял!

Ответ №9:

Я нашел ссылку, которая работает с использованием CSS и включает в себя только изменение атрибута класса тега body. Это означает, что нет Javascript и нет циклов for или чего-то еще.

 #navbar a:hover,
  .articles #navbar #articles a,
  .topics #navbar #topics a,
  .about #navbar #about a,
  .contact #navbar #contact a,
  .contribute #navbar #contribute a,
  .feed #navbar #feed a {
 background: url(/pix/navbarlinkbg.gif) top left repeat-x; color: #555;
}

....

<body class="articles" onload="">

<ul id="navbar">
  <li id="articles"><a href="/articles/" title="Articles">Articles</a></li>
  <li id="topics"><a href="/topics/" title="Topics">Topics</a></li>
  <li id="about"><a href="/about/" title="About">About</a></li>
  <li id="contact"><a href="/contact/" title="Contact">Contact</a></li>
  <li id="contribute"><a href="/contribute/" title="Contribute">Contribute</a></li>
  <li id="feed"><a href="/feed/" title="Feed">Feed</a></li>
</ul>

Подробнее читайте здесь
http://www.websiteoptimization.com/speed/tweak/current/

Ответ №10:

Попробуйте этот отличный пример для использования в будущем. я знаю, что эта тема старая, но для будущих запросов…

http://community.discountasp.net/showthread.php?p=33271

Ответ №11:

Спасибо за решение.

Мининизированный код.

Элемент управления главной страницей также можно найти на дочерней странице..

я имею в виду, что главная страница содержит html-контент

и на странице chilld можно найти html-конрол главной страницы вот так

 ((HtmlControl)this.Master.FindControl("dpohome1")).Attributes.Add("class", "on");

Ответ №12:

Простая логика и минимальный код, я обычно использую следующий код, особенно в динамическом меню. Надеюсь, это поможет.

Создайте код этого метода на главной странице кода

КОД, СТОЯЩИЙ ЗА (C#)

protected string SetCssClass(string page) { return Request.Url.AbsolutePath.ToLower().EndsWith(page.ToLower()) ? "active" : ""; }

В созданных вами пунктах списка меню вызовите этот метод, передав имя страницы следующим образом

HTML-СТРАНИЦА (встроенный код ASPX)

<li id="screenshots" class = "<%= SetCssClass("screenshots.aspx") %>"> <a href="screenshots.aspx" title="Screenshots">Screenshots</a></li>

<li id="future" class = "<%= SetCssClass("future.aspx") %>"> <a href="future.aspx" title="Future">Future</a></li>

и так далее.

С помощью этого метода каждый раз, когда вы добавляете страницу и ссылку, вам не нужно писать код на каждой странице. Просто когда вы добавляете ссылку на главную страницу, при каждом <li> вызове SetCssClass(pagename) метода вызывается класс настройки, и все готово. (вы можете переименовать метод в соответствии с вашими потребностями.

Вы можете использовать более длинные коды, если вам платят за строки кода bcoz, то это всего лишь одна строка кода. (лол). Просто шучу. Надеюсь, это поможет.

Примечание: Я игнорирую другие части html-кода, вы также можете включить их, это будет работать нормально.

Метки: C# — Как изменить атрибуты HTML-элементов