ASP.NET: Définition du style d'un élément HTML par programmation

Question

Je crée un menu avec un contrôle Repeater lié à un 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" /> 

J'aimerais pouvoir définir le style du LI contenant en fonction des événements passés avec la souris et de l'élément de menu actuellement sélectionné. J'ai essayé via HtmlGenericControl, mais je reçois un message d'erreur indiquant qu'il est en lecture seule.

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)");
                }
            }
        }

Y a-t-il un moyen d'y parvenir?

Answer 1

La propriété de style est une collection. Faites ceci:

l_genericControl.Style.Add("css-name", "css-value")

Ou si vous utilisez des classes CSS, modifiez la propriété CssClass:

l_genericControl.CssClass = "on-nav";

Si vous essayez de basculer la classe CSS avec votre javascript, essayez quelque chose comme ceci (non testé):

l_genericControl.Attributes.Add("onmouseover", "this.className='on-nav';");
l_genericControl.Attributes.Add("onmouseout", "this.className='off-nav';");

Si vous souhaitez modifier le style avec votre javascript, cela pourrait fonctionner:

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';");

Answer 2

au niveau de base, vous pourriez faire:

l_genericControl.Attributes["class"] = "on-nav";

Answer 3

Le problème vient de cette partie:

l_genericControl.Style = "off-nav";

que vous pouvez corriger en appliquant un CssClass à la place

// += to prevent overwriting a class you would set in the markup
l_genericControl.CssClass += "off-nav";