Basically, to enable users to add a row of data into the database, we provide a simple input form on the page, and execute an SQL Insert command in the form submit handler. The below sample illustrates how a new record can be added to our data store.

Adding a New Record [ SqlClient ] Run Sample | View Source

Adding a New Record [ OleDb ] Run Sample | View Source

Now let’s first explore the user interface parts of the page.

Basically, the page is made up of two panel controls: one for the entry form, which is shown on page load, and one for displaying the results of the insert, which is shown on post back.

The addPanel control includes an entry form containing the set of fields we need to collect data from. The structure of the form is fairly straightforward, having one input control ( each designated with a unique identifier ) for each of the fields in the table that the user needs to fill up.

1. Declare a <form> element, consisting of the following controls:
   1. an <input type=text> control for each of the MessageFrom, Email, and MessageSubject fields.
   2. a <textarea> control for the MessageBody field.

   <asp:panel id="addPanel" runat="server">
   
      <form runat="server">
         <table width=85% cellspacing=1 cellpadding=3 border=0>
         <tr>
            <td>Your name:</td>
            <td><input id="msgFrom" runat="server"></td>
         <tr>
         ...
         <tr>
            <td>Your message:</td>
            <td><textarea id="msgBody" rows=5 cols=35 runat="server" /></td>
         </tr>
         </table>
         ...
      </form>
   
   </asp:panel>

2. Also within the <form> element, add Submit and Reset buttons.
   • Within the opening tag of the <input type=submit> button, assign the handler that will receive control when the button’s onServerClick event occurs ( that is, when a user clicks the control ).
   • Within the opening tag of the <input type=reset> button, include client-side script to close the current window when the button’s onClick event occurs on the client.

   <input type="submit" runat="server"
      value="Add New" onServerClick="addMessage">
   
   <input type="reset" value="Cancel"
      onclick="self.close ( ) "></p>

Note that we do not provide input for MessageID, which increments automatically, and MessageDate, which we fill in programmatically with the current date and time when the user submits the form. More on this part of the code later.

To prevent accidental violation of the table’s field constraints, our entry form also provides for checking the required input values, using the following validator controls included with ASP.NET.

• the RequiredFieldvalidator ensures that the compulsory fields are filled up;
• the RegularExpressionValidator is used for checking the format of the email field;
• the ValidationSummary control displays a summary of the validation errors for all of the validators on the page.

Below shows how the validator controls are attached to the input controls whose values need to be verified:

<input id="msgFrom" runat="server">
   <asp:requiredfieldvalidator
      controltovalidate="msgFrom"
   . . .
<input id="msgEmail" runat="server">
   <asp:regularexpressionvalidator
      controltovalidate="msgEmail"
   . . .

For detailed information on using ASP.NET validator controls, see Web Forms Validation.

The postPanel control is used to display the details of the newly added record.

While we can simply expose these values via the Request.Form collection, which returns the form data set posted by the user, here we fetch the record directly from the database into a DataReader, the values of which are then displayed in a DataList control.

This ensures that the record had indeed been added to the database.

<asp:panel id="postPanel" runat="server">
   <h5>Thank you for sharing your comments. This record has been added.</h5>

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

      <itemtemplate>
         <table id="posted" width=100% cellspacing=1 cellpadding=5 border=0>
         <col width=35% align="right">
         <tr>
            <td>MessageID:</td>
            <td><b><%# ( ( IDataRecord ) Container.DataItem ) [ "messageID" ] %></b></td></tr>
         . . .
         <tr>
            <td>Message:</td>
            <td><b><%# ( ( IDataRecord ) Container.DataItem ) [ "messageBody" ] %></b></td></tr>
         </table>
      </itemtemplate>

   </asp:datalist>

</asp:panel>