How to Create a Web Site with Visual Studio HTML Control Tab

So, let us begin by creating a simple website and we will take a look at the various different types of control that you have available to you in an asp.net web application. So, open up the Start menu and we will run Visual Studio 2005. I will just get rid of the start page here, and let us create a new web site.

Now, we are not going to do actually create much content in here, so let us not worry too much about the actual names that we choose in new website and I will just call a website, website 4. That seems good enough. Just make sure that the location is File System and the language is C# and also make sure that you are creating a website not a web service.

Okay, everything is fine here, so let us just click OK, and there is our simple asp.net web application. And I am going to bring the toolbox into view. We are going to have a look at the various controls in the toolbox. Let us make it nice and big. And I am going to just collapse the various different sections here. As you can see, there are a number of different tabs on the toolbox. Let us start off with the html tab, there we go.

So, each of the controls in the html tab corresponds directly with a normal html tag as you tab in a conventional html page. So for example, if I drag in an input text control onto my webpage, and it does not matter at this stage whether you drag it onto the source code or onto the design view. Choose whichever you prefer. So here, we are going to drag onto the source view. And as you can see, all we have at this stage is a simple input control. This is a basic html, it is assigned a programmatic ID to the control and specified what type of input control we have. This is a text control.

Okay. Let us see what else we have got. Well, we have a simple button, a Reset button which enables us to reset the contents of the webpage to the default values. We have a Submit button which posts the data to the web server. We have a Simple text box as you have just seen. We have an input file box, this enables you to upload files to the web server. We have a password box. This is basically an input text box but the text that you enter is represented by asterisks. So, it saves for passwords and then we have single check boxes and we have Radio buttons and we have Hidden fields.

Now, we saw an example of Hidden fields yesterday briefly, Hidden fields are the conventional way of posting data back from the web server to the web browser to convey information back to the browser although it actually making visible. We are going to see quite a lot of Hidden fields in the next lesson, when we examine the page process and model and see exactly how asp.net controls retain the state within post box.

What else we got, well we got a TextArea, as for multi line text boxes. We got the good old html table and, we will see an example of that later. Image control, if you want to drag and drop gifs or jpegs for example. We have a select control which contains a list of items, horizontal rules and that the last, we have a div. A div represents a panel on area on the screen. We will see an example of that later as well. So, there we are. Those with the set up controls available on the html tab.

As you can see, this is by no means a comprehensive list of all the different types of control you can have in an html page. Sometimes, you need to go back into the source view and manually type the control that you want on your page. So for example, if you want to add a hyperlink to the page, there is no hyperlink control here. So, you have to go to your page and manually edit the source code. So for example, I could add a hyperlink, specify a href. I just made that one up and then the text that appears on the hyperlink.

Okay, so there we are. While we are at it, just before we move on to have our good some standard tags, let us just take a look at some other properties on the basic input control. If I move my cursor into the input control and just move back a space and then press the space bar.

So Visual Studio at this point, pops up IntelliSense and it gives me a list of all the various attributes that I can set on my input control. So, some of these you do not recognize, for example, I can set the maximum length on the control. I can specify the ID. I can say whether the control is enabled or disabled and I can also specify the maximum length.

The best part of it, if you want many other properties I can set. It is quite unlimited, several functionality here. They have all various client side events that I can handle but these are client side functions that would be implemented typically in Java Script and land on the web browser, not at the web server. Just want to point out this entry here on server change. This is a server side event and we are going to talk about how server side events work with the html controls a little bit later.