Controls that Are Datasource Bound

Share |

ASP .NET 2.0 provides several groups of databound controls: AdRotor, ListControl(BulletedList, CheckboxList, drop-down list, ListBox, RadioButtonList), CompositeDataBoundControl (DatailsView, FormView, GridView), and HierachicalDataBoundControl(TreeView, Menu). ASP .NET 1.x users are already familiar with ListControls such as RadioButtonList, drop-down list; however, BulletedList is a brand new member of the ListControl family.

 

BulletedList works as an HTML list. However, it can be directly populated from a backend database. Here is an example of BulletedList:

<asp:BulletedList
     DisplayMode="HyperLink"
     ID="BulletedList1"
     runat="server">
   <asp:ListItem
      Value="http://www.emmaandus.blogspot.com/">Bullet One
   </asp:ListItem>
   <asp:ListItem
      Value="http://www.devhood.com/">Bullet Two
   </asp:ListItem>
</asp:BulletedList>

Note:The "~" in the line of BulletImageUrl is the web application root operator and denotes the root of the web site. It can be used to specify a URL in a server control's attribute. BulletedList has several display modes: text, hyperlink, and linkbutton.

DataSource Control

In the old days of ASP, if you wanted populate a list of radio buttons, checkboxes, or HTML select option items, you wrote database connection and queries, and used a "for" or "while" loop to write out the items one by one. In the not-so-old ASP .NET 1.x days, you were saved from some of the coding, especially if you had an IDE like VS .NET. You dragged and dropped a server control to the web form. Then, after some property editing, you sneaked into the code-behind code file and did the same old ASP thing: established the database connection and built a query; then, we declared. Now, this is the source: Let the drop-down list or whatever be married to the datasource.

ASP .NET 2.0 follows the same logic; however, it moves one step further into a higher ground. It gives you a new type of server control called data source controls; these include SqlDataSource, XmlDataSource, AccessDataSource, and so forth. Like other web controls, data source controls can be dragged and dropped onto the web form. The VB 2005 IDE also provides a Configure Data Source wizard.

(Full Size Image)

The ASPX code for the data souce control follows:

<asp:SqlDataSource runat="server"
     ID="SqlDataSource1"
     ConnectionString="<%$ ConnectionStrings:
                       NorthwindConnectionString %>"
     SelectCommand="SELECT [EmployeeID], [LastName], [FirstName]
                    FROM [Employees]">
</asp:SqlDataSource>

That is it. That saves your labor of switching to the code-behind file, and dutifully spits out all the necessary database instructions. Once the datasource is created and configured, you can bind a drop-down list or any databound controls to it.

The following is the code for a dropdown list that displays all the employee names from the Northwind database.

<!--declare a sqldatasource. Modified the selectcommand a little
    so we can employees' full name -->
<asp:SqlDataSource runat="server"
     ID="dsEmployees"
     ConnectionString="<%$ ConnectionStrings:
                       NorthwindConnectionString %>"
     SelectCommand="SELECT [EmployeeID], [LastName] + ' '+
                    [FirstName] as name FROM [Employees]">
</asp:SqlDataSource>

<asp:drop-down list ID="ddlEmployees"
     runat=server Width="150px" AutoPostBack=true
     DataSourceID=dsEmployees DataTextField="name"
     datavaluefield=employeeID>
</asp:drop-down list>

GridView

Of all the databound controls, GridView is the most powerful and versatile one. In ASP .NET 2.0, GridView takes place of the datagrid web control of ASP .NET 1.x, even though datagrid is still supported for backward compatibility. GridView extends and exhances many functionalities of datagrid and makes data display and editing easier and code-efficient. In ASP .NET 1.x, programmers need to write a lot of cusom code for such common database operations as paging and sorting. (Hey, does anyone remember how much more you need to write for paging in classic ASP?) However, The GridView control has a bulit-in sorting functionality. All you have to do is set the AllowSorting attribute to be ture and provide a SortExpression attribute for each each column concerned. Similarily, by simply setting the AllowPaging attribute to true, you accomplish the once-formidable task of paging. GridView can handle editing automatically too.

The aspx code for a GridView that enables sorting and paging:

<asp:SqlDataSource runat="server"
     ID="SqlDataSourceCustomers"
     ConnectionString="<%$ ConnectionStrings:
                       NorthwindConnectionString %>"
     SelectCommand="SELECT [CustomerID], [CompanyName],
                    [ContactName], [ContactTitle], [Address],
                    [City], [Region], [PostalCode], [Country]
                    FROM [Customers]">
</asp:SqlDataSource>

