VB.NET Uncovered: Working the Web, Page 4
Next up, we're going to create a Web page that allows the user to book an appointment with their doctor.
They simply type in their name and select a date. If they omit their name, we get very angry and display an error message.
So, let's add a new Web Form:
- Add a new Web Form (Project, Add Web Form - keep the default name of WebForm2.aspx)
Next, we're going to modify our existing page so it links to the new one:
- Navigate back to WebForm1.aspx
- Add a CheckBox to the Web Form
- Change its Text property to: Move baby move!
By default, when you click the CheckBox, the page isn't sent back to the server to be processed. But to prove it can be done (and cunningly demonstrate another concept), let's override this default behaviour:
- Change the AutoPostBack property to: True
Now let's add a little code to redirect the page when this CheckBox is clicked:
- Double-click on the CheckBox on WebForm1.aspx
- Enter the following code:
Top Tip: Instead of using the new Navigate keyword, I could have simply done a Response.Redirect("WebForm2.aspx") - similar to the old ASP format. That's because the Response, Request, Server, Session and Application objects are all still available to you. Have a play around - plus, if you have time, you might want to check out the ClientTarget, ErrorPage, IsValid, User and Validators keywords.
That's the redirection sorted. Now let's move on to designing WebForm2.aspx:
- Navigate to WebForm2.aspx
- In the Form window, type in: Name -
- Drag-and-drop a TextBox control after your 'Name' text
- On the next line, type in: Pick a date -
- Drag-and-drop the Calendar control on the next line
- Below all of this, add a Button control
- Change the Button Text property to: Make Appointment
Next, we're going to add a control that will check whether our TextBox contains a name. If it doesn't, this control becomes visible and 'raises an error'. Here goes:
- Finally, add a RequiredFieldValidator control to the bottom of the Form
- Change the Validator ErrorMessage property to: Oi, u forget ur name!
- Change the Validator ControlToValidate property to: TextBox1
Your Form should look a little like this right now:
Now, let's add just a little code behind the 'Make Appointment' button:
- Add this code behind your Button:
Button1.Text = "Appointment for " & TextBox1.Text & " booked on " & Calendar1.SelectedDate
And that's it! Here, we've built an application that requires the user to input their name (if not, an error appears) plus select a date. And when they click the 'Make Appointment', its Text property verifies the details you've entered.
Top Tip: You can actually check whether control validation has succeeded in your code by using the IsValid property. Check out the help for more information.
- Press F5 to test your page
So, check out your new work! First off, check the box on WebForm1.aspx - then, on WebForm2.aspx, try clicking the button without entering a name. Next, enter a name and select a date - notice how the Calendar Web Control automatically highlights everything for you. Finally, click the Button and stand in awe of your accomplishments!
Top Tip: If the CheckBox doesn't redirect you, there could be a problem with WebForm2.aspx. When I visited my page directly, I received an "Invalid Base Class" error message. I found the solution was to 'compile' my page inside of VB.NET - by opening WebForm2.aspx and select Build, Build from the menus. This seems to be a common problem and should be fixed by Beta Two.
Of course, we could be doing anything behind that Button. Adding the users details to a database, retrieving information based on their input, verifying their details and 'logging them in'. Anything!
Ahhh, the power!! <evilLaugh> Hahahaha... muhahahah! </evilLaugh>
Ahem. Oh boy.