ASP.NET: Definir o estilo de um elemento de programação HTML
-
19-08-2019 - |
Pergunta
Eu estou gerando um menu com um controle Repeater vinculado a um 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" />
Eu gostaria de ser capaz de definir o estilo da contendo LI baseado em eventos mouseover e item de menu selecionado. Eu tentei através do HtmlGenericControl, mas eu recebo um erro que é somente leitura.
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)");
}
}
}
Existe alguma maneira de conseguir isso?
Solução
A propriedade estilo é uma coleção. Faça o seguinte:
l_genericControl.Style.Add("css-name", "css-value")
Ou se você estiver usando classes CSS, altere a propriedade CssClass:
l_genericControl.CssClass = "on-nav";
Se você está tentando alternar a classe CSS com o javascript, tentar algo como isto (não testado):
l_genericControl.Attributes.Add("onmouseover", "this.className='on-nav';");
l_genericControl.Attributes.Add("onmouseout", "this.className='off-nav';");
Se você quer mudar o estilo com o seu JavaScript, este trabalho poderá:
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';");
Outras dicas
no nível básico, você poderia fazer:
l_genericControl.Attributes["class"] = "on-nav";
O problema é com esta parte:
l_genericControl.Style = "off-nav";
que você pode corrigir aplicando um CssClass vez
// += to prevent overwriting a class you would set in the markup
l_genericControl.CssClass += "off-nav";