TIP/Trick: Use DataPager control with ListView and Custom Data Source

2010-07-21T01:35:43.96

Paging tabular data retrieved through a database query has been a long time need in transactional line of business applications. With time the ways of achieving this in ASP .NET have evolved into very easy solutions. On the previous version of the framework, .NET framework 3.5 (currently to the date they are now on 4.0) two server-side user controls where introduced, the ListView and the DataPager.

They idea behind the ListView control is to provide the developer with more control over the markup output while providing the data-bound experience of previous controls. The ListView control displays data based on user defined templates, which is extremely convenient for styling purposes. It also reduces to zero the garbage markup automatically generated by older controls like the GridView.

The DataPager, in the other hand, is product of the decoupling of the paging feature from the data-bound controls that implement the IPageableItemContainer interface. Providing more freedom when it comes to paging customization on regards of functionality and appearance.

Both controls complement each other in a marvelous way. The DataPager provides paging practically out of the box when using a data source control, which is what the documentation found almost everywhere encourages to use. BUT! The truth is that sometimes we use custom data sources because of a special scenario that dictates their use to get the data. In this scenario is were the use of the DataPager becomes a little bit more challenging, since the paging is once more a developer's responsibility rather than a delegated feature for the framework.

So how do we tackle this?

One approach is raising and handling the PagerCommand event found on the DataPager TemplatePagerField template and evaluating each command sent from the server-side controls placed there. This is extremely convenient if you want to implement a custom way of paging the data and navigating through it. You'll also have the responsibility of rendering the current page you're at, as well as all the other available navigation pages.

Another approach, and the one we'll describe with more depth, is a little bit more simple and similar to the default behavior of the DataPager when used with data source controls. For this we just need to raise the ListView's PagePropertiesChanging event and invoke the DataPager's SetPageProperties method. This is an obvious combination since the PagePropertiesChangingEventArgs provide us the arguments of the SetPageProperties method overload.

The code

I think we've done enough to describe what we are trying to achieve here, so let's see the code for this. Let's asume we have a ListView called lvProducts.

protected void lvProducts_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    var pager = (DataPager)lvProducts.FindControl("pager"); //pager is the name of our DataPager control

    pager.SetPageProperties(

      e.StartRowIndex, 

      e.MaximumRows, 

      false); //Set false because we are using a custom data source

    BindDataToListView(); //Here we just bind the data to our list view again and the new data page will be displayed
}

And that's it! Paging should work like a charm. Happy coding!

TIP/Trick: Enable/Disable ASP .NET Ajax TabContainer Tabs

2010-04-27T05:31:08.663

Space and content distribution is a very important part when designing a web site. That's why breaking content into multiple sections using a tabbed widget in order to save space is a commonly used technique in web design these days.

Today I'm going to address a common issue that arises when using a tab widget, which is enabling/disabling specific tabs. But first let's talk a little bit about the Ajax Control Toolkit. The Ajax Control Toolkit provides a palette of AJAX enabled controls, with the purpose of creating an "interactive web experience". If you work with ASP .NET, you MUST have heard about ASP .NET AJAX, previously known as ATLAS. You must also have seen and feel familiar with update panels and Microsoft's ASP .NET AJAX paradigm. Certainly the ASP .NET AJAX framework makes AJAX implementation trivial to anyone.

The tendency of throwing update panels everywhere in order to achieve partial post backs in your page it's a widely used approach among ASP .NET AJAX enabled sites. It's also a common practice to see how every server/client side control on a web page, get replaced with any equivalent found on the AJAX Toolkit provided by Microsoft. If you are using one of these "cutting edge" techniques my friend, let me tell you that you are killing your application performance. And that also, I'm NOT the first one to point this out. The ASP .NET AJAX framework and the AJAX Toolkit have been widely criticized over thousands of technical web blogs. Mainly because by providing a mechanism for "easy" AJAX implementation performance of your web application gets compromised.

Basically, performance get s affected because a lot of web resources get imported when using both the framework and the toolkit. Also the fact that in every "partial post back" you actually send the whole page making HTTP GET/POST actions more bloated when loading your page. You could use Mozilla Firefox's Firebug plugin to analyze your HTTP requests and the amount of data that gets sent back and forth to the server, or just google about the topic in order to extend your knowledge about this particular subject.

I encourage you guys to use other lightweight javascript frameworks that help you achieve DOM manipulation and asynchronous calls to the server in order to retrieve and send data like jQuery or Prototype.

Show me the code!

So I decided to do two examples instead of one. Besides doing it using the AJAX Control Toolkit. I also did it using jQuery, just to have two options. So here's the code.

AJAX Control Toolkit Tab Container

Here's the HTML:

<div style="width: 500px">
  <cc1:TabContainer ID="TabContainer1" runat="server">
      <cc1:TabPanel HeaderText="Tab 1" runat="server" ID="tpTab1">
          <ContentTemplate>
                Tab 1 Content!
          </ContentTemplate>
      </cc1:TabPanel>
      <cc1:TabPanel HeaderText="Tab 2" runat="server" ID="tpTab2">
          <ContentTemplate>
                Tab 2 Content!
          </ContentTemplate>
      </cc1:TabPanel>
  </cc1:TabContainer>
  <p>
      <input type="button" onclick="javascript:DisableEnableTab(false,0);" value="Disable Tab 1" />
  </p>         
</div>

And here's the javascript:

function DisableEnableTab(boolVal, tabIndex) {
      var tab = $find('<%=TabContainer1.ClientID%>');
      tab.get_tabs()[tabIndex].set_enabled(boolVal);
}

jQuery