Question

I’m generating a menu with a Repeater control bound to an 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' />  

I’d like to be able to set the style of the containing LI based on mouseover events and currently selected menu item. I tried via the HtmlGenericControl, but I receive an error that it’s readonly.

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

Is there any way to accomplish this?

Answer 1

The style property is a collection. Do this:

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

Or if you are using CSS classes, then change the CssClass property:

l_genericControl.CssClass = 'on-nav'; 

If you’re trying to toggle the CSS class with your javascript, try something like this (untested):

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

If you want to change the style with your javascript, this might work:

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