AutoGenerate a Form Page Step-by-Step Without a Single Line of Code – ASP.NET WebForms in Visual Studio 2010:

Overview:

When working with ASP.NET Webforms the ability to quickly generate working forms that are bound to your datasource can be a huge advantage.

Earlier I was creating a Webform in Visual Studio 2010, and as part of the process I dragged a SQLDataSource object onto my page, hooked it up to a stored procedure I had written, and then dragged a FormView control onto the page and associated the FormView with my SQLDataSource.

The great thing is that I was able to simply click an option on my Form Designer control that populated the entire form for me. In Visual Studio it’s just that simple!

I then just had to add my own styling for the page and convert some of my fields to editable textboxes and dropdown lists. In general this is incredibly fast and simple and allows you to add content to the Web quickly.

I will go step by step through setting up a simple ASP.NET WebForms site and populating a form from a datasource (in this case a MS SQL Server Stored Procedure) without writing a single line of code.

Step by Step; Here’s How:

1. Open Visual Studio 2010
2. On the top right menu bar click File->New->Web Site
3. In the window that opens select your language of choice (I used Visual Basic), then select .NET Framework 4 & ASP.NET Web Site. Under the file system don’t forget to give your new site a name (I called mine GeneralTesting).

   

4. Once you click ‘OK’, your new site will be created.
5. Click on the Default.aspx page so that it appears in your Visual Studio Design view.
6. Now to add your datasource to the page, open the toolbox on the right hand side of your Visual Studio Design View.
7. Then Expand the node called ‘Data’ and look for the correct DataSource that you wish to add. In my case I am adding a SQLDatasource as the image below shows:

   

8. Double click the SQLDataSource to add it to your page, or you can also drag and drop it.
9. Once it is on your page, you will see the option to configure your data source. You can do so through a Wizard like interface that will take you through the steps of hooking up the SQLDataSource to a Stored Procedure or direct SQL Query. Basically just enter the name of the server and the name of your stored procedure.
10. When you have completed hooking up the SQLDataSource on your page to your database, browse back to the toolbox on the right hand side of your Visual Studio Design View.
11. Now open the Data node if it is not already open and double-click on the FormView control to add it to your page (or you can also drag it onto your page)
12. Once the FormView is on your page use the Choose DataSource select list to choose the SQLDataSource that you previously added to your page.
13. At this point your Form is hooked up to your SQLDataSource! Congratulations!
14. A final step is still needed though. Although the FormView is connected to your SQLDataSource, right now your FormView will not show anything if you choose to run the WebForm.

Now – Automatically Populate your WebForm FormView:

1. Now comes the final step… you can ask Visual Studio to automatically populate your form with data from your SQLDataSource.
2. First set the Default view for the form. There are three states that the FormView will be populated with; these being Edit, Insert, and Read-Only. Visual Studio will populate all three states with read-only label controls regardless of which you pick as your default view. In this example I will set it to the read-only setting.
3. In the right hand properties pane look for the DefaultMode option under the Behavior heading.
4. Select the ReadOnly option to set the read-only view of your FormView control as the default as the image below shows:

   

5. Now that the default view state of the FormView has been set, we can ask Visual Studio to populate our new form. Note that the FormView control has three primary States that will be auto-populated for you. These are: InsertItemTemplate, EditItemTemplate, & ItemTemplate.
6. Click on your FormView Control.
7. Then Click on the FormView Tasks tab that appears at the top right of your control.
8. Notice that now that you have hooked up a SQLDataSource to your FormView a new option appears to:  Refresh Schema
9. Click the Refresh Schema option and in the wizard that pops up enter default input parameter values for Visual Studio to use to run the Stored Procedure. See the image below for an example of what this looks like:

   

10. Voila! Once you have finished with the Refresh Schema wizard, Visual Studio will populate your form for you.

Review

Auto-populating a Web page using the FormView control is definitely a useful feature of Visual Studio. I use it often when I need to quickly create a new form for users to access. I hope this getting started tutorial has been useful!