ASP.NET: установка стиля элемента HTML программно
-
19-08-2019 - |
Вопрос
Я создаю меню с элементом управления Repeater, привязанным к источнику XmlDataSource. Р>
<asp:Repeater ID="myRepeater" runat="server"
DataSourceID="myDataSource"
onitemdatabound="myRepeater_ItemDataBound"
onitemcreated="myRepeater_ItemCreated">
<HeaderTemplate>
<ul class="menu_list">
</HeaderTemplate>
<ItemTemplate>
<li id="liMenu" runat="server"><asp:HyperLink ID="hrefMenuItem" runat="server" Text='<%# XPath("@text")%>' NavigateUrl='<%# XPath("@href")%>'></asp:HyperLink></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:XmlDataSource runat="server" ID ="myDataSource" XPath="Menu/Items/*" EnableCaching="False" />
Я хотел бы иметь возможность установить стиль содержимого LI на основе событий наведения мыши и выбранного в данный момент пункта меню. Я пытался с помощью HtmlGenericControl, но я получаю сообщение об ошибке, что он только для чтения.
protected void myRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
HyperLink hrefCurrentMenuLink = e.Item.FindControl("hrefMenuItem") as HyperLink;
HtmlGenericControl l_genericControl = e.Item.FindControl("liMenu") as HtmlGenericControl;
if ((hrefCurrentMenuLink != null) && (l_genericControl != null))
{
string l_currentPage = GetCurrentWebPage();
if (String.Compare(Path.GetFileNameWithoutExtension(hrefCurrentMenuLink.NavigateUrl), l_currentPage, StringComparison.OrdinalIgnoreCase) == 0)
l_genericControl.Style = "on-nav";
else
l_genericControl.Style = "off-nav";
l_genericControl.Attributes.Add("onmouseover", "navOn(this)");
l_genericControl.Attributes.Add("onmouseout", "navOff(this)");
}
}
}
Есть ли способ сделать это?
Решение
Свойство style является коллекцией. Сделайте это:
l_genericControl.Style.Add("css-name", "css-value")
Или, если вы используете классы CSS, измените свойство CssClass:
l_genericControl.CssClass = "on-nav";
Если вы пытаетесь переключить класс CSS с помощью JavaScript, попробуйте что-то вроде этого (не проверено):
l_genericControl.Attributes.Add("onmouseover", "this.className='on-nav';");
l_genericControl.Attributes.Add("onmouseout", "this.className='off-nav';");
Если вы хотите изменить стиль с помощью JavaScript, это может сработать:
l_genericControl.Attributes.Add("onmouseover", "this.style.color='red'; this.style.backgroundColor='yellow';");
l_genericControl.Attributes.Add("onmouseout", "this.style.color='black'; this.style.backgroundColor='none';");
Другие советы
на базовом уровне вы можете сделать:
l_genericControl.Attributes["class"] = "on-nav";
Проблема с этой частью:
l_genericControl.Style = "off-nav";
который вы можете исправить, применив вместо этого CssClass
// += to prevent overwriting a class you would set in the markup
l_genericControl.CssClass += "off-nav";