VB.NET Uncovered: Working the Web, Page 3
Wanna see something really scary?
Well, you might want to check out part six, our VB.NET object oriented programming instalment. Or a Twilight Zone flick. Or my hair at six in the morning.
But not this section - oh no - this ASP.NET thing is quite literally a doddle. And just to prove it, let's throw away the boring theory and jump straight in with a little practical:
- Launch VB.NET
- Create a new Web Application
Note that the location is no longer a file path - it's a HTTP address, probably that of your local IIS-running machine. In the instance above, I've created GroovyWeb on http://ABYDOS - which means my final project will be available at http://ABYDOS/GroovyWeb/
After a little whizzing and whirring, WebForm1.aspx should appear and your screen should look a little like this:
Now, we're going to create an application that accepts a name in a text box and places it in a label on the form. Simple, yes - and not exactly something that'll win you Innovator of the Year award - but it'll demonstrate a whole bunch of new concepts.
- Drag-and-drop a Label, TextBox and Button onto your Web Form - in that order - separate them onto individual lines if possible
Top Tip: Note that in the designer, you can't 'draw out' controls as you can with Win Forms. Tsk, sacrifices, eh? Nevertheless, you still get access to the related properties via the Properties window - allowing you to change names, style, etc
Your form right now should look a little like this:
Before we add a little code, let's browse through the HTML that makes up the page we've just created:
- Change the Web Form mode from Design to HTML, by clicking the appropriate button at the bottom of your form
Now this is interesting. First off, look at that first, yellow-highlighted line. Among other things, this tells your .ASPX page where its code lies - as you can see, Codebehind="WebForm1.vb" - we'll stumble across this file in a few minutes.
Now, controls such as the labels and text boxes, which we'd usually define with regular HTML tags - here have the <asp:...> </asp:...> tags. This is so they're identifiable as ASP.NET "controls" that can accessed in code, etc.
Top Tip: Even though they may have
Much of the code here however looks like regular HTML. And if you're used to that sort of thing, you should have no problem understanding it.
- Switch back to Design mode
Right, enough messing around. Time to add a little code:
- Double-click your Button
You'll be shown the Web Form code window. Whoops, once again a bunch of pre-written code just to confuse you. Some of it is quite useful - such as the code behind the Load event, which includes sample code to detect whether the page has already been loaded or this is a 'post back'.
Top Tip: Notice that the code window is called WebForm1.vb? Ring a bell? Please, please, tell me it does...
Have a play around.
Erm, later. For now:
- Type in the following code:
Label1.Text = TextBox1.Text
When I first tried this out, it all felt pretty eerie. This is just the sort of code you'd expect to write in a regular Visual Basic application - however having worked with ASP and CGI and the like, I know doing it on the Web is soooo much more difficult.
Well, let me surprise you.
- Hit F5 to 'run' your new Web page
Top Tip: When I hit F5, I get an annoying message about my security permissions being set incorrectly. It's wrong, coz they're set all proper like. If you have the same issue, simply hit OK, load Internet Explorer and access the page manually - for example, my page has the address: http://ABYDOS/GroovyWeb/WebForm1.aspx
Now, it may initially take a good few seconds for your page to load. That's because the Web server needs to compile your code - it does this automatically the first time your page is accessed. Any later changes mean another recompile - however once again, this is all automatically done on 'first access'.
- Enter your favourite colour on the Web Form, then click that button:
Almost immediately, your form should post the data and come back with something like this:
Hurrah! Look at that! In just one line of code, you've created something that would take a regular ASP programmer a good while longer to create.
Top Tip: Try viewing the page source at this point (click View, Source). Wow, that's all been automatically generated for you! Note the hidden field, __VIEWSTATE - that's the encoded data I was referring to earlier. Right now, it contains information such as values of the controls and such. As you perform more complex operations, you'll notice it grows and grows in size - however performance is still apparently better than with previous Session methods
Well, that's our Hello World finished with. Next, let's move onto something a little more complicated - a brief look at Web Controls, plus a few of the Web Form events.