<asp:GridView ID="GridView1"
     runat=server AutoGenerateColumns="false"
     datasourceid="SqlDataSourceCustomers"
                  DataKeyNames=CustomerID
                  AllowPaging=true AllowSorting=true>
   <Columns>
      <asp:BoundField DataField="CustomerID" HeaderText="ID"
           sortexpression="CustomerID" />
      <asp:BoundField DataField="CompanyName"
                                 HeaderText="CompanyName"
           sortexpression="CompanyName" />
      <asp:BoundField DataField="ContactName"
                                 HeaderText="ContactName"
           sortexpression="ContactName" />
      <asp:BoundField DataField="ContactTitle"
                                 HeaderText="ContactTitle"
                                 sortexpression="ContactTitle" />
      <asp:BoundField DataField="address" HeaderText="address"
           sortexpression="address" />
      <asp:BoundField DataField="region" HeaderText="region"
           sortexpression="region" />
      <asp:BoundField DataField="PostalCode" HeaderText="PostalCode"
           sortexpression="PostalCode" />
      <asp:BoundField DataField="country" HeaderText="country"
           sortexpression="country" />
   </Columns>
   <HeaderStyle BackColor="lightblue" />
   <PagerStyle BackColor="lightblue" HorizontalAlign="Center" />
</asp:GridView>

GridView also enables data editing with little additional code, provided you configure your data source with updated, delete and insert statements.

Here is the ASPX code for a GridView with edit and delete command buttons:

<asp:SqlDataSource runat="server"
     ID="SqlDataSource2"
     ConnectionString="<%$ ConnectionStrings:
                       NorthwindConnectionString %>"
     SelectCommand="SELECT [CategoryID], [CategoryName],
                    [Description] FROM [Categories]"
     DeleteCommand="Delete from categories
                    where categoryID=@categoryID"
     UpdateCommand="Update categories set CategoryName=@categoryName,
                    Description=@description
                    where categoryID=@categoryID">
   <DeleteParameters>
      <asp:Parameter Name=categoryID Type=int16 />
   </DeleteParameters>
   <UpdateParameters>
      <asp:Parameter Name=categoryID Type=int16 />
      <asp:Parameter Name=categoryName Type=string />
      <asp:Parameter Name=description Type=string />
   </UpdateParameters>
</asp:SqlDataSource>

<asp:GridView ID="GridView2" runat=server
     AutoGenerateColumns="False"
     datasourceid="SqlDataSource2" AllowPaging=True
     DataKeyNames=CategoryID>
   <HeaderStyle BackColor="LightBlue" />
   <PagerStyle BackColor="LightBlue" HorizontalAlign="Center" />
   <Columns>
      <asp:BoundField DataField="CategoryID" HeaderText="ID"
           readonly=true/>
      <asp:BoundField DataField="CategoryName" HeaderText="Name"/>
      <asp:BoundField DataField="Description"
                                 HeaderText="Description" />
      <asp:CommandField ButtonType=button ShowEditButton=true
           CausesValidation=false />
      <asp:CommandField ButtonType=Button ShowDeleteButton=true
           CausesValidation=false />
   </Columns>
</asp:GridView>

Although there is no support for displaying master-detail views in ASP .NET 1.x, in ASP .NET 2.0, the GridView comes with a pair of complementary view controls: DetailsView and FormView, which enable displaying hierarchical parent-child data tables with little code. Whereas the two view controls are mainly designed for the GridView, they also can be used with other databound controls such as drop-down lists or on their own.

The following is an example of master-detail page consisting of a GridView and a DetailsView. You use two datasources, one for the parent GridView, the other for the child DetailsView.

<table>
<tr><td>
   <asp:SqlDataSource runat="server"
      ID="SqlDataSourceCategory"
      ConnectionString="<%$ ConnectionStrings:
                        NorthwindConnectionString %>"
      SelectCommand="SELECT [CategoryID], [CategoryName],
                     [Description] FROM [Categories]">
   </asp:SqlDataSource>

   <asp:GridView runat=server ID=GridViewCategory
        DataSourceid="SqlDataSourceCategory"
       datakeynames="categoryid" AutoGenerateColumns=true
       selectedIndex=0 >
      <Columns>
         <asp:CommandField ButtonType=button
                 ShowSelectButton=true />
      </Columns>
      <SelectedRowStyle BackColor=lightblue />
   </asp:GridView>
</td>

<td valign=top>
   <asp:SqlDataSource runat="server"
        ID="SqlDataSourceProducts"
        ConnectionString="<%$ ConnectionStrings:
                          NorthwindConnectionString %>"
        SelectCommand="SELECT [ProductID], [ProductName],
                       [SupplierID], [CategoryID],
                       [QuantityPerUnit], [UnitPrice],
                       [UnitsInStock], [UnitsOnOrder],
                       [ReorderLevel] FROM [Products]
                       where [CategoryID]=@CategoryID">
      <SelectParameters>
         <asp:ControlParameter ControlID="GridViewCategory"
              Name="CategoryID"
              PropertyName="SelectedValue" Type=string/>
      </SelectParameters>
   </asp:SqlDataSource>
<asp:DetailsView ID="DetailsViewProduct" runat=server
DataSourceID="SqlDataSourceProducts" datakeynames="productID"
             AllowPaging=true/>
</td></tr>
</table>

The DetailsView control has a built-in paging feature. It also allows update, insert, and delete functions.

The Formview control works similarily to the DatailsView Control. However, FormView needs templates instead of a table for data display. Formview enables you to have more control over the layout of the data.