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

Question

Je génère un menu avec un contrôle Repeater lié à un XmlDataSource. Je voudrais être en mesure de définir le style du LI contenant en fonction des événements mouseover et l'élément de menu actuellement sélectionné. J'ai essayé via le HtmlGenericControl, mais je reçois une erreur 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 at-il un moyen d'accomplir cela?

Answer 1

La propriété style est une collection. Pour ce faire:

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

Ou si vous utilisez des classes CSS, puis 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 ça (non testé):

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

Si vous voulez changer 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 pouvez faire:

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

Answer 3

Le problème est avec 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";