Add CSS Class through a Repeater

问题:

I have a repeater which dynamically generate tab links using Sitecore (sc:Link) like this:

<asp:Repeater ID="rptTab" runat="server" OnItemDataBound="rptTab_ItemBound">
            <ItemTemplate>
                <li id= "liTabTest" runat = "server" class="tab-label">
                    <asp:HyperLink onclick = "javascript: TabClick(this)" runat="server" id="aLink">
                        <sc:Link ID="hlTabLink" Field="scTabLink" runat="server" ></sc:Link>
                    </asp:HyperLink>
                </li>
            </ItemTemplate>
       </asp:Repeater>

I manipulate the CSS via JS:

var loadURL;
$(document).ready(function () {
    init();
});

function init() {
     $("ul#Tab-labels li:first").addClass("TabbedPanelsTabSelected");
  };

  function TabClick(obj) {
      $("ul#Tab-labels li").removeClass("TabbedPanelsTabSelected");
      $(obj).addClass("TabbedPanelsTabSelected");

 };

Unfortunately, this is not working because each tab is a separate .ASPX page, so the page is getting rendered again and that is why Init() in JS is getting called and CSS is getting executed to the first item everytime.

This is my code behind:

        protected void rptTab_ItemBound(Object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            Item i = e.Item.DataItem as Item;
            Link hlTabLink = e.Item.FindControl("hlTabLink") as Link;
            hlTabLink.DataSource = i.Paths.FullPath;
            hlTabLink.Field = "Title";
            HyperLink aLink = e.Item.FindControl("aLink") as HyperLink;
            aLink.NavigateUrl = Sitecore.Links.LinkManager.GetItemUrl(i);
        }
    }

I tried adding CSS through code-behind but it didnt work because I cannot get the index of the tab (which tab is getting selected). Any solution will be appreciated! Thanks!

回答1:

Don't run javascript for a task that is better (and easier) accomplished in code-behind. Just set the active class for the repeater item where Sitecore.Context.Item matches the name of the tab. Pseudo code inside ItemDataBound:

if(i == Sitecore.Context.Item)
{
    HtmlGenericControl li = e.Item.FindControl("liTabTest");
    li.Attributes.Add("class","TabPanelTabbedSelected");
}

Not sure if HtmlGenericControl is correct here, or if it has a CssClass property, but I hope you get the idea. If there is no direct representation for li on the server side, you can also bind a string literal or use a Literal control.

回答2:

The answer to my question is: The repeater is like an array. So I can get the 1st and Last element of a repeater like this:

string currClass =  hc.Attributes["class"].ToString();
string count = e.Item.Controls.Count.ToString();
        if (e.Item.ItemIndex == 0)
                    {
                        currClass += " TabbedPanelsTabSelected";
                    }
     else if (e.Item.ItemIndex.ToString() == count)
                    {
                        currClass += " last";
                    }

In this way I can add a css to my first element and the last element through Repeater.