jQuery with ASP.NET

As a ASP.NET developer I can imagine that you are using ASP.NET Repeater very often. It’s certainly true in my case. Repeater is probably the most useful control available in entire ASP.NET. It is great to output lists with custom template.

Here is a very simple example showing how to display list of strings as a HTML list. In code behind file I have to simply bind data to the repeater:

var list = new List() { "first point", "second point", "third point", "fourth point", "fifth point", "sixth point" };

rptList.DataSource = list;
rptList.DataBind();

And Repeater is defined in a following way:

<asp:Repeater ID="rptList" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><%# Container.DataItem %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

ASP.NET Repeater and dealing with CSS styles

To that point everything works great. However what was always problematic with Repeaters is manipulation with CSS styles. Quite typically there are requirements to set some custom class on a first and last element. Such requirements enforces changes in my clean code into something like this:

1. First let me update Repeater template:

<asp:Repeater ID="rptMagicList" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <asp:Literal ID="litElement" runat="server" />
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

2. Introduction of ASP.NET Literal means that binding will be done in code behind files:

private int elementsCount = 0;

protected void Page_Load(object sender, EventArgs e)
{
    var list = new List() { "first point", "second point", "third point", "fourth point", "fifth point", "sixth point" };

    // this is needed to figure out which element is the last one
    elementsCount = list.Count; 

    rptMagicList.ItemDataBound += rptMagicList_ItemDataBound;
    rptMagicList.DataSource = list;
    rptMagicList.DataBind();
}

void rptMagicList_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var currentElement = e.Item.DataItem as String;
        var litElement = e.Item.FindControl("litElement") as Literal;

        var cssClassName = String.Empty;
        if (e.Item.ItemIndex == 0) cssClassName = "first";
        if (e.Item.ItemIndex == elementsCount - 1) cssClassName = "last";

        litElement.Text = string.Format("<li class='{0}'>{1}</li>",cssClassName, currentElement);
    }
}

Of course this approach works. It’s also true that from developer to developer solution for this task may vary slightly. But I think you will agree that by adding one simple requirement we had to add lots of lines of monkey code. Let’s face it … this is not a rocket science, this code is trivial and after updating a few repeaters like this … you are sick of it.

So is there a better approach? I think there is – use strong side of ASP.NET Repeater to output list and strong side of jQuery to deal with custom CSS styles!

How to empower ASP.NET Repeater with jQuery

If you use Repeater + jQuery approach then there is no need to change ASP.NET code from initial example. All you have to do is to add JavaScript file with jQuery code:

$(document).ready(function () {
    $("ul.magicList > li:first").addClass("first");
    $("ul.magicList > li:last").addClass("last");
});

If you are new to jQuery and not sure what this code is doing, check my older posts. Everything is explained there in a simple way:

• How To Use Basic jQuery Filters With HTML List
• How To Use Basic jQuery Filters With HTML List part 2

So to sum up … what are the benefits of this approach:

• Less code – code which you write is an absolute minimum, no monkey code
• Flexibility – jQuery has a lot to offer, ASP.NET has also a lot to offer — use strong sides of both technologies to get thinks done
• Lack of hardcoded CSS classes in code behind files – this is also important, this way you don’t need a developer to change some purely UI related issues.
• Part of HTML transformation is moved from server-side to client-side — if your servers have less work with one request, they can handle more requests
• Richer UI – there are tones of jQuery plugins which you can use to improve user experience.