- Present data source and data view controls.
- The Northwind database installed in SQL Server instance. [Northwind's script]
- Create a new ASP.NET Web Application project in Visual Studio.
- There are two types of server controls participate in the
declarative data binding model:
- Data source controls:
- They do not render any user interface.
- They act as an intermediary between a particular data store and other controls on the ASP.NET Web page.
- They enable rich capabilities for retrieving and modifying data, including querying, sorting, paging, filtering, updating, deleting, and inserting.
- Depending of the source of the data, one of the following
controls can be used:
- SqlDataSource - for any SQL database; it returns data as DataReader or DataSet objects
- AccessDataSource - specialized version of the SqlDataSource control - only for Microsoft Access
- LinqDataSource - for LINQ to SQL
- EntityDataSource (3.5 SP1) - for Entity Framework
- XmlDataSource - for data stored in XML files
- SiteMapDataSource - special data source for a definition of web site's structure; used by navigational controls
- ObjectDataSource - for special, custom logic of loading data (e.g. from services)
- Data source controls:
- Data bound (data view) controls:
- Controls designed to display bound data:
- DetailsView
- FormView
- DataList
- ListView
- DataPager (it does not display the data, but allows to add paging for e.g. a ListView control)
- Other controls that can be used to display bound data:
- GridView
- Repeater
- Controls designed to display bound data:
- SqlDataSource
- Add a SqlDataSource to the page.
- Choose the 'Configure Data Source' task (available at the small
button attached to the control in the Design mode). Choose the
Northwind database and than the Customers table. We will allow the
user to modify the displayed data, so using the Advanced button
set the option of generating insert, update, and delete
commands also:
- The following markup code is generated:<asp:SqlDataSource ID="SqlDataSource1" runat="server"Note that using the SqlDataSource control allows to create a web database application in seconds, but the generated code is quite hard to maintain - there are no data access and data logic layers, everything is mixed in the presentation layer.
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = @CustomerID"
InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (@CustomerID, @CompanyName, @ContactName, @ContactTitle, @Address, @City, @Region, @PostalCode, @Country, @Phone, @Fax)"
SelectCommand="SELECT * FROM [Customers]"
UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [ContactTitle] = @ContactTitle, [Address] = @Address, [City] = @City, [Region] = @Region, [PostalCode] = @PostalCode, [Country] = @Country, [Phone] = @Phone, [Fax] = @Fax WHERE [CustomerID] = @CustomerID"> <DeleteParameters>
<asp:Parameter Name="CustomerID" Type="String" /> </DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="CompanyName" Type="String" /> <asp:Parameter Name="ContactName" Type="String" /> <asp:Parameter Name="ContactTitle" Type="String" /> <asp:Parameter Name="Address" Type="String" /> <asp:Parameter Name="City" Type="String" /> <asp:Parameter Name="Region" Type="String" /> <asp:Parameter Name="PostalCode" Type="String" /> <asp:Parameter Name="Country" Type="String" /> <asp:Parameter Name="Phone" Type="String" /> <asp:Parameter Name="Fax" Type="String" /> <asp:Parameter Name="CustomerID" Type="String" /> </UpdateParameters>
<InsertParameters>
<asp:Parameter Name="CustomerID" Type="String" /> <asp:Parameter Name="CompanyName" Type="String" /> <asp:Parameter Name="ContactName" Type="String" /> <asp:Parameter Name="ContactTitle" Type="String" /> <asp:Parameter Name="Address" Type="String" /> <asp:Parameter Name="City" Type="String" /> <asp:Parameter Name="Region" Type="String" /> <asp:Parameter Name="PostalCode" Type="String" /> <asp:Parameter Name="Country" Type="String" /> <asp:Parameter Name="Phone" Type="String" /> <asp:Parameter Name="Fax" Type="String" /> </InsertParameters>
</asp:SqlDataSource>
- GridView
- Add a GridView control to the page. As the DataSourceID,
set the SqlDataSource1 control. Note that columns are
automatically generated. Select also all checkboxes on the GridView
Tasks window to enable additional options:
- Run the page and note how easy was to create quite functional
grid for presenting data for modification:
- After a few more seconds and clicks (auto format, font,
alignment of the pager), the page can change its
appearance radically:
- Add a GridView control to the page. As the DataSourceID,
set the SqlDataSource1 control. Note that columns are
automatically generated. Select also all checkboxes on the GridView
Tasks window to enable additional options:
- LinqDataSource
- Add a new 'LINQ to SQL Classes' item to the project:
- Add all tables of the Northwind database to the new created
DataClasses1.dbml file (drag them from the Server Explorer window):
- Add a new page (i.e. a Web Form item) to the project.
- Add a new LinqDataSource control to the page.
Configure it using the 'Configure Data Source' task:
(If the list of available context objects is empty, compile the project and try again.) - As in the previous example, we will allow the user to modify
data:
- We have chosen the Customers table, so name the control customersLinqDataSource.
- Add another LinqDataSource named ordersLinqDataSource attached
to the Orders table:
- Add a new 'LINQ to SQL Classes' item to the project:
- DetailsView
- Add a DetailsView control to the page. Set its DataSourceID to
customersLinqDataSource and enable some additional features:
- Run the page and check its functionality:
- Let's display all orders of the selected customer at the right
side using a grid:
- Create a Table with 2 cells, put the DetailsView control to
the left cell and the GridView control to the right one:
- Set the ordersLinqDataSource control for the DataSourceID property of the GridView.
- Run the page and note that data in the GridView is not
filtered for the customer selected in the DetailsView control:
- There is no need to write code to set the proper filter for
the grid, it is enough to configure the ordersLinqDataSource
control using the Visual Designer:
- Make some cosmetic changes in the appearance of both visible
controls and enjoy the result:
- Create a Table with 2 cells, put the DetailsView control to
the left cell and the GridView control to the right one:
- Add a DetailsView control to the page. Set its DataSourceID to
customersLinqDataSource and enable some additional features:
- FormView
- The next step to improve our web application is to create a page that displays details of an order in a nice and easy to modify way.
- Add a new page to the project, name it order.aspx.
- Add a LinqDataSource control:
- Name it orderLinqDataSource.
- Configure it to get data from the Orders table of the
DataClasses1 source. Be sure to enable modifying the data:
- We want to display a single order, so we should filter the
data source. As a filtering parameter we use OrderID which will
be passed to the page in the query string:
Be sure to set the default value for the parameter taken from the QueryString. Without this default value, the LinqDataSource control would try force converting nothing to an integer value and as a result the user would see an exception displayed on the page.
- Add a FormView control to the page, set the
DataSourceID property to orderLinqDataSource:
- In most of data view controls, it is possible to define what
should be displayed if there is no data. For the FormView control,
it can be done by defining the EmptyDataTemplate:
- Run the page:
- If there is a proper OrderID parameter in the query string, the
page displays data of the order:
- To allow the user to jump directly to the order's details from
the list of orders, set the Enable Selection options of the GridView
control presenting orders to true:
and add a handler for the SelectedIndexChanged event of the grid:protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)Note that transferring a request using the Server.Transfer method has some disadvantages. The better way would be adding a special column to the GridView control with manually created hyperlinks.
{
Server.Transfer("~/order.aspx?OrderID=" + (int)GridView1.SelectedValue);
}
- ObjectDataSource
- The last taks of this tutorial is to create a page displaying short information about customers in a form of a pageable list. Displayed information should contain: CustomerID, CompanyName, and number of orders.
- Add to the project a class that will serve data (it will be used
by the ObjectDataSource):using System;using System.Linq;using System.Data.Linq;using System.Collections;
namespace DataControls
{
public class CustomersShortInfo {
private static DataClasses1DataContext customersDC;
protected static DataClasses1DataContext CustomersDC
{
get
{
if (customersDC == null)
{
customersDC = new DataClasses1DataContext();
}
return customersDC;
}
}
public static int GetCount()
{
return CustomersDC.Customers.Count();
}
public static IEnumerable GetData(int startRowIndex, int maximumRows)
{
var data =
(from c in CustomersDC.Customers
select new {
c.CustomerID,
c.CompanyName,
NumberOrders = c.Orders.Count
}
).Skip(startRowIndex).Take(maximumRows);
return data;
}
}
} - Add an ObjectDataSource control to the page. Configure it to use
the GetData method of the CustomersShortInfo class to get data:
- Modify the generated markup code to get such code:<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"(Parameters of the GetData method are used automatically when paging is enabled, explicit declaration would cause problems.)
TypeName="DataControls.CustomersShortInfo"
EnablePaging="True"
SelectMethod="GetData" SelectCountMethod="GetCount">
</asp:ObjectDataSource>
- ListView
- Add a ListView control to the page.
If there is no such control on the Toolbox, do not worry, just start typing '<asp:ListView' in the Source view of the page. - To make it work, the LayoutTemplate and ItemTemplate of the
ListView control must be set. Additionally, because we expect paging
parameters in the GetData method, a DataPager
control must be used:<asp:ListView ID="ListView1" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<div runat="server" id="lstProducts">
<div runat="server" id="itemPlaceholder" /> </div>
<asp:DataPager ID="DataPager1" runat="server" PageSize="5">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" /> </Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<div > ID: <asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerID")%>' /><br /> Company name: <asp:Label ID="Label2" runat="server" Text='<%# Eval("CompanyName")%>' /><br /> Number of orders: <asp:Label ID="Label3" runat="server" Text='<%# Eval("NumberOrders")%>' /> </div>
<br /> </ItemTemplate>
</asp:ListView> - Run the page:
- The appearance of data can be almost freely modified, e.g.:
<asp:ListView ID="ListView2" runat="server" DataSourceID="ObjectDataSource1">
<LayoutTemplate>
<asp:DataPager ID="DataPager1" runat="server" PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" /> </Fields>
</asp:DataPager>
<br /> <div runat="server" id="lstProducts">
<span runat="server" id="itemPlaceholder"/>
</div>
</LayoutTemplate>
<ItemTemplate>
<div style="float: left; width: 200px; margin: 20px 20px 20px 20px;">
ID: <asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerID")%>' /><br /> Company name: <asp:Label ID="Label2" runat="server" Text='<%# Eval("CompanyName")%>' /><br /> Number of orders: <asp:Label ID="Label3" runat="server" Text='<%# Eval("NumberOrders")%>' /> </div>
</ItemTemplate>
</asp:ListView>
- Add a ListView control to the page.
