ASP.NET ListView control and LinqDataSource - Display data without a line of code

The new ASP.NET ListView control is a powerfull control that encapsulates the best features from ASP.NET 2.0 data controls. It has flexibility of Repeater, easy binding like GridView, improved rendering capability and much more. When used with LinqDataSource it becomes much easier! This article will show you how to create reports without writing a line of code.

The result we want to get is shown on the image below.

 

To do that you have to follow a few simple steps.

Step 1 - Add LINQ to SQL class and create your model

You have to do this if you wish to access your data using LINQ. If you are not sure how to do this, read one of my previous posts that describes LINQ to SQL.

Step 2 - Add LinqDataSource to your page

Simply drag and drop the control from the toolbox and set the control to point to your Context class. Property ContextTypeName should point to your Context class. It is important to remember that you have to provide full type name, not just the class name. Property TableName should point to the table you wish to display.

<asp:LinqDataSource ID="LinqDataSource1" runat="server"
   
ContextTypeName="ExploringListView.CountriesDataContext"
   
TableName="Countries">
</asp:LinqDataSource>

Step 3 - Add a ListView control

After adding ListView control to the page, you'll have to bind it to the LinqDataSource you previously added. In the sample in this article we are using a simple database with two tables: Region and Country. Each country belongs to a region and have its Name, Symbol and number of Internet Users. The complete code, including CSS Style Sheets is available for download in the attachment of the article.

<asp:ListView ID="ListView1" runat="server"
   
ItemPlaceholderID="itemPlaceHolder" DataSourceID="LinqDataSource1">

Next, you will have to define the control layout and different templates. ListView control has a set of templates just like controls in ASP.NET 2.0. But it also has a LayoutTemplate that defines the entire control layout. ItemPlaceHolderID property in the ListView definition points to the control that will be a main container for all items that will be displayed. In our sample, it is <div> element with itemPlaceHolder ID. This means that each record will be rendered inside this <div> element.

The other controls I added in the LayoutTemplate are controls that will define the report header.

<LayoutTemplate>
   
<div class="HeaderContainer">
       
<div class="ItemContainerID"></div>
       
<div class="ItemContainerName">Country</div>
        
<div class="ItemContainerSymbol">Sym</div>
       
<div class="ItemContainerUsers">Internet users</div>
   
</div>

   
<div id="itemPlaceHolder" runat="server"></div>
</LayoutTemplate>

Next, define templates that will show the items. You will have to define ItemTemplate and (optionally) AlternatingItemTemplate. Basically, the logic isn't changed from ASP.NET 2.0.

<ItemTemplate>
    <div class="ItemContainer Item">
        <div class="ItemContainerID">
            <
%#Eval("CountryID") %>
        </div>
        <div class="ItemContainerName">
            <%#Eval("CountryName") %>
        </div>
        <div class="ItemContainerSymbol">
            <%#Eval("Symbol") %>
        </div>
        <div class="ItemContainerUsers">
            <%#Eval("InternetUsers") %>
        </div>
    </div>
</ItemTemplate>
<AlternatingItemTemplate>
    <div class="ItemContainer AlternatingItem">
        <div class="ItemContainerID">
            <%#Eval("CountryID") %>
        </div>
        <div class="ItemContainerName">
            <%#Eval("CountryName") %>
        </div>
        <
div class="ItemContainerSymbol">
            <%#Eval("Symbol") %>
        </div>
        <div class="ItemContainerUsers">
            <%#Eval("InternetUsers") %>
        <
/div>
    </div>
</AlternatingItemTemplate>

What has been changed is a way of rendering list when query returns no data. You have now EmptyDataTemplate to take care in this case.

<EmptyDataTemplate>
   
<h1>No data to display</h1>
</EmptyDataTemplate>

You can also define ItemSeparatorTemplate. In this sample it is needed, because it has to break floating divs that display items.

<ItemSeparatorTemplate>
    <
div class="Separator"></div>
</ItemSeparatorTemplate>

To make it more clear I separated the rendered control into main elements which are shown on the image below.

Step 4 - Adding Paging functionality 

Paging ListView control is diiferent that paging in ASP.NET 2.0. There is a new DataPager control that takes care of paging. You add DataPager in the LayoutTemplate. If you place it below ItemPlaceHolder control pager will be rendered at the bottom of the list, and vice versa. You can just add a pager and set the PageControlID to a name of your ListView and it will work. But we are going to change the way DataPager renders the data. First, we'll set the PageSize to 10. Then, we'll set the DataPager to render page numbers, total five of them, and Next/Prev buttons to show Next/Prev five pages. We do that by definig Fields collection, as code below shows.

<asp:DataPager ID="DataPager1" runat="server"
   
PagedControlID="ListView1" PageSize="10">
    <Fields>
       
<asp:NumericPagerField 
        RenderNonBreakingSpacesBetweenControls="true" 
        CurrentPageLabelCssClass="CurrentPageButton"
        NextPageText="Next 5" 
        NextPreviousButtonCssClass="NextPrevPageButton" 
        NumericButtonCssClass="PageButton"
        PreviousPageText="Prev 5" />
   
</Fields>
</asp:DataPager>

That is all you need to enable paging. No code reqired.

Step 5 - Adding Sorting functionality

Adding sorting functionality is also very simple. We do that by adding LinkButtons in the header and setting their CommandName properties to "Sort" and CommandArgument properties to the column names. The LayoutTemplate will looke like the code below.

<LayoutTemplate>
   
<div class
="HeaderContainer">
       
<div class="ItemContainerID"></div
>
        <div class="ItemContainerName">
           
<asp:LinkButton ID="lbtCountry" runat="server" 
                CssClass="HeaderLink" CommandName="Sort"
               
CommandArgument="CountryName">Country</asp:LinkButton>
        
</div>
       
<div class="ItemContainerSymbol">
           
<asp:LinkButton ID="LinkButton1" runat="server"
               
CssClass="HeaderLink" CommandName="Sort"
               
CommandArgument="Symbol">Sym</asp:LinkButton>
        
</div>
        
<div class="ItemContainerUsers">
           
<asp:LinkButton ID="LinkButton2" runat="server" 
               
CssClass="HeaderLink" CommandName="Sort"
               
CommandArgument="InternetUsers">Internet users</asp:LinkButton>
       
</div>

   
</div>

   
<div id="itemPlaceHolder" runat="server"></div>
</LayoutTemplate>

And that's all you'll have to do. Items will be sorted automatically. 

Summary

You saw how to perform simple and quick databinding using ListView and LinqDataSource. However, you can do more great things with ListView. Find out more in this articles:

You can also insert, update and delete records directly from a ListView, but this is out of scope of this article. If you are interested in this, I recommend next articles:

Attachment: ListView.zip
Published Wednesday, February 6, 2008 9:50 PM by janko
Filed under: ,
Powered by Community Server (Commercial Edition), by Telligent Systems