Setup
Most Windows computers can host Internet Information Services (IIS). It is not installed by default but can be activated using the "Turn Windows features on or off" dialogue box. You can get to that either through the Control Panel application or by searching for it.
You will need to select down to the optional features to activate the ASP option.
By default ASP expects VBScript to be the default server side language, this can be changed when you start IIS.
ECMAScript is a synonym for Javascript or Jscript.
To make life easier for debugging, you can set "Send Errors To Browser" to true. This sends informative error messages rather than "This is broke". You do not want to have this set in a live environment as it makes your site extremely vulnerable to attack.
Hello World
This is a simple ASP page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ASP Test page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
So far, so HTML.
What you can do is run code at the server rather than just serve up a fixed page.
Hello World .ASP
The difference between a static HTML page and an ASP page is the Active part.
To define code that will run on the server, you need to put it between <% %>.
You can also include other files within your page. This is very useful as you can define standard parts of your web site in one location, and then reuse them on different pages.
For this you use the #include command inside HTML comments:
<!-- #include file="include-filename.asp" -->
The timeline of inclusion is that the included files are added to the file before any code is executed, so it is not possible to conditionally include file content - this does not work:
<% if(condition){%>
<!-- #include file="this-file.asp" -->
<% } %>
Remember this, otherwise you will get annoyed with it.
The first "active" ASP page will extend the previous example to print out the time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ASP Hello World page</title>
</head>
<body>
<h1>Hello World</h1>
<p>It is <%t=Date();
Response.Write(t);
%></p>
</body>
</html>
When you first go to this page, it will display the current time. When you refresh the page, it will have the new (current) time.
The Response.Write adds the parameter content to the page content (similar to a print or console.write command). It is possible to shorten a Response.Write(x) to <%=x%>.
Hello You
Now the previous example did make the page more dynamic, but does not really make it interactive.
For that we need two new ideas:
The Form.
A form is a block of HTML. If there is a Submit button, any selected, entered or clicked values are sent back to the web address identified by the action attribute. If no address is provided, the values are sent back to the address of the page.
The page with the form does not need to be an ASP page, for that matter neither does the target page - however the target page does need to be one that can make use of the information being sent.
This form is simple and made up of four parts:
- An enclosing form tag, it has an empty action attribute as it will be sending the data back to itself.
- A text label asking you to enter your name.
- An input of type text box for you to enter your name. It has a name attribute to identify it when it is sent. It also has a value attribute. It might seem counter-intuitive to give it a value as it is an input, but this will also put your entered name in the box after you send it (just in case you made a mistake).
- An input of type Submit. This has a value that will be displayed on the button. This sends the information to the address in the form's action attribute.
The Request object.
The Request object contains all the assorted stuff that is being sent to the web page (such as the information being entered on the form).
In this case we will be asking it for the value of the myname parameter, which is supplied by the tag with the name attribute "myname". If no parameter is supplied, the value of Request("myname") is an empty string.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ASP Form test page</title>
</head>
<body>
<h1>Hello
<%
personName = Request("myname");
if(personName!=""){
Response.Write(personName)
}
%>
</h1>
<form action="">
Please enter your name: <input type="text" name="myname" value="<%=personName%>" />
<input type="submit" value="Enter" name="go" />
</form>
</body>
</html>
When you first visit the page it will say Hello, and ask for your name.
When you enter your name and click on Enter, the display will change to say Hello <your name>, it will also add your name into the input text box.
You will also notice the URL will have changed to include the name and values of the parameters (the elements within the form):
http://localhost/form.asp?myname=Fred&go=Enter
You can actually tailor the parameters in the address bar of the browser, try changing Fred to Ned.
This can be useful, but it does rather expose the workings of your cunningly crafted web site.
This is because the default behaviour of the form tag is to use the method "GET". This does have some advantages, you can see that it is working, and you can edit the input in the address bar (great while testing). The disadvantages are that it can look messy, and that the parameters are on display and are limited by length.
The alternative is the method "POST". This packages up the parameters' names and values and sends it separately from the address.
Change the form tag's attributes to include a method = "POST" attribute:
<form action="" method="POST">
Save and refresh your page in your browser.
The problem is that you can enter the new name, but it continues to display the old one. This is because the address includes the existing (GET) parameters, and it overrides POST parameters.
Clear the existing information from the address, and it will behave as you expect.
It is important to be aware that a value sent via GET will override a value sent by POST.
There is a way round that, but that is for a second post.
