CODEDIGEST
Home » Articles
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Choosing the Right DataBound Controls in ASP.Net

By Satheesh Babu
Posted On Apr 30,2009
Article Rating:
Average Rating: 5
No of Ratings: 1
No of Comments: 5
Category: ASP.Net
Print this article.

Choosing the Right DataBound Controls in ASP.Net

 

There are various databound controls available in ASP.Net to display data. For example: GridView, DataList, Repeater, ListView, etc. Whenever we get a requirement to display data, there is always a confusion to choose the right databound control that can satisfy our needs. This article will help you to understand all these controls and their advantage in a particular scenario which can help us to choose the right control that can fit our needs.

 

GridView control

DataGrid control in ASP.Net 1.x is replaced by this control in ASP.Net 2.0 release and it is one of the most widely used controls. Gridview control can be used in those scenarios where we need to display data in tabular format.  Refer the below figure,

 

Using this control is very easy when compared to other databound controls to display data. Just assigning the DataSource property to a DataTable and calling DataBind() method will render the data. The main disadvantage of GridView control is, it does not have the flexibility to display data in any other format except table.

 

Gridview control will actually render the data in <Table> tag. Each column will be rendered as separate TD which makes it not possible to display data in any other format. Not to mention only its disadvantages, it is the only databound control which has inbuilt edit, update, delete, sort, paging data functionality. We can enable these functionalities by setting the properties of GridView without even writing a single line of code.

 

How to use GridView control?

As I said earlier, just assigning the DataSource property to a DataTable object and calling DataBind() method will render the data. Else, we can assign the DataSourceID property to the datasource id will display the data.

 

We can also specify the columns ourselves using GridView control where we can provide custom styles to the GridView control like the above figure. Gridview control has number of inbuilt column types that includes the column types from DataGrid control and additional new column types like Button field, Checkbox field, Hyperlink field, Image field which can be used. Set the AutoGenerateColumns property to false when you are defining the columns yourself. Refer the below code,

 

<asp:GridView ID="gvArticles" runat="server" BackColor="#DEBA84" EnableViewState="false" BorderColor="#DEBA84"

            BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" AutoGenerateColumns="False" DataKeyNames="ArticleID" DataSourceID="SqlDataSource1">

            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />

            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />

            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />

            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />

            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />

            <Columns>

                <asp:BoundField DataField="ArticleID" HeaderText="ArticleID" InsertVisible="False"

                 ReadOnly="True" SortExpression="ArticleID" />

                 <asp:HyperLinkField HeaderText="Article" DataTextField="Title" DataNavigateUrlFields="URL" />              

                <asp:BoundField DataField="Category" HeaderText="Category" SortExpression="Category" />

                <asp:BoundField DataField="Author" HeaderText="Author" SortExpression="Author" />              

                <asp:BoundField DataField="Submittedon" HeaderText="Submittedon" SortExpression="Submittedon" />

            </Columns>

        </asp:GridView>

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

            SelectCommand="SELECT * FROM [Articles]"></asp:SqlDataSource>

 

I have used SqlDataSource control to bind the GridView in the above code.

Using this control to just display data is really heavy because it loads the viewstate with state informations to provide the inbuilt functionalities like sort, paging, etc. Disable the viewstate in this case if you are not using any of the inbuilt functionalities to improve the performance.

 

Read the GridView articles posted on CodeDigest here,

Custom GridView Paging with ObjectDataSource Control with ASP.Net 2.0

Building Sharepoint List Style GridView with Ajax Control Toolkit

How to format DateTime in GridView BoundColumn and TemplateColumn?

GridView with CheckBox – Select All and Highlight Selected Row

GridView with RadioButton – Select One at a Time

GridView with Thumbnail Images – Part 3

GridView with Thumbnail Images – Part 2

GridView with Thumbnail Images – Part 1

Useful GridView Tips

GridView with Image

 

DataList Control

DataList is one another databound control that can be used to display data. Displaying data with DataList control is not as easy as GridView control. Apart from specifying the datasource and calling DataBind() method, we need to specify the data items display using ItemTemplate and DataBinding expressions(Eval and Bind). Unlike GridView, providing edit, delete, sort and paging functionalities with this control involves a bit of coding effort and not easy as GridView control.

This control is bit flexible enough to display data in various formats, most importantly in flow and tiled format. DataList control gives the flexibility to the developers to decide how to display the rows of database information as opposed to GridView control (In GridView, all the columns are displayed in TD). Refer the below figure,

    <asp:DataList ID="dlArtilces" BorderStyle="Solid" DataSourceID="SqlDataSource1" BorderColor="#626e6e" BorderWidth="1px" runat="server">

              <HeaderTemplate>

              <div>

           <div style="Text-align:center;">

           <b>Recent Articles</b></div>

           </div>

              </HeaderTemplate>          

         <ItemTemplate>

          <div class="Post">

                    <div class="PostTitle"><asp:HyperLink ID="TitleLink" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("URL") %>'/></div>

                    <div class="PostSubtitle"><asp:Label ID="SubtitleLabel" runat="server" Text='<%# Eval("Title") %>' /></div>

                    <div class="PostInfo">

                        Posted on <asp:Label ID="DatePostedLabel" runat="server" Text='<%# Eval("Submittedon", "{0:d} @ {0:t}") %>' />

                        By  <asp:Label ID="lblAuthor" runat="server" Text='<%# Eval("Author") %>' /></a>

                        in <%# Eval("Category") %>

                    </div>

           </div>

           </ItemTemplate>

           <FooterTemplate>

           <div>

           <div>         

           <a href="Articles.aspx">Read All Articles..</a></div>          

           </FooterTemplate>

           </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

            SelectCommand="SELECT * FROM [Articles]"></asp:SqlDataSource>

 

