Click here to download the source code for this lesson.

In this lesson, I am going to demonstrate how to use the ASP.NET FormView to display data from the database in some TextBox controls with one line of C# code.  This is a very useful technique because it reduces the amount of redundant database integration code that you have to write in your ASP.NET applications, especially for such a common scenario like taking data from the database and putting it into some TextBox controls.

For this example I am going to setup a web form named Customer_Edit.aspx which has three TextBox controls: first name, last name and e-mail address.  This web form is designed to allow the user to edit information about a customer and then save the information back to the database.  For this lesson, I will focus on how to retrieve the customer’s information from the database and display it in the web form.  In the next lesson, I will build on this example web form and show you how to save the information back to the database using an SQL Update.

The web form Customer_Edit.aspx needs to know which customer to retrieve the data for.  I am passing the unique customerid (a number) to the web form by using a QueryString from another web form like this: “Customer_Edit.aspx?customerid=35″.  Notice that I passed the unique customerid of 35.  The Customer_Edit.aspx web form will need to query the database for the customer that has that customerid.  The data is stored in a database table named “customer”.

Before I get started with the technical walkthrough in this lesson, I want to explain a little bit about the ASP.NET controls that I am going to use.  There are three of them.  The first one is the TextBox control, which you are probably already familiar with.  A TextBox displays information in an editable box so that the user can change the information.  The second one is the FormView control.  A FormView is used when you want to integrate your visual controls (in this example the TextBox) with a database and don’t want to write much code.  In some cases, you don’t have to write any code at all when using a FormView.  In this example, I only had to write one line of C# code to integrate my TextBox controls with some database data.  The FormView controls the logic of retrieving the database data and placing it in the TextBox controls.  Of course in order for that to work, you have to do some configuration of the FormView.  You can think of the FormView as an intermediary between your visual ASP.NET controls and the database.

The third and final control that I use is the SqlDataSource control.  I introduced this control in some previous lessons, but just in case you are not familiar with it, the SqlDataSource is what actually queries the database.  This is another tool that helps minimize how much redundant C# code that you have to write.  In the early versions of ASP.NET, these controls didn’t exist yet, and you had to write code to retrieve data from the database and put it into some visual ASP.NET controls.

The technique of taking the database data and putting it into some visual ASP.NET controls without writing any code is called data “binding”.  When you bind a TextBox to a database column, you are essentially telling ASP.NET that you want to link that TextBox with a specific data value from the database.  You will see how data binding works below.

Okay, lets get to the technical part and see how to integrate all of these ASP.NET server controls.  The first thing that I did was to setup my Customer_Edit.aspx web form just like a regular form so I dragged three Label and three TextBox controls onto the designer and then set some of the properties.  I also added some validation controls to make sure that the user enters good data.  The important thing to note here is that I setup my web form just like any other regular web form, nothing special yet.

Next, I dragged an SqlDataSource control onto my web form and set the ConnectionString and SelectQuery properties.  The SelectQuery specifies the actual SQL statement that will execute to retrieve the database data.  I used the following SelectQuery: “select * from customer where customer_id = @customer_id”.  Notice that I am using a named parameter @customer_id.  The value for this parameter will get filled in dynamically at execution time.  In my example, I set it up to get the value from the QueryString variable “customerid”.  Just like I mentioned earlier, this will come from the URL that was used to bring up this web form “Customer_Edit.aspx?customerid=35″.  Notice that the database query that I used will return one record from the database because the customer_id value in the customer table is unique for each customer.

Once the SqlDataSource was setup, then I needed a way to take the columns of the query and bind them to my TextBox controls so that they will display the database data.  This is where the FormView control is used.  I dragged a FormView control (found in the Data controls) from the toolbox onto my web form just underneath my TextBox controls.  Then I set the DataSource ID property of the FormView to “UpdateDataSource”, which is the ID of the SqlDataSource control that I placed on the form earlier.  This step links the FormView with the database query.

Before I go any further, I want to briefly talk about the three different modes of the FormView server control: ReadOnly mode, Insert mode and Edit mode.  ReadOnly mode means that there won’t be any modification to the data source.  The data will just be displayed and the user cannot make edits.  ReadOnly mode is the default mode when you use a FormView.  Insert mode allows the user to add a new record to the data source.  This will most likely be linked to a database Insert query.  Edit mode allows the user to edit an existing record in the data source.  This is most likely linked to a database Update query.  In this lesson I am going to use Edit mode of the FormView.  This is because in the next lesson I show an example of how to Update a database record by using the FormView control.

Let’s get back to the lesson.  Next I switched to Source view of the web form.  In Source view I moved the TextBox and Label controls inside the FormView tag.  Then I added a special ASP.NET tag inside the FormView tag and around the TextBox and Label controls: the <EditItemTemplate> tag.  This special tag is used with the FormView tag to link the the TextBox controls with a database update command.  When you put controls inside the EditItemTemplate you are telling ASP.NET what your web form will look like when the FormView is in Edit mode.  Here is an excerpt from the source code for this lesson:

<asp:FormView ID="FormView1" runat="server"
 DataSourceID="UpdateDataSource" OnItemUpdated="FormView1_Updated"
 DataKeyNames="customer_id">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server"
 Text="First Name:"></asp:Label>

Now to bind the TextBox controls to the database record I had to use the following property value in my first name TextBox: Text=’<%# Bind(”first_name”) %>’.

<asp:TextBox ID="txtFirstName" runat="server"
MaxLength="50"
Text='<%# Bind("first_name") %>'></asp:TextBox>

That links (binds) the TextBox to the database column first_name.  Remember that I am querying the database table customer and that table contains the columns first_name, last_name and email_address.  I also did a similar binding for the other two TextBox controls.

As a final step and in order to get everything working correctly I had to make sure that when my web form comes up, the FormView is in Edit mode, not in ReadOnly mode.  Again, this is because I want the user to be able to edit the values in the TextBox controls and save the information back to the database.  In order to put the FormView in Edit mode, I added one line of code to the Page_Load method of the web form:

FormView1.DefaultMode = FormViewMode.Edit;

Click here to watch an example video where I bind database data to TextBox controls using the FormView and SqlDataSource controls. 

Stay tuned for the next lesson, where I will build on what we discussed here and cover how to save the edits that the user makes back to the database using the FormView and SqlDataSource controls.