How to Create a Web Application Using Web Control Class

Okay, so what we are going to do now is we are going to create another web application and this web application will use web controls rather than html controls. As you will see, it is generally much easier using the high level controls using the html controls. So, let us create a new website, File, New, and Website. I am going to call the website “Web Controls Demo”. There it is. Let us just switch back into design view and well, I am going to add an html table like we did last time and that is quite allowable to mix and match html controls and the web controls in the same page. It is actually quite common in fact.

So, let us drag our table control on to our surface. To make a little bit bigger, let us add some more columns, insert column to right and another one, insert column to right and close the html tab. On the standard tab, let us drag a label and put it in the first cell and we will set the various properties on the label. So we will set as ID. Now, straightly speaking, I do not really need to do this because I am not going to be interacting with the label in my code. But, I think it is a good habit to get into to always choose meaningful names even for your labels because you never know. So let us call it “NameLabel” and let us set the text property to be name. Okay, back up and let us just rectify the layer of this table a little bit. There we go. We are going to add a textbox control. Let us set the textbox ID to be “NameTextbox” and if I wanted to, I could set various other on the control but I am going to be doing that just here.

And we will add another label that represents the age. So we will call that AgeLabel and we will set it the text to be Age. Let us add another textbox where the user can actually enter the age and let us set the ID to be AgeTextbox. Let us set the other properties. Well, we will just leave the other properties as they stand. Let us just make that the right size. Let us shrink the middle column as big as just the separator. Next is nationality, let us add another label to represent nationality. I hope you are keeping up. Let us call that label nationality label and let us set the text to be nationality. Now, at this point, I want to have a drop down list box. When we were using html controls if you remember, I used a Select control and I have to manually add each option to that select control by going into the source view. Well, we do not need to do any of that when we are using web controls because there is a high level class called drop down list. We can just drag one of those directly on to our page and it makes life a lot easier.

So straight away, you will notice indifferences. These boxes just popped up, it is called a Smart tag and it enables you to set some of the common properties on the control such as data binding. So for example, I could bind this control in my list box to a data source such as a database. I could fetch the data from that database and automatically display the results in my control. That is very cool. I am not going to do that just yet there because we will cover that in another lesson. I will just hide the small tag. Right click in on the lower arrow there. What I will do instead is I will specify the items via the properties. In the properties window, there is an icon’s property. If you select that, ellipse appears. If I double click the ellipses, this is the easy way for adding fixed items to a list box. I will click the add button and I can add some items. The text property will be displayed to the user and the value property is like an internal programmatic value which represents the selected item. So let us enter some countries. We will enter Canada. It sets the text and the value to be Canada. We will add another one. We will go for Denmark and we will add just a few more. We will add in France and we will also add in Wales which is my country. We will click okay. Let us just look at the source to see what has been added. It has added an asp DropDownList control and the ID which represent the ID. Let us set the ID to something like NationalityList. The runat