In order to demonstrate the points I made in the previous post, I created a small program. This turned out to be a bit more than I anticpated, which seemed to merit more explanation than I had planned. The following screen shot is created by a ListView using the jQuery alternate row styling previosly mentioned.
ListView example

Here is the page code

The ListView is at lines 48 to 103. It has several interesting features.

  1. There is a single ItemTemplate (82-91) but notice that it has an alternating row style. This, of course, was the original point. This is achieved by applying the script function StyleTable() (111-114) from the Document ready script (110).
  2. If you simply place a ListView on the page, you will get “page flicker” when you edit and update an item. From a coding standpoint the simplest way to eliminate this is to place the ListView in an UpdatePanel (48-49, 106-107)
  3. With the UpdatePanel in place we now get nice flickerless updates — except the alternating row styling disappears. When you do a partial page update, you get partial application of styling and scripts. In this case, the Document ready script does not fire when the page does a partial update. This is where we call on the PageRequestManager.

    The PageRequestManager code is at lines 120-128 and provides client-side events for the update panel. In this example code we are only using the EndRequestHandler (122, 126-128) to fire the StyleTable() function that is executed initially by Document ready.

    This is the code for StyleTable:

    115 	function StyleTable() {
    116 		$("table tr:odd").addClass("odd");
    117 		$("table tr:even").addClass("even");
    119 	}

    And this is the PageRequestManager code:

    120 	var pgmgr = Sys.WebForms.PageRequestManager.getInstance();
    121 	pgmgr.add_beginRequest(BeginRequestHandler);
    122 	pgmgr.add_endRequest(EndRequestHandler);
    123 	function BeginRequestHandler(sender, args) {
    124 		var elem = args.get_postBackElement();
    125 	}
    126 	function EndRequestHandler(sender, args) {
    127 		StyleTable();
    128 	}

    Several items of interest here:

    1. You get an instance of the PageRequestManager using a factory method rather than a constructor.(120)
    2. The PageRequestManager has two events that need to be handled.(121-122) (Actually in this fairly simple example, only the endRequest event needs to be handled.) The BeginRequestHandler Identifies which request is in process (in this case there is only one) and the EndRequestHandler takes care of any cleanup needed – like reapplying styles.
Posted in .NET, jQuery | Comments Off on PageRequestManager


Until I figure out what I’m doing, all comments will be moderated. I think. (see opening clause)

Posted in Uncategorized | Comments Off on Comments

jQuery & Asp.NET Repeater Server Control

I’m probably the last person on earth to discover this, but it is definitely cool….

While the Gridview (and DataGrid) are powerful tools for displaying data, they carry a bit more heft than is needed frequently. Often you can acheive superior results with a Listview (or Repeater) with more fine-grained control and less overhead.

In this case I was using a Repeater inherited from previous versions and have not yet attempted a conversion to Listview (and may not ever). The Repeater control offers an alternate row template which could be used for a lot of things. But mostly it’s probably used, as we had in this case, to put in alternating row backgrounds. The problem is that you create an essentially duplicate row code just to change the styling.

Being at that stage in jQuery where if you’ve just bought a new hammer, every problem looks like a nail… It occurred to me that I had just seen a jQuery script for this pattern:

$("#myTable tr:even").addClass("alternaterowstyle");

You can even:

$("myTable tr:odd").addClass("rowstyle");
$("#myTable tr:even").addClass("alternaterowstyle");

So, in this case, the Repeater is rendering a table. All that’s needed is to apply the jQuery on document ready.

Listview should work essentially the same – haven’t tried it yet.

By having a single item template, you don’t wind up with accidental differences between rows. Or worse, unnoticed differences – because they never stay unnoticed, do they?

If you are running your control inside an UpdatePanel, it’s a bit trickier. But not much – next post.

Posted in .NET, jQuery | Comments Off on jQuery & Asp.NET Repeater Server Control