Use the DataList Control to Present and Edit Data

Discussion in 'ASP .Net Web Controls' started by Alex, Dec 7, 2003.

  1. Alex

    Alex Guest

    Interested in more .NET stuff visit www.dedicatedsolutions.co.uk

    The DataList is not as powerful as the DataGrid. It requires more work
    from you since it has no default data presentation format. However,
    the DataGrid begins to get very cumbersome as the number of columns of
    data you present increases. Anything more than half a dozen columns or
    so and you probably induce horizontal scrolling - a real no-no for me.
    If you put such a DataGrid into edit mode then you really have a
    horizontal scrolling problem.



    The DataList, with its ItemTemplate and EditItemTemplate, make it very
    easy for you to control the appearance (and screen real estate) of the
    data. As I said before, it requires more coding but the results may
    well be worth the effort.

    In this article and example program we will deal with the Northwind
    Customers table. I have included nine columns of editable data. I have
    divided the work between an aspx page and a code-behind page. In the
    aspx page we layout our presentation of data, while the code-behind
    file places the DataList in edit mode, and handles the updating of
    modified data. The aspx file will be shown below in several sections
    to make it easier to explain what each section does. This first
    section is the usual top-of-page "stuff" and the definition of the
    DataList Control. The only items of note are that we have set the
    OnEditCommand, OnUpdateCommand, and OnCancelCommand properties to the
    names of the corresponding event handlers which are defined in the
    code-behind file.



    <%@ Page Language="vb"
    Src="/Portals/57ad7180-c5e7-49f5-b282-c6475cdb7ee7/DataListEdit.aspx.vb"
    Inherits="Main" %>

    <html>
    <head>
    <title>DataList Edit</title>
    <style rel="stylesheet">
    .customers { font: 9pt Verdana, Arial, sans-serif; }
    .customersHead { font: bold 8pt Verdana, Arial, sans-serif;
    background-color:#4A3C8C; color:white; }
    a { text-decoration:underline; }
    a:hover { text-decoration:underline; color:#4A3C8C; }
    </style>
    </head>
    <body>
    <form runat="server" ID="Form1">
    <div align="center">
    <h3>Customers Table</h3>
    </div>
    <asp:DataList id="dtlcustomers"
    runat="server"
    width="760"
    BorderWidth="1"
    HeaderStyle-CssClass="customersHead"
    AlternatingItemStyle-BackColor="#DEDFDE"
    Font-Size="10"
    Align="Center"
    OnEditCommand="dtlcustomers_Edit"
    OnUpdateCommand="dtlcustomers_Update"
    OnCancelCommand="dtlcustomers_Cancel">


    The following section includes the ItemTemplate for presentation of
    our data. The code (markup) is fairly long, but all we are doing is
    creating an html table to present the data. The CompanyName column is
    shown in a TD element of its own. The rest of the data and column
    descriptions are show two columns abreast. Notice that we are
    specifically naming the column headings in one TD element and using
    the Eval method of the DataBinder class to obtain the actual database
    table data. We are also using a Button control to induce edit mode in
    the code-behind file. You can use a LinkButton if you prefer a textual
    presentation. This may look a little messy at first, but if you run
    the program (from the link at the bottom of the article) and compare
    the output to what you see below, I belive you find it very straight
    forward.

    <ItemTemplate>
    <table cellpadding="2" cellspacing="0" width="100%">
    <tr>
    <td colspan="4" class="customersHead">
    <h3><%# DataBinder.Eval(Container.DataItem, "CompanyName")
    ></h3>

    </td>
    </tr>
    <tr>
    <td Width="100%" Align="left" colspan="4">
    <asp:button id="btnEdit" Runat="server" CommandName="edit"
    Text="Edit" />
    </td>
    </tr>
    <tr>
    <td Width="25%" Align="left">
    <b>Contact Name</b>
    </td>
    <td Width="25%" Align="left">
    <%# DataBinder.Eval(Container.DataItem, "ContactName") %>
    </td>
    <td Width="25%" Align="left">
    <b>Contact Title</b>
    </td>
    <td Width="25%" Align="left">
    <%# DataBinder.Eval(Container.DataItem, "ContactTitle") %>
    </td>
    </tr>
    <tr>
    <td Width="25%" Align="left">
    <b>Address</b>
    </td>
    <td Width="25%" Align="left">
    <%# DataBinder.Eval(Container.DataItem, "Address") %>
    </td>
    <td Width="25%" Align="left">
    <b>City</b>
    </td>
    <td width="25%" align="left">
    <%# DataBinder.Eval(Container.DataItem, "City") %>
    </td>
    </tr>
    <tr>
    <td Width="25%" Align="left">
    <b>Postal Code</b>
    </td>
    <td Width="25%" Align="left">
    <%# DataBinder.Eval(Container.DataItem, "PostalCode") %>
    </td>
    <td Width="25%" Align="left">
    <b>Country</b>
    </td>
    <td width="25%" align="left">
    <%# DataBinder.Eval(Container.DataItem, "Country") %>
    </td>
    </tr>
    <tr>
    <td Width="25%" Align="left">
    <b>Phone</b>
    </td>
    <td Width="25%" Align="left">
    <%# DataBinder.Eval(Container.DataItem, "Phone") %>>
    </td>
    <td Width="25%" Align="left">
    <b>Fax</b>
    </td>
    <td width="25%" align="left">
    <%# DataBinder.Eval(Container.DataItem, "Fax") %>
    </td>
    </tr>
    </Table>
    </ItemTemplate>


    Next we must decide how our data and column descriptions are to appear
    while in edit mode. That is the purpose of the markup below following
    the EditItemTemplate tag. The process is much the same as in the
    ItemTemplate section above. The main difference is that we are
    creating TextBox controls to contain the actual data, so that the data
    becomes editable. I also chose to present the column descriptions and
    data one abreast rather than two abreast as above. I did this for two
    reasons. One was just to show that the ItemTemplate and
    EditItemTemplates stand alone and do not have to have the same
    presentation format, and to make more room for several of the
    TextBoxes that can hold 30 - 40 characters of data. Again, once you
    run the program you will see the difference in presentation.

    <EditItemTemplate>
    <table cellpadding="2" cellspacing="0" width="100%">
    <tr>
    <td colspan="2" class="customersHead">
    <h3><%# DataBinder.Eval(Container.DataItem, "CompanyName")
    %></h3>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Company Name</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtCompanyName" runat="server"
    MaxLength="40" Columns="40"
    Text='<%# DataBinder.Eval(Container.DataItem, "CompanyName")
    %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Contact Name</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtContactName" Runat="server"
    MaxLength="30" Columns="30"
    Text='<%# DataBinder.Eval(Container.DataItem, "ContactName")
    %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Contact Title</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtContactTitle" Runat="server"
    MaxLength="30" Columns="30"
    Text='<%# DataBinder.Eval(Container.DataItem,
    "ContactTitle") %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Address</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtAddress" Runat="server" MaxLength="60"
    Columns="60"
    Text='<%# DataBinder.Eval(Container.DataItem, "Address")
    %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>City</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtCity" Runat="server" MaxLength="15"
    Columns="15"
    Text='<%# DataBinder.Eval(Container.DataItem, "City") %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Postal Code</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtPostalCode" Runat="server"
    MaxLength="10" Columns="10"
    Text='<%# DataBinder.Eval(Container.DataItem, "PostalCode")
    %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Country</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtCountry" Runat="server" MaxLength="15"
    Columns="15"
    Text='<%# DataBinder.Eval(Container.DataItem, "Country")
    %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Phone</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtPhone" Runat="server" MaxLength="24"
    Columns="24"
    Text='<%# DataBinder.Eval(Container.DataItem, "Phone") %>'/>
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="Left">
    <b>Fax</b>
    </td>
    <td Width="50%" Align="left">
    <asp:TextBox id="txtFax" Runat="server" MaxLength="24"
    Columns="24"
    Text='<%# DataBinder.Eval(Container.DataItem, "Fax") %>'/>
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <asp:Label id="lblCustomerID" runat="server"
    Text='<%# DataBinder.Eval(Container.DataItem, "CustomerID")
    %>'
    Visible="false" />
    </td>
    </tr>
    <tr>
    <td Width="50%" Align="right">
    <asp:Button id="btnUpdate" Runat="server"
    CommandName="update" Text="Update" />
    <asp:Button id="btnCancel" Runat="server"
    CommandName="cancel" Text="Cancel" />
    </td>
    <td Width="50%" Align="Left">

    </td>
    </tr>
    </table>
    </EditItemTemplate>
    </asp:DataList>
    </form>
    </body>
    </html>


    Now for the code-behind file. We will also present this file in
    sections to better illustrate and explain the code. First are the
    Page_Load and BindTheData() subroutines. The Page_Load simply checks
    to make sure this is the first time the page has been loaded and calls
    the BindTheData subroutine. BindTheData uses a DataAdapter to obtain
    the data from the table, fills a DataSet and binds the data to the
    DataList control (dtlCustomers).
     
    Alex, Dec 7, 2003
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nevyn Twyll
    Replies:
    8
    Views:
    1,971
  2. Ralf Wahner
    Replies:
    5
    Views:
    656
    Bob Foster
    Dec 24, 2003
  3. Alex

    Use the DataList Control to Present and Edit Data

    Alex, Dec 7, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    180
  4. Alex

    Use the DataList Control to Present and Edit Data PART 2

    Alex, Dec 7, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    122
  5. Alex
    Replies:
    0
    Views:
    124
Loading...

Share This Page