Now let’s look at the steps to enable users to modify an existing record. These are basically the same as when adding a new record, except in this case we need some way to let the users choose which record to update. You can either

• provide an HtmlSelect control populated with values from a given field, as described in Dynamic Queries, or
• use a DataGrid control with a HyperlinkColumn for the selectable field.

Editing an Existing Record [ SqlClient ] Run Sample | View Source

Editing an Existing Record [ OleDb ] Run Sample | View Source

There may be other ways, but here’s how it’s done in the sample.

Basically, we organize the page layout into three Panel controls: one to contain the interface for user selection, the next for the editing interface, and the last for the updated record view.

The loadPanel control, which is shown on initial page load, provides the interface for selecting the record to edit, using a DataGrid control.

To set up the DataGrid for this purpose, we use a combination of BoundColumn types along with a HyperLinkColumn. Below shows how the DataGrid is declared in the sample:

<asp:datagrid id="myGrid" runat="server" 
   ...
   autogeneratecolumns=false>

   <columns>
      <asp:boundcolumn headertext="Date" 
         datafield="MessageDate" 
         dataformatstring="{0:d}" />
      <asp:hyperlinkcolumn headertext="From"
         datanavigateurlfield="MessageID"
         datanavigateurlformatstring="update.aspx?id={0}"
         datatextfield="MessageFrom" />
      <asp:boundcolumn headertext="Subject" 
         datafield="MessageSubject" />
   </columns>

</asp:datagrid>

The BoundColumn represents a column bound to a data field, which is set by the DataField property. In cases where you need to change the default format that is applied to non-string values, for example with date or currency values, you can use the DataFormatString property, which sets the display format of data in the column. In our Date column above, the property is specified as:

<asp:boundcolumn headertext="Date" 
   datafield="MessageDate" 
   dataformatstring="{0:d}" />>

For more information, see Format Strings Overview.

The HyperLinkColumn creates a column within the DataGrid containing hyperlinks that navigate to specified URLs. The DataTextField property sets the field in the data source that will be used as the source of the hyperlinks’ text. The DataNavigateUrlField property sets the field in the data source that provides the URL of the page to navigate to. In this case, we set this to the MessageID field. The DataNavigateUrlFormatString property sets the formatting applied to the resulting hyperlink. The below snippet show how to set this property:

<asp:hyperlinkcolumn headertext="From"
   datanavigateurlfield="MessageID"
   datanavigateurlformatstring="update.aspx?id={0}"
   datatextfield="MessageFrom" />

As you may have probably noticed ( in the browser’s status bar ), the value of the MessageID field appears in place of the {0} when a user hovers over or clicks the hyperlink. This value is then passed to the server when the user makes a selection ( which effectively posts the form ), and is exposed via the Request.QueryString collection, which we then pass to the method that fetches the record to edit. More on this part of the code later.

getMessage ( Request.QueryString [ "id" ] );

For detailed information, see Adding DataGrid Controls to a Web Forms Page.

When the form is "posted" ( actually requested with a querystring parameter ), the editPanel control receives focus. This panel provides the editing interface which consists of an update entry form, that is generally the same as in the insert example, except that the controls are filled with the values of the corresponding fields of the current record, fetched from our data source.

Likewise, the update form includes Update and Cancel buttons, which are actually Submit and Reset buttons that are set up like

<input type=submit runat="server"
   value="Update" onServerClick="updateMessage">

<input type=reset value="Cancel"
   onClick="self.location.replace ( 'update.aspx' ) ">

Note that the Cancel button in the edit form calls a client-side script

self.location.replace ( 'update.aspx' ) 

This essentially forces a new page load without any querystring parameter, in effect "restarting" the application. This is intended to simplify basic page navigation that is independent of, and does not affect, the server-side scripts. Bear in mind, though, that these may not function in browsers that do not support, or have disabled support for, client-side scripts.

When the user submits the edit form, the postPanel control receives focus. This panel consists of a DataList control that is used to display the data of the newly updated record.

<asp:datalist id="listDetails" width=85% runat="server">

   <itemtemplate>
      <table id="posted" width=100% cellspacing=1 cellpadding=5 border=0>
      <col width=35% align="right">
      <tr>
         <td>Date:</td>
         <td><b><%# DataBinder.Eval ( Container.DataItem,
            "messageDate", "{0:d}" ) %></b></td></tr>
      ...
      <tr>
         <td>Message:</td>
         <td><b><%# ( ( IDataRecord ) Container.DataItem ) 
            [ "messageBody" ] %></b></td></tr>
      </table>
   </itemtemplate>

</asp:datalist>

For detailed information, see Adding DataList Controls to a Web Forms Page.