How to Add Different Types of HTML Controls and Logical Code in ASP.NET

Now, what properties do we have? We have the ability to specify whether it is a multiple selection. We can also specify various styles but you notice, we cannot actually specify what the items are for the select box. In order to do that, we have to unfortunately tip back into the source view and we have to manually add the options by typing html mark up at this point. So, I am going to do some type in here and let us just move the mouse out of the way. Let me change the first option to be “Please Select_” and then we will add some more options to represent several countries. So, here we go, Option and we will go for some countries in alphabetical order. The first country will be Albania and then we will add another option to represent the next country and that will be Armenia. This could take some time. Then the next option is going to be Argentina and then just to save the default, we will have one more options and that will be Zaire. We can just skip the few in the middle. Let us flip back to the design mode and see how that looks.

Okay so clearly, things are looking back. The next step on the next set of cells, we come to enable the user to specify whether they can use Visual C#, Visual Basic or Visual J# as programming languages. So first of all, in this cell, I am going to type some static text, languages. Now we use a checkbox control for each language that the user might be able to program in. So that is the first one. It is either no one and let us have one more, there we are. So, we have three checkboxes. Let us just look at the properties. Well the ID’s are checkbox 1, checkbox 2, and checkbox 3 so let us just change that. So, let us change the first checkbox to be VB Checkbox. Now, you will notice there is no way unfortunately to have been up to specify what the actual text is but we want to associate with that checkbox so we are going to go back in the source view to add that text in, in the moment.

So before we get that, let us just set the ID for each of the other checkboxes. That is the second checkbox and I will set each ID to be VCCheckbox. Finally, we will select the third checkbox and we will set each ID to be VJCheckbox as in Visual J#. Okay then, let us go back to source view and in the source view, let us put some text to each checkbox. So, if we can find the input control for the VBCheckbox and then after that control, we will type some static text, Visual Basic, there we go. I want each control to appear on the separate line so I am going to put a line break in. Now, let us put in some text for the next checkbox so that is going to be Visual C#. We will have a line break in as well and then finally for the last checkbox, we will have some text. We will have Visual J#. Let us check how that appears in the designer, very good. That is looking much better. And one thing I do want to change, if you notice the Age and the language text, I want that text to appear vertically aligned in this table row.

So, to do that, there is a Valign property we need to set on the table row. We can use these at the bottom to select the table row, hand click the option, select the tag. So, that selects the TR tag. Now, I can go to the properties in the property window and if I scroll down, I should find there is Valign property that is and I can set the Valign property to top. Okay, so that aligns the controls vertically at the top of that table row which is what I wanted to achieve. Now, in the next table row, currently we have five columns in the table row and what I want to do is display a label which expands the entire row. So, the easiest way to do that if I select the TR element and then right click on that table row and merge cells So, that has effectively merged the five columns into a single cell so that I can put a large textbox label into that area. Now then, if we go to the toolbox and look for the label command, you will find the recent one. We have to add the label command manually in the source view. We need to go back to the source page. Find the table column that we just set up and in here, I am going to create