ASP.NET REPEATER, LISTVIEW, DATALIST, DATAGRID, GRIDVIEW - WHICH ONE TO CHOOSE?

http://www.netrostar.com/ASP.NET-Repeater-ListView-DataList-DataGrid-GridView-which-one-to-choose

This tutorial was brought to you by NetroStar, a Miami-based global web design company.

In ASP.NET there are various controls that you can use to display data. In this tutorial I'll compare following controls: DataGrid, GridView, DataList, ListView and Repeater. I'll show you how these controls look like and how to put and use each control on your website.

Firstly after you create a new project in Visual Studio we'll create a class that will be used as a ObjectDataSource. It will contain data that will be displayed on our controls. To do so right-click on the name of your project in Solution Explorer window on right and click Add - New Item. Now choose class on list, name it as you like (Employees in our example) and click Add button. It will create new .cs file where we'll create a simple list of employees with two properties - name and salary. Properties are fields that have mechanism to effectively perform operations such as reading or writing.

So now we'll create Employee class with fields name and salary. Just add the following code to the file that you just have created:

view plaincopy to clipboardprint?

1. public class Employee  
2. { private string name; private int salary; public Employee(string name, int salary) { this.name = name; this.salary = salary; } public string Name { get { return name; } } public int Salary { get { return salary; } }  
3. }  

We'll add also a class that will create a list of all employees and populate it:

view plaincopy to clipboardprint?

1. public class Employees  
2. { private List<Employee> employees; public Employees() { employees = new List<Employee>(); employees.Add(new Employee("John", 2000)); employees.Add(new Employee("Mike", 2500)); employees.Add(new Employee("Bill", 3000)); employees.Add(new Employee("Steve", 3500)); } public List<Employee> GetEmployees() { return employees; }  
3. }  

After adding Employees file rebuild solution by clicking on menu Build - Rebuild Solution.

Now go to the Default.aspx file and we'll add there ObjectDataSource. In order to do this find ObjectDataSource in Toolbox or go to menu Data - Add New Data Source and then choose Object and click next button. The next window will vary a bit depending on the method you choose but the general idea remains the same - you have to find Employees class on the list and save it as your business object. Then we'll just choose a method for select - GetEmployess(), after it just click Finish button. Your ObjectDataSource is already configured.

In this part of tutorial I'll show you how to work with all controls and we'll compare it by binding each control to the same ObjectDataSource that we just have created.

 

DATAGRID

DataGrid is a control where you can present your data in a HTML table fashion. However there is a new version of DataGrid which is GridView that I'll describe later. Generally there is no reason why you should use DataGrid instead of GridView but I'll present you it briefly because this control was very popular and you can still encounter it in many applications.

The basic version of this control looks like this: 

To add it you just have to find it in toolbox and drag it to your aspx file. It's also very easy to configure it, to do so go to design mode and you'll find small rectangle in the top right corner of this control. After clicking it there will appear a menu where you can set up all properties: 

The most important thing is to choose data source for this control (ObjectDataSource1 in our example), in fact it's the only thing you have to do in order to display this control on website. Then you can format it with patterns.

 

GRIDVIEW

The next control that I'll show you is GridView. As I mentioned before it's an updated version of DataGrid so it's purpose is quite the same - it renders a table where you can display data.

Let's take a look at GridView that is already configured: 

Configuring this control is very similar to configuring the previous one - firstly you have to choose ObjectDataSource. In GridView you have more options to choose from than in the DataGrid. It is possible for example to easily add new columns to this table.

The main advantage of this control is that it's very easy to set-up and it requires minimal effort. So if you need to present data in a table it's the best option for you.

 

DATALIST

DataList presents data in a form of a list. There are a lot of options that you can configure such as boarder colors or font. You can also edit template for each item that is displayed on the list as well as templates for header and footer (header is always on top of the list and footer is on the bottom).

You can see example of DataList below: 

 

LISTVIEW

ListView is the new version of DataList and you configure it a bit differently. To get ListView to work after adding ObjectDataSource you have to select concrete layout from Configure ListView menu. The fact that ListView is newer than DataList doesn't mean that the latter is not useful now, they are simply different and you should check which one suits you better.

Take a look at the example of ListView: 

 

REPEATER

The last control that I'll describe is repeater - it gives you a lot of options to customize it but also requires some work to get it work. Generally you have to create template in source code for each item and other optional templates for header or footer. Then each item is displayed on your website accordingly to the templates that are defined in a given repeater.

For example repeater can look like this one : 

In this example I defined HeaderTemplate (beginning of repeater), ItemTemplate (template for each item), SeparatorTemplate (between each item), FooterTemplate (end of repeater). Take a look at source code of this repeater:

view plaincopy to clipboardprint?

1. <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">  
2. <HeaderTemplate>  
3. This is a header of Repeater<hr />  
4. </HeaderTemplate>  
5. <ItemTemplate>  
6. Name of employee: <%# DataBinder.Eval(Container.DataItem, "Name") %> <br />  
7. Salary of employee: <%# DataBinder.Eval(Container.DataItem, "Salary") %> <br />  
8. </ItemTemplate>  
9. <SeparatorTemplate>  
10. <hr />  
11. </SeparatorTemplate>  
12. <FooterTemplate>  
13. <hr />This is a footer of Repeater<br />  
14. </FooterTemplate>  
15. </asp:Repeater>  

CLOSING REMARKS

Summing up each of controls described in this tutorial can be useful in web design. So choosing the right control depend on you needs. Generally if you just need a simple table use GridView, for displaying data in a form of list it's best to use ListView and if you want to specify your own templates for each item Repeater will be the best.

This tutorial is brought to you by NetroStar, a web design company.