The above code uses SqlDataSource control to interact with the database.

 

DataList control will populate the whole data inside a HTML table by default, where each row is enclosed in a TD. You can check the view source and understand this. This control also has the capability to enclose the display of data in DIV tag instead of Table. To do this, set RepeatLayout property to "Flow".

In DataList control, the rows of data are repeated in the layout specified in the ItemTemplate. This control by default will repeat the rows in Vertical. We can also change to horizontal display by setting the property RepeatDirection to Horizontal.

 

Read the DataList articles posted on CodeDigest here,

Creating Dynamic DataList control in C#/ASP.Net

 




Repeater control

Repeater control is the light weight control when compared to the other databound controls and it provides more flexibility on the layout of data displayed. This control will not render any additional HTML like GridView(table) and DataList(table and DIV) do. It renders only the HTML we specified in the template columns which makes it light weight when compared to other controls. So, if we specify only Header and ItemTemplate, then it renders the HTML only for this columns and it will not enclose the data inside a parent table tag like GridView and DataList do.

Refer the below figure. 

Using this control, we can’t provide edit, update, paging feature and thus, it can be called readonly control.

 

How to use Repeater control?

Similar to DataList control, apart from specifying the datasource and calling DataBind() method, we need to specify the data items display using ItemTemplate and DataBinding expressions(Eval and Bind). Instead, we can also assign the DataSourceID property to the datasource id to display the data. Refer the below code,

 

<asp:Repeater ID="rpArticles" DataSourceID="SqlDataSource1" runat="server" EnableViewState="false">               

        <HeaderTemplate>         

           <div class="Post" style="Text-align:center;">

           <b>Recent Articles</b></div>          

              </HeaderTemplate>          

         <ItemTemplate>

          <div class="Post">

                    <div class="PostTitle"><asp:HyperLink ID="TitleLink" runat="server" Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("URL") %>'/></div>

                    <div class="PostSubtitle"><asp:Label ID="SubtitleLabel" runat="server" Text='<%# Eval("Title") %>' /></div>

                    <div class="PostInfo">

                        Posted on <asp:Label ID="DatePostedLabel" runat="server" Text='<%# Eval("Submittedon", "{0:d} @ {0:t}") %>' />

                        By  <asp:Label ID="lblAuthor" runat="server" Text='<%# Eval("Author") %>' /></a>

                        in <%# Eval("Category") %>

                    </div>

           </div>

           </ItemTemplate>

           <FooterTemplate>

           <div>                

           <a href="Articles.aspx">Read All Articles..</a></div>          

           </FooterTemplate>

        </asp:Repeater>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"

            SelectCommand="SELECT * FROM [Articles]"></asp:SqlDataSource>

 

Like DataList, this control also repeats the rows of data in the format specifed in the ItemTemplate but with no additional HTML markups.

 

Since Repeater control does not generate additional HTML, it also can be used to generate RSS feeds. Read the article here,

Creating RSS Feeds using Repeater and DataSource controls in ASP.Net

 

ListView control

ListView control is a new databound control that is shipped with ASP.Net 3.5. ListView control has awesome additional features when compared with other databound control till 1.x days. We can use repeater control whenever we need to display the data in a custom format, as opposed to only tabular view in GridView control. The Repeater control lacks in certain features like edit, update and paging. Using GridView control it is possible to Edit/Update/Delete data but with a big limitation on the layout of the data display. There is no single control available in earlier versions of asp.net that accommodates all the above features. The introduction of ASP.Net 3.5 answers this with the new ListView control.

In short, ListView control can be thought as a hybrid between GridView and Repeater control. ListView control gives us more control on the rendered HTML output with edit/update/delete feature. Also, ListView control has a built in support for adding new row, sorting, etc. 

 

To know more about this control, read my article ListView Control in ASP.Net 3.5

 

Read the articles posted on ListView control here,

Picasa Style Photo Album Using ListView Control in ASP.Net 3.5

ListView Control with LINQ to SQL Class– Part 2

ListView Control with LINQ to SQL Class – Part 1

Edit,Update,Delete and Insert in ListView Control

Paging in ListView in ASP.Net 3.5

 

Summary

Thus, we have understood the various databound controls and its advantages and disadvantages which will help us to choose the right control for our need.

To sum up,

Ø       Choose Gridview if your requirement is displaying tabular data. For example, a search result page where the customer expects a sorting clicking on the header. Also, it is very easy to provide custom paging with GridView when we use ObjectDataSource control. Read my article

      Custom GridView Paging with ObjectDataSource Control with ASP.Net 2.0

Ø       Choose between DataList and Repeater control for flow/tiled layout. DataList control will help you in providing editing the data where Repeater will not. For example, summary list pages like this.

Ø       If you use ASP.Net 3.5, then ListView control will satisfy almost all of your need in terms of the layout of the data display. This control is most flexible and versatile that can fit all your need.

 

Don’t forget to switch off the viewstate if your need is only display to get better performance.

 

Download the source attached with this article and see it in action.

 

Downloads

Download Source 

 

The attachment contains a sql express database in App_Data. Just open the project in Visual Studio and hit F5.

 

Happy Coding!!

 

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments
data bound control
THanks for your answers
Data Bound Controls
Thanks alot, thank u very Much............. its really very good.
Good Article
Very Nice,And useful to every one's.../
Grid View
Dear Sir/Madam

1. Please Provide Advantages & Disadvantages of Grid View.
2. If we used the Grid view give me main reason why we used grid view and if we not used grid view the reason of why we not used grid view

My E-mail id
twinkle.has.tripplex@gmail.com
Twinkle Kumar

Gridview control
Gridview control is not required at all in web development if the design requirement is identified properly.

For .net windows app... it best suited.

Its important how a developer looks into the problem.

Its always an overkill and a performance hit.