This article provides an in-depth explanation of the the way in which the .NET Framework's ASP.NET Server Controls, and in particular, how DataGrids have the ability to be embedded with other controls, like text fields, DropDown lists and the like using what are known as Templates.

Templated controls are bascially compound controls and enable the programmer to create very sophisticated UI elements which combine the capabilities of its parts. An example of this would be a DataGrid that uses both DropDown lists and TickBoxes in its various columns to render information and enable a user to select options.

This article also shows, step-by-step, how to use Visual Studio .NET to create these templated controls visually, without writing code and then explores the code that is generated as a result. This should provide the reader with a solid understanding of how Controls can be used in a very flexible manner to acheive a wide variety of complex data rendering and capture.

The approach used in this article is a visual approach and shows some of Visual Studio.NET's powerful visual tools at work throughout. For those of you who are new to .NET and especially for those of you who are newer to coding, working in this fashion is one of the most effective ways around to learn how code is written. Simply let VS.NET write the code for you using the visual tools it provides, but then take the time to review that code. Keep referring to the code as you add to or change things so that you learn how the code changes.

Visual Studio .NET makes it easier than ever before to create applications, but more importantly, by using the visual methods documented here you can also learn how the code that is reated through this machanism works. This makes you a better and more valuable programmer.

We will also be looking at the ways in which VS.NET makes many development tasks simpler across the development process, including using VS.NET to create new databases and connections to those databases all from within the VS.NET environment.

By understanding how to create templated controls in a visual fashion it becomes quite easy to look at the HTML side of a page to learn how the template code is structured. This article requires Visual Studio .NET and the .NET Framework to be installed on your system in order to follow along. You will also need access to a SQL Server for which you have priveleges to create databases.

While this article is implemented in C#, I should preface this by saying that by following the steps of this article, a VB.NET programmer should be able to produce the same results.

This article is broken into three parts and each part will be presented on DotNetJunkies over the next couple of weeks:

1. Creating the SQL Database

2. Creating the ADO.NET Component

3. Creating the templated control

Getting Started - Creating an ASP.NET Project

To begin this project, launch Visual Studio .NET and create a new ASP.NET Web Application, naming it "templated_controls" in the directory of your choice, as follows:

In response to this request, VS.NET will create all required file references to the .NET Framework for a standard ASP.NET application. The result of this work will look something like this in the Solution Explorer (Ctrl + Alt + L):

By default, VS.NET will open the file "WebForm1.aspx", which you should close for now. We will come back to this page later after the back end is in place.

The Back End - Using VS.NET to Create the Database

In this example, we will be creating a DataGrid that is composed of different rows which represent choices for a user. The first column of the row is the choice. Subsequent columns represent more specific aspect of that choice. For example, let's say that you were programming an application which allows users to order computers online. You would want them to be able to order the model they want (represented in the first column) and then perhaps select the amount of memory they want (second column) and finally the size of the hard disk (third column).

The data for the application will be stored in an SQL database. Let's use VS.NET to do this quickly and easily.

Open VS.NET and locate the Server Explorer (Ctrl + Alt + S). In the server explorer, navigate to the server node where your SQL Server is located. Expland this node and drill down to the SQL Servers node and one below that, to the instance of the SQL Server. Right-click on that node and choose "New Database", as follows:

The following dialog will appear:

In which you will type the name of the database we will use to store the choices the user can make. Type "compsrus" as the name for this database and click "OK". SQL server will now create the new database from this command issued within VS.NET.

Now that the database exists, the next step is to create a connection to it so that the application we build can access that database freely.

In the same server explorer window scroll to the top of the list and right click on "Data Connections", selecting "Add Connection" from the context menu that appears, as follows:

Visual Studio .NET will then bring up a Data Link Properties window, which should be filled out as follows:

So you want to type the name of the SQL Server where the database you just created is, select your authentication method (I prefer using theSQL login for testing like this), and then select the name of the database, clicking "OK" when done.

VS.NET will then add this connection to the list of connections it knows about and you will see a new node under the Data Connections section at the top which confirms this:

Next Step - Create the tables and populate with test data

Our sample application will require the following tables:

• computer
• memory
• hard_disk

Each of these tables will contain the data from which the user can select both their choice and options.

In the Data Connections node, locate the subnode which rerpresents the database you just created. Expand this to expose the contents of the database and right-click on the Tables icon, choosing "New Table" from the context menu as follows:

VS.NET will then open a Table Design window for the SQL table directly in VS.NET:

Fill out the fields as listed above, noting that the id field stores type "int" and is  a Primary Key, or unique record that ensures the database can know for certain which row you are referring to without referring to it by name. To make the id field the Primary Key, select the column name and click on the key icon.

Also, set the identity on the id field to "Yes". This will cause the id field to automatically increment for each new record so that the server will take care of keeping the id in order.

Note that I have chosen nvarchar for the field type of the "Model" field, which is where the name of the computer model will be stored. This is the preferred field type where a variable amount of text will be stored.

Finally, ensure that both the fields have "Allow Nulls" deselected. This keeps you from being able to enter blank records.

Now save this form which will submit your request to the SQL Server and cause the tables to be built. Name this table "Models".

Repeat this process two more times for the "Memory" and "HDisk" tables, creating id fields for each which also store integers, are the primary keys, and have their indentity property set to "Yes". Name the nvarchar fields "Memory" and "HDisk", respectively. Turn off "Allow Nulls" for these tables as well.

In the end, and with a bit of luck, your server explorer should look something like this:

Now let's populate the database with the sample data that will be used to provide the choices that the user will make. Keep in mind that the templated control we build will bind dynamically to whatever we place in the database.

It's easy to do this in VS.NET - simply double-click on one of the tables underneath the connection you created and VS.NET will open the table for editing. The id field will be filled in automatically by the database for each table, so simply fill in the nvarchar field with values you think are reasonable. Below is how I filled in mine:

Once you have populated your tables, you are ready to move on to the next step - creating the stored procedures required to access this data quickly and efficiently. We wil be creating three stored procedures, one for each table.

To do this,  right click on the "Stored Procedures" icon in the Server Explorer and choose "New Stored Procedure":

This will open the Stored Procedure code editor. There are two things you need to do - name the stored procedure and add the SQL code for what it is supposed to do.

On line number 1, change the name of the Stored Procedure from "Stored Procedure1"  to "getHDISK". Enter the following SQL code into that window at line number 10 - "SELECT * FROM HDISK". as follows:

Click "File->Save" and you will then see that the Stored Procedure has been added to the database.

Now, do the same thing for the other two tables, using the following parameters:

Sproc Name	SQL Code
getMemory	SELECT * FROM MEMORY
getModels	SELECT * FROM MODELS

These two Stored Procedures are produced in the same manner as the first one - so follow the same steps. At the conclusion of this, the Stored Procedure node in the Server Explorer should look like this:

So let's review what we have done up until this point. From within VS.NET, we have created the database, defined the tables and stored procedures which will comprise the dynamic content which your templated control will render on. The next step is to create the ADO.NET connections that enable the application to access this data directly. That is exactly what we will do in .NET Anatomy Part II: Creating the ADO.NET Component.