HTML Links - Create Bookmarks


HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.


Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example

First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example

<a href="#C4">Jump to Chapter 4</a>

You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>


Chapter Summary

  • Use the id attribute (id="value") to define bookmarks in a page
  • Use the href attribute (href="#value") to link to the bookmark

HTML Exercises

Test Yourself With Exercises

Exercise:

Use the correct HTML to make the text below into a link to "default.html".

>Visit our HTML tutorial.


HTML Link Tags

Tag Description
Defines a hyperlink

For a complete list of all available HTML tags, visit our .


 
 

ASP stands for Active Server Pages

ASP is a development framework for building web pages.

ASP supports many different development models:

·         Classic ASP

·         ASP.NET Web Forms

·         ASP.NET MVC

·         ASP.NET Web Pages

·         ASP.NET API

·         ASP.NET Core


The ASP Technology

ASP and ASP.NET are server side technologies.

Both technologies enable computer code to be executed by an Internet server.

When a browser requests an ASP or ASP.NET file, the ASP engine reads the file, executes any code in the file, and returns the result to the browser.


Classic ASP - Active Server Pages

ASP (aka Classic ASP) was introduced in 1998 as Microsoft's first server side scripting language.

Classic ASP pages have the file extension .asp and are normally written in VBScript.


ASP.NET

ASP.NET was released in 2002 as a successor to Classic ASP.

ASP.NET pages have the extension .aspx and are normally written in C# (C sharp).

ASP.NET 4.6 is the latest official version of ASP.NET.

ASP.NET 5 was expected to be an important redesign of ASP.NET.

However, the development of ASP.NET 5 was stopped in favor of .



ASP.NET Web Pages

ASP.NET Web Pages is an SPA application model (Single Page Application).

The SPA model is quite similar to PHP and Classic ASP.

ASP.NET Web Pages is being merged into the new ASP.NET Core.


ASP.NET MVC

ASP.NET MVC is an MVC application model (Model-View-Controller).

ASP.NET MVC is being merged into the new ASP.NET Core.

ASP.NET MVC is not covered in this tutorial.


My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

 


ASP.NET Web API

ASP.NET API is an API application model (Application Programming Interface).

ASP.NET API is being merged into the new ASP.NET Core.

ASP.NET API is not covered in this tutorial.


ASP.NET Web Forms

ASP.NET Web Forms is an event driven application model.

ASP.NET Web Forms is not a part of the new ASP.NET Core.

ASP.NET Web Forms is not covered in this tutorial.


ASP.NET Core

ASP.NET Core was released in 2016.

ASP.NET Core merges ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages into one application framework.

ASP.NET Core is not covered in this tutorial.

 

 
ASP HOME

Easy Learning with "Run Example"

Our "Run Example" tool displays the ASP.NET code and the HTML output simultaneously.

Click on the "Run Example" button to see how it works:

Web Pages Example

<html>
<body>
     <h1>Hello Web Pages</h1>
     <p>The time is 
@DateTime.Now</p>
</body>
</html>

 


ASP.NET Web Pages

Web Pages is one of many programming models for creating ASP.NET web sites and web applications.

Web Pages provides an easy way to combine HTML, CSS, and server code:

  • Easy to learn, understand, and use
  • Uses an SPA application model (Single Page Application)
  • Similar to PHP and Classic ASP
  • VB (Visual Basic) or C# (C sharp) scripting languages

In addition, Web Pages applications are easily extendable with programmable helpers for databases, videos, graphics, social networking and more.


Web Pages Tutorial

If you are new to ASP.NET, Web Pages is a perfect place to start.

In this Web Pages tutorial you will learn how to combine HTML, CSS, JavaScript and server code, using server code written in VB or C# .

You will also learn how to extend your web pages with programmable Web Helpers.



Web Pages Examples

Learn by examples!

Because ASP.NET code is executed on the server, you cannot view the code in your browser. You will only see the output as plain HTML.

At W3Schools every example displays the hidden ASP.NET code. This makes it easier for you to understand how it works.

 


Web Pages References

At the end of this tutorial you will find a complete set of ASP.NET references with objects, components, properties and methods.

WebPages Intro

ASP.NET Web Pages use Razor markup with C# or VB code


Razor Markup

Razor is a simple markup syntax for embedding server code (C# or VB) into ASP.NET web pages.

Example

<!DOCTYPE html>

<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>Web Pages Demo</title>
</head>
<body>
     <h1>Hello Web Pages</h1>
     <p>The time is 
@DateTime.Now</p>
</body>
</html>

The page above contains both ordinary HTML markup and Razor markup.


Razor Syntax for C#

  • C# code blocks are enclosed in @{ ... }
  • Inline expressions (variables or functions) start with @
  • Code statements end with semicolon
  • Variables are declared with the var keyword, or the datatype (int, string, etc.)
  • Strings are enclosed with quotation marks
  • C# code is case sensitive
  • C# files have the extension .cshtml

C# Example

<!-- Single statement block -->
@{ var myMessage = "Hello World"; }

<!-- Inline expression or variable -->
<p>The value of myMessage is: 
@myMessage</p>

<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay;
}

<p>The greeting is: 
@greetingMessage</p>



Razor Syntax for VB

  • VB code blocks are enclosed in @Code ... End Code
  • Inline expressions (variables or functions) start with @
  • Variables are declared with the Dim keyword
  • Strings are enclosed with quotation marks
  • VB code is not case sensitive
  • VB files have the extension .vbhtml

VB Example

<!-- Single statement block  --> 
@Code dim myMessage = "Hello World" End Code
 
<!-- Inline expression or variable --> 
<p>The value of myMessage is: 
@myMessage</p> 
 
<!-- Multi-statement block --> 
@Code
dim greeting = "Welcome to our site!" 
dim weekDay = DateTime.Now.DayOfWeek 
dim greetingMessage = greeting & " Today is: " & weekDay
End Code


<p>The greeting is: 
@greetingMessage</p>

 


More About C# and Visual Basic

If you want to learn more about Razor, and the C# and Visual Basic programming languages:

Go to the of this tutorial.

 

WebPages Razor

With Web Pages it is easy to create a web site with a consistent layout.


A Consistent Look

On the Internet you will discover many web sites with a consistent look and feel:

  • Every page have the same header
  • Every page have the same footer
  • Every page have the same style and layout

With Web Pages this can be done very efficiently. You can have reusable blocks of content (content blocks), like headers and footers, in separate files.

You can also define a consistent layout for all your pages, using a layout template (layout file).


Content Blocks

Many websites have content that is displayed on every page (like headers and footers).

With Web Pages you can use the @RenderPage() method to import content from separate files.

Content block (from another file) can be imported anywhere in a web page, and can contain text, markup, and code, just like any regular web page.

Using common headers and footers as an example, this saves you a lot of work. You don't have to write the same content in every page, and when you change the header or footer files, the content is updated in all your pages.

This is how it looks in code:

Example

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>



Using a Layout Page

In the previous section, you saw that including the same content in many web pages is easy.

Another approach to creating a consistent look is to use a layout page. A layout page contains the structure, but not the content, of a web page. When a web page (content page) is linked to a layout page, it will be displayed according to the layout page (template).

The layout page is just like a normal web page, except from a call to the @RenderBody() method where the content page will be included.

Each content page must start with a Layout directive.

This is how it looks in code:

Layout Page:

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 W3Schools. All rights reserved.</p>
</body>
</html>

Any Web Page:

@{Layout="Layout.cshtml";}

<h1>Welcome to W3Schools</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>


D.R.Y. - Don't Repeat Yourself

With two ASP.NET tools, Content Blocks and Layout Pages, you can give your web applications a consistent look.

These tools also save you a lot of work, since you don't have to repeat the same information on all pages. Centralizing markup, style, and code makes web applications much more manageable and easier to maintain.


Preventing Files from Being Browsed

With ASP.NET, files with a name that starts with an underscore cannot be browsed from the web.

If you want to prevent your content blocks or layout files from being viewed by your users, rename the files to:

_header.cshtml

_footer.cshtml

_Layout.cshtml


Hiding Sensitive Information

With ASP.NET, the common way to hide sensitive information (database passwords, email passwords, etc.) is to keep the information in a separate file named "_AppStart".

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}

WebPages Layout

This chapter is about folders and folder paths.


In this chapter you will learn:

  • About Logical and Physical folder structures
  • About Virtual and Physical names
  • About web URLs and Paths

Logical Folder Structure

Below is a typical folder structure for an ASP.NET web pages web site:

Folders

  • The "Account" folder contains logon and security files
  • The "App_Data" folder contains databases and data files
  • The "Images" folder contains images
  • The "Scripts" folder contains browser scripts
  • The "Shared" folder contains common files (like layout and style files)

Physical Folder Structure

The physical structure for the "Images" folder at the website above might look like this on a computer:

C:JohnnyDocumentsMyWebSitesDemoImages


Virtual and Physical Names

From the example above:

The virtual name of a web picture might be "Images/pic31.jpg".

But the physical name is "C:JohnnyDocumentsMyWebSitesDemoImagespic31.jpg"



URLs and Paths

URLs are used to access files from the web:

The URL corresponds to a physical file on a server: C:MyWebSitesw3schoolshtmlhtml5_intro.asp

A virtual path is shorthand to represent physical paths. If you use virtual paths, you can move your pages to a different domain (or server) without having to update the paths.

URL

https://onedoubt.com/

Server name

onedoubt.com

Virtual path

/html/html5_intro.asp

Physical path

onedoubt

The root on a disk drive is written like C:, but the root on a web site is  / (forward slash).

The virtual path of a web folder is (almost) never the same as the physical folder.

In your code you will, reference both the physical path and the virtual path, depending on what you are coding.

ASP.NET has 3 tools for working with folder paths: the ~ operator, the Server.MapPath method, and the Href method.


The ~ Operator

To specify the virtual root in programming code, use the ~ operator.

If you use the ~ operator, instead of a path, you can move your website to a different folder or location without changing any code:

var myImagesFolder = "~/images";
var myStyleSheet = "~/styles/StyleSheet.css";

 


The Server.MapPath Method

The Server.MapPath method converts a virtual path (/default.cshtml) to a physical path that the server can understand (C:JohnnyMyWebSitedDemodefault.cshtml).

You will use this method when you need to open data files located on the server (data files can only be accessed with a full physical path):

var pathName = "~/dataFile.txt";
var fileName = Server.MapPath(pathName);

You will learn more about reading from (and writing to) data files on the server in the next chapter of this tutorial.


The Href Method

The Href method converts a path used in the code to a path that the browser can understand (the browser cannot understand the ~ operator).

You use the Href method to create paths to resources like image files, and CSS files.

You will often use this method in HTML <a>, <img>, and <link> elements:

@{var myStyleSheet = "~/Shared/Site.css";}

<!-- This creates a link to the CSS file. -->
<link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />

<!-- Same as : -->
<link rel="stylesheet" type="text/css" href="/Shared/Site.css" />

The Href method is a method of the WebPage Object.

WebPages Folders
 

This chapter is about the global pages AppStart and PageStart.


Before Web Startup: _AppStart

Most server side code are written inside individual web pages. For example, if a web page contains an input form, the web page typically contains server code for reading the data.

However, by creating a page named _AppStart in the root of your site, you can have startup code executed before the site starts. If this page exists, ASP.NET runs it the first time any page in the site is requested.

Typical use for _AppStart is startup code and initialization of global values like counters and global names.

Note 1: _AppStart should have the same file extension as your web pages, like: _AppStart.cshtml. 

Note 2: _AppStart has an underscore prefix. Because of this, the files cannot be browsed directly.


Before Every Page: _PageStart

Just like _AppStart runs before your site starts, you can write code that runs before any page in each folder.

For each folder in your web, you can add a file named _PageStart.

Typical use for _PageStart is setting the layout page for all pages in a folder, or checking that a user is logged in before running a page.


How Does it Work?

The following diagram shows how it works:

PageStart

When a request comes in, ASP.NET checks whether _AppStart exists. If so, and this is the first request to the site, _AppStart runs.

Then ASP.NET checks whether _PageStart exists. If so, _PageStart runs, before the requested page.

If you include a call to RunPage() inside _PageStart you specify where you want the requested page to run. If not, the _PageStart runs before the requested page.

 

 
WebPages Global

A form is a section of an HTML document where you put input controls (text boxes, check boxes, radio buttons, and pull-down lists).


Creating an HTML Input Page

Razor Example

<html>
<body> 
@{
if (IsPost) { 
string companyname = Request["CompanyName"]; 
string contactname = Request["ContactName"]; 
<p>You entered: <br />
Company Name: 
@companyname <br />
Contact Name: 
@contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
} 
</body> 
</html>



Razor Example - Displaying Images

Suppose you have 3 images in your image folder, and you want to display images dynamically by the users choice.

This is easily done by a little Razor code.

If you have an image called "Photo1.jpg" in your images folder on your web site, you can display the image using an HTML <img> element like this:

<img src="images/Photo1.jpg" alt="Sample" />

The example below shows how to display a selected picture which the user selects from a drop-down list:  

Razor Example

@{
var imagePath="";
if (Request["Choice"] != null)
   {imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
  <option value="Photo1.jpg">Photo 1</option>
  <option value="Photo2.jpg">Photo 2</option>
  <option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{
<p>
<img src="
@imagePath" alt="Sample" />
</p>

}
 
</form>
</body>
</html>

Example explained

The server creates a variable called imagePath.

The HTML page has a drop-down list (a <select> element) named Choice. It lets the user select a friendly name (like Photo 1), and passes a file name (like Photo1.jpg) when the page is submitted to the web server.

The Razor code reads the value of Choice by Request["Choice"]. If it has a value the code constructs a path to the image images/Photo1.jpg, and stores it in the variable imagePath.

In the HTML page there is an <img> element to display the image. The src attribute is set to the value of the imagePath variable when the page displays.

The <img> element is in an if block to prevent trying to display an image with no name (like the first time the page is displayed).

 

WebPages Forms

Web Pages is much often about Objects.


The Page Object

You have already seen some Page Object methods in use:

@RenderPage("header.cshtml")

@RenderBody()

In the previous chapter you saw two Page Object properties being used (IsPost, and Request):

If (IsPost) {

if (Request["Choice"] != null) {


Some Page Object Methods

Method

Description

href

Builds a URL using the specified parameters

RenderBody()

Renders the portion of a content page that is not within a named section (In layout pages)

RenderPage(page)

Renders the content of one page within another page

RenderSection(section)

Renders the content of a named section (In layout pages)

Write(object)

Writes the object as an HTML-encoded string

WriteLiteral

Writes an object without HTML-encoding it first.



Some Page Object Properties

Property

Description

IsPost

Returns true if the HTTP data transfer method used by the client is a POST request

Layout

Gets or sets the path of a layout page

Page

Provides property-like access to data shared between pages and layout pages

Request

Gets the HttpRequest object for the current HTTP request

Server

Gets the HttpServerUtility object that provides web-page processing methods


The Page Property (of the Page Object)

The Page property of the Page Object, provides property-like access to data shared between pages and layout pages.

You can use (add) your own properties to the Page property:

  • Page.Title
  • Page.Version
  • Page.anythingyoulike

The pages property is very helpful. For instance, it makes it possible to set the page title in content files, and use it in the layout file:

Home.cshtml

@{
Layout="~/Shared/Layout.cshtml";
Page.Title="Home Page"
}


<h1>Welcome to W3Schools</h1>

<h2>Web Site Main Ingredients</h2>

<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
<p>A Style Sheet (Site.css)</p>

Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<title>
@Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>

WebPages Objects

This chapter is about working with text files.


Working with Text Files

Sometimes you will want to access data stored in text files.

Text files used to store data is often called flat files.

Common flat file formats are .txt, .xml, and .csv (comma-delimited values).

In this chapter you will learn:

  • How to read and display data from a text file

Add a Text File Manually

In the example to follow, you will need a text file to work with.

On your web site, if you don't have an App_Data folder, create one.

In the App_Data folder, create a new file named Persons.txt.

Add the following content to the file:

Persons.txt

George,Lucas
Steven,Spielberg
Alfred,Hitchcock



Displaying Data from a Text File

The example below shows how to display data from a text file:  

Example

@{
var dataFile = Server.MapPath("~/App_Data/Persons.txt");
Array userData = File.ReadAllLines(dataFile);
}

<!DOCTYPE html>
<html>
<body>

<h1>Reading Data from a File</h1>
@foreach (string dataLine in userData)
{
  foreach (string dataItem in dataLine.Split(','))
  {@dataItem <text>&nbsp;</text>}

  <br />
}
</body>
</html>

Example explained

Server.MapPath finds the exact text file path.

File.ReadAllLines opens the text file and reads all lines from the file into an array.

For each dataItem in each dataline of the array the data is displayed.


Displaying Data from an Excel File

With Microsoft Excel, you can save a spreadsheet as a comma separated text file (.csv file). When you do so, each row in the spreadsheet is saved as a text line, and each data column is separated by a comma.

You can use the example above to read an Excel .csv file (just change the file name to the name of the Excel file).

 

WebPages Files

This chapter is about working with databases.


What We Will Do

In this chapter we will:

  • Create a web page to list data from a database

Displaying Data from Database

With Web Pages, you can easily display data from a database.

You can connect to an existing database, or create a new database from scratch.

In this example we will connect to an existing SQL Server Compact database.


Adding a Customers Page

In the "DemoWebPages" folder, create a new CSHTML file named "Products.cshtml".

Replace the code in the file with the code from the example below:

Products.cshtml

@{
var db = Database.Open("SmallBakery"); 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
}

<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table> 
<tr>
<th>Id</th> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr>
@foreach(var row in db.Query(selectQueryString))
{

<tr> 
<td>
@row.Id</td> 
<td>
@row.Name</td> 
<td>
@row.Description</td> 
<td align="right">
@row.Price</td> 
</tr> 
}
</table> 
</body> 
</html>


Example Explained

The Database.Open(name) method will connect to a database in two steps:

First, it searches the application's App_Data folder for a database that matches the name parameter without the file-name extension.

If no file is found, it looks for a "connection string" in the application's Web.config file.

(A connection string contains information about how to connect to a database. It can include a file path, or the name of an SQL database, with full user name and password)

This two-step search makes it possible to test the application with a local database, and run the application on a web host using a connection string.



ASP.NET Database Object Reference

Method

Description

Database.Execute(SQLstatement [parameters])

Executes SQLstatement (with optional parameters) such as INSERT, DELETE, or UPDATE and returns a count of affected records.

Database.GetLastInsertId()

Returns the identity column from the most recently inserted row.

Database.Open(filename)
Database.Open(connectionStringName)

Opens either the specified database file or the database specified using a named connection string from the Web.config file.

Database.OpenConnectionString(connectionString)

Opens a database using the connection string. (This contrasts with Database.Open, which uses a connection string name.)

Database.Query(SQLstatement[, parameters])

Queries the database using SQLstatement (optionally passing parameters) and returns the results as a collection.

Database.QuerySingle(SQLstatement [, parameters])

Executes SQLstatement (with optional parameters) and returns a single record.

Database.QueryValue(SQLstatement [, parameters])

Executes SQLstatement (with optional parameters) and returns a single value.

 

WebPages Databases

Web Helpers greatly simplifies web development and common programming tasks.


ASP.NET Helpers

ASP.NET helpers are components that can be accessed by single lines of Razor code.

You can build your own helpers using Razor syntax stored as .cshtml files, or use built-in ASP.NET helpers.

You will learn how to use Razor helpers in the next chapters of this tutorial.

Below is a short description of some useful Razor helpers:


The WebGrid Helper

The WebGrid helper simplifies the way to display data:

  • Automatically sets up an HTML table to display data
  • Supports different options for formatting
  • Supports paging (First, next, previous, last) through data
  • Supports sorting by clicking on column headings

The Chart Helper

The "Chart Helper" can display chart images of different types with many formatting options and labels.

 chartchart

The Chart helper can display data from arrays , from databases, or from files.


The WebMail Helper

The WebMail helper provides functions for sending email messages using SMTP (Simple Mail Transfer Protocol).


The WebImage Helper

The WebImage helper provides functionality to manage images in a web page.

Keywords: flip, rotate, resize, watermark.



Third Party Helpers

With Razor you can take advantage of built-in or third party helpers to simplify the use of email, databases, multimedia, and social networks as well as many other issues like navigation and web security.


Analytics (Google)

Helper

Description

Analytics.GetGoogleHtml(webPropertyId)

Renders the Google Analytics JavaScript code for the specified ID.

Analytics.GetStatCounterHtml(projectsecurity)

Renders the StatCounter Analytics JavaScript code for the specified project.

Analytics.GetYahooHtml(account)

Renders the Yahoo Analytics JavaScript code for the specified account.


Bing

Helper

Description

Bing.SearchBox([boxWidth])

Passes a search to Bing. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the _AppStart page.

Bing.AdvancedSearchBox([, boxWidth] [, resultWidth] [, resultHeight]
  [, themeColor] [, locale]
)

Displays Bing search results in the page with optional formatting. To specify the site to search and a title for the search box, you can set the Bing.SiteUrl and Bing.SiteTitle properties. Normally you set these properties in the _AppStart page.


Crypto

Helper

Description

Crypto.Hash(string [, algorithm])
Crypto.Hash(bytes [, algorithm])

Returns a hash for the specified data. The default algorithm is sha256.


Facebook

Helper

Description

Facebook.LikeButton(href [, buttonLayout] [, showFaces] [, width] [, height]
[, action] [, font] [, colorScheme] [, refLabel]
)

Lets Facebook users make a connection to pages.


FileUpload

Helper

Description

FileUpload.GetHtml([initialNumberOfFiles] [allowMoreFilesToBeAdded]
  [
includeFormTag] [, addText] [uploadText])

Renders UI for uploading files.


GamerCard

Helper

Description

GamerCard.GetHtml(gamerTag)

Renders the specified Xbox gamer tag.


Gravatar Object Reference

Helper

Description

Gravatar.GetHtml(email [, imageSize] [, defaultImage] [, rating]
  [, imageExtension] [, attributes]
)

Renders the Gravatar image for the specified email address.


Json

Helper

Description

Json.Encode(object)

Converts a data object to a string in the JavaScript Object Notation (JSON) format.

Json.Decode(string)

Converts a JSON-encoded input string to a data object that you can iterate over or insert into a database.


LinkShare

Helper

Description

LinkShare.GetHtml(pageTitle [, pageLinkBack] [, twitterUserName]
  [, additionalTweetText] [, linkSites]
)

Renders social networking links using the specified title and optional URL.


ModelState

Helper

Description

ModelStateDictionary.AddError(keyerrorMessage)

Associates an error message with a form field. Use the ModelState helper to access this member.

ModelStateDictionary.AddFormError(errorMessage)

Associates an error message with a form. Use the ModelState helper to access this member.

ModelStateDictionary.IsValid

Returns true if there are no validation errors. Use the ModelState helper to access this member.


ObjectInfo

Helper

Description

ObjectInfo.Print(value [, depth] [, enumerationLength])

Renders the properties and values of an object and any child objects.


Recaptcha

Helper

Description

Recaptcha.GetHtml([, publicKey] [, theme] [, language] [, tabIndex])

Renders the reCAPTCHA verification test.

ReCaptcha.PublicKey
ReCaptcha.PrivateKey

Sets public and private keys for the reCAPTCHA service. Normally you set these properties in the _AppStart page.

ReCaptcha.Validate([, privateKey])

Returns the result of the reCAPTCHA test.

   

ServerInfo

WebPages Helpers

WebGrid - One of many useful ASP.NET Web Helpers.


Doing the HTML Yourself

In a previous chapter, you displayed database data by using razor code, and doing the HTML markup yourself:

Database Example

@{
var db = Database.Open("SmallBakery"); 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
}

<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table> 
<tr>
<th>Id</th> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr>
@foreach(var row in db.Query(selectQueryString))
{

<tr> 
<td>
@row.Id</td> 
<td>
@row.Name</td> 
<td>
@row.Description</td> 
<td style="text-align:right">
@row.Price</td> 
</tr> 
}
</table> 
</body> 
</html>



Using The WebGrid Helper

Using the WebGrid helper is an easier way to display data.

The WebGrid helper:

  • Automatically sets up an HTML table to display data
  • Supports different options for formatting
  • Supports paging through data
  • Supports Sorting by clicking on column headings

WebGrid Example

@{ 
var db = Database.Open("SmallBakery") ; 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
var data = db.Query(selectQueryString); 
var grid = new WebGrid(data); 
}

<html> 
<head> 
<title>Displaying Data Using the WebGrid Helper</title> 
</head> 
<body> 
<h1>Small Bakery Products</h1> 
<div id="grid"> 
@grid.GetHtml()
</div> 
</body> 
</html>


WebGrid Object Reference

Helper

Description

WebGrid(data)

Creates a new WebGrid object using data from a query.

WebGrid.GetHtml()

Renders markup to display data in an HTML table.

WebGrid.Pager()

Renders a pager for the WebGrid object.

 

WebPages WebGrid

ASP.NET Web Pages - The Chart Helper

 

The Chart Helper - One of many useful ASP.NET Web Helpers.


The Chart Helper

In the previous chapters, you learned how to use an ASP.NET "Helper".

You learned how to display data in a grid using the "WebGrid Helper".

This chapter explains how to display data in graphical form, using the "Chart Helper".

The "Chart Helper" can create chart images of different types with many formatting options and labels. It can create standard charts like area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts.

 chart chart

The data you display in a chart can be from an array, from a database, or from data in a file.


Chart From an Array

The example below shows the code needed to display a chart from an array of values:

Example

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

- new Chart creates a new chart object and sets its width and height

- the AddTitle method specifies the chart title

- the AddSeries method adds data to the chart

- the chartType parameter defines the type of chart

- the xValue parameter defines x-axis names

- the yValues parameter defines the y-axis values

- the Write() method displays the chart 



Chart From Database Data

You can run a database query and then use data from the results to create a chart:

Example

@{ 
var db = Database.Open("SmallBakery"); 
var dbdata = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

- var db = Database.Open opens the database (and assigns the database object to the variable db)

- var dbdata = db.Query runs a database query and stores the result in dbdata

- new Chart creates a chart new object and sets its width and height

- the AddTitle method specifies the chart title

- the DataBindTable method binds the data source to the chart

- the Write() method displays the chart 

An alternative to using the DataBindTable method is to use AddSeries (See previous example). DataBindTable is easier to use, but AddSeries is more flexible because you can specify the chart and data more explicitly:

Example

@{ 
var db = Database.Open("SmallBakery"); 
var dbdata = db.Query("SELECT Name, Price FROM Product"); 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Chart From XML Data

The third option for charting is to use an XML file as the data for the chart:

Example

@using System.Data;

@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet.Tables[0]);
var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Sales Per Employee")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Chart Object Reference

Helper Description
Chart(width, height [, template] [, templatePath]) Initializes a chart.
Chart.AddLegend([title] [, name]) Adds a legend to a chart.
Chart.AddSeries([name] [, chartType] [, chartArea]
  [, axisLabel] [, legend] [, markerStep] [, xValue]
  [, xField] [, yValues] [, yFields] [, options])
Adds a series of values to the chart.

 

 
WebPages Charts

The WebMail Helper - One of many useful ASP.NET Web Helpers.

With the WebMail object you can easily send emails from a web page.


The WebMail Helper

The WebMail Helper makes it easy to send an email from a web application using SMTP (Simple Mail transfer Protocol).


Scenario: Email Support

To demonstrate the use of email, we will create an input page for support, let the user submit the page to another page, and send an email about the support problem.


First: Edit Your AppStart Page

If you have built the Demo application in this tutorial, you already have a page called _AppStart.cshtml with the following content:

_AppStart.cshtml

@{
WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);
}

To initiate the WebMail helper, add the the following WebMail properties to your AppStart page:

_AppStart.cshtml

@{
WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);
WebMail.SmtpServer = "smtp.example.com";
WebMail.SmtpPort = 25;
WebMail.EnableSsl = false;
WebMail.UserName = "[email protected]";
WebMail.Password = "password-goes-here";
WebMail.From = "[email protected]";

}

Properties explained:

SmtpServer: The name the SMTP server that will be used to send the emails.

SmtpPort: The port the server will use to send SMTP transactions (emails).

EnableSsl: True, if the server should use SSL (Secure Socket Layer) encryption.

UserName: The name of the SMTP email account used to send the email.

Password: The password of the SMTP email account.

From: The email to appear in the from address (often the same as UserName).



Second: Create an Email Input Page

Then create an input page, and name it Email_Input:

Email_Input.cshtml

<!DOCTYPE html>
<html>
<body>
<h1>Request for Assistance</h1>

<form method="post" action="EmailSend.cshtml">
<label>Username:</label>
<input type="text" name="customerEmail" />
<label>Details about the problem:</label>
<textarea name="customerRequest" cols="45" rows="4"></textarea>
<p><input type="submit" value="Submit" /></p>
</form>

</body>
</html>

 

The purpose of the input page is to collect information, then submit the data to a new page that can send the information as an email.


Third: Create An Email Send Page

Then create the page that will be used to send the email, and name it Email_Send:

Email_Send.cshtml

@{ // Read input
var customerEmail = Request["customerEmail"];
var customerRequest = Request["customerRequest"];
try
{
// Send email
WebMail.Send(to:"[email protected]", subject: "Help request from - " + customerEmail, body: customerRequest );
}
catch (Exception ex )
{
<text>@ex</text>
}
}


WebMail Object Reference - Properties

Properties

Description

SmtpServer

The name the SMTP server that will send the emails

SmtpPort

The port the server will use to send SMTP emails

EnableSsl

True, if the server should use SSL encryption

UserName

The name of the SMTP account used to send the email

Password

The password of the SMTP account

From

The email to appear in the from address


WebMail Object Reference - Methods

Method

Description

Send()

Sends an email message to an SMTP server for delivery

The Send() method has the following parameters:

Parameter

Type

Description

to

String

The Email recipients (separated by semicolon)

subject

String

The subject line

body

String

The body of the message

And the following optional parameters:

Parameter

Type

Description

from

String

The email of the sender

cc

String

The cc emails (separated by semicolon)

filesToAttach

Collection

Filenames

isBodyHtml

Boolean

True if the email body is in HTML

additionalHeaders

Collection

Additional headers


Technical Data

Name

Value

Class

System.Web.Helpers.WebMail

Namespace

System.Web.Helpers

Assembly

System.Web.Helpers.dll


Initializing the WebMail Helper

To use the WebMail helper, you need access to an SMTP server. SMTP is the "output" part of email. If you use a web host, you probably already know the name of the SMTP server. If you work in a corporate network, your IT department can give you the name. If you are working at home, you might be able to use your ordinary email provider.

 In order to send an email you will need:

  • The name of the SMTP server
  • The port number (most often 25)
  • An email user name
  • An email password

In the root of your web, create a page (or edit the page ) named _AppStart.cshtml.

Put the following code inside the file:

_AppStart.cshtml

@{
WebMail.SmtpServer = "smtp.example.com";
WebMail.SmtpPort = 25;
WebMail.EnableSsl = false;
WebMail.UserName = "[email protected]";
WebMail.Password = "password";
WebMail.From = "[email protected]"
}

The code above will run each time the web site (application) starts. It feeds your WebMail Object with initial values.

Please substitute:

smtp.example.com with the name the SMTP server that will be used to send the emails.

25 with the port number the server will use to send SMTP transactions (emails).

false with true, if the server should use SSL (Secure Socket Layer) encryption.

[email protected] with the name of the SMTP email account used to send emails.

password with the password of the SMTP email account.

john@example with the email to appear in the from address.

You don't have to initiate the WebMail object in your AppStart file, but you must set these properties before you call the WebMail.Send() method.

 

ASP.NET Web Pages

Description

The WebSecurity Object provides security and authentication for ASP.NET Web Pages applications.

With the WebSecurity object you can create user accounts, login and logout users, reset or change passwords, and more.


WebSecurity Object Reference - Properties

Properties

Description

CurrentUserId

Gets the ID for the current user

CurrentUserName

Gets the name of the current user

HasUserId

Returns true if the current has a user ID

IsAuthenticated

Returns true if the current user is logged in



WebSecurity Object Reference - Methods

Method

Description

ChangePassword()

Changes the password for a user

ConfirmAccount()

Confirms an account using a confirmation token

CreateAccount()

Creates a new user account

CreateUserAndAccount()

Creates a new user account

GeneratePasswordResetToken()

Generates a token that can be sent to as user by email

GetCreateDate()

Gets the time the specified membership was created

GetPasswordChangeDate()

Gets the date and time when password was changed

GetUserId()

Gets a user ID from a user name

InitializeDatabaseConnection()

Initializes the WebSecurity system (database)

IsConfirmed()

Checks if a user is confirmed

IsCurrentUser()

Checks if the current user matches a user name

Login()

Logs the user in by setting a token in the cookie

Logout()

Logs the user out by removing the token cookie

RequireAuthenticatedUser()

Exits the page if the user is not an authenticated user

RequireRoles()

Exits the page if the user is not a part of the specified roles

RequireUser()

Exits the page if the user is not the specified user

ResetPassword()

Changes a user's password using a token

UserExists()

Checks if a given user exists



Initializing the WebSecurity Database

You must create or initialize an WebSecurity database before you can use the WebSecurity object in your code.

In the root of your web, create a page (or edit the page ) named _AppStart.cshtml.

Put the following code inside the file:

_AppStart.cshtml

@{
WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);
}

The code above will run each time the web site (application) starts. It initializes the WebSecurity database.

"Users" is the name of the WebSecurity database (Users.sdf).

"UserProfile" is the name of the database table that contains the user profile information.

"UserId" is the name of the column that contains the user IDs (primary key).

"Email" is the name of the column that contains user names.

The last parameter true is a boolean value indicating that the user profile and membership tables should be created automatically if they don't exist, otherwise false.

Although true indicates automatic creation of the database tables, the database itself will not be created automatically. It must exist.


The WebSecurity Database

The UserProfile table contains one record for each user, with a user ID (primary key) and the user's name (email):

UserId

Email

1

[email protected]

[email protected]

3

[email protected]

The Membership table will contain membership information about when the user was created and if (and when) the membership was confirmed.

Much like this (some columns are not shown):

User
Id

Create
Date

Confirmation
Token

Is
Confirmed

Last
Password
Failure

Password

Password
Change

1

12.04.2012 16:12:17

NULL

True

NULL

AFNQhWfy....

12.04.2012 16:12:17


Simple Membership Configuration

You might get errors using the WebSecurity object, if your site is not configured to use the ASP.NET Web Pages membership system SimpleMembership.

This can occur if a hosting provider's server is configured differently than your local server. To fix this, add the following element to the site's Web.config file:

<appSettings>
<add key="enableSimpleMembership" value="true" />
</appSettings>

 

WebPages Security

1. Use the Latest Version of ASP.NET

Before you continue, make sure your hosting computer runs the latest version of ASP.NET (4.0 or 4.5).


2. Copy the Web Folders

Copy your website (all folders and content) from your development computer to an application folder on your remote hosting computer (server).

If your application contains data, don't copy the data (see point 4 below).


3. The DLL Files

Make sure the bin folder, on your remote hosting computer, contains the same dll files as on your development computer.

After copying the bin folder, it should contain files like this:

Microsoft.Web.Infrastructure.dll
NuGet.Core.dll
System.Web.Helpers.dll
System.Web.Razor.dll
System.Web.WebPages.Administration.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
WebMatrix.Data.dll
WebMatrix.WebData


4. Copy Your Data

If your application contains data or a database. For instance an SQL Server Compact database (a .sdf file in App_Data folder), consider the following:

Do you want to publish your test data to the remote server?

Most likely not.

If you have test data on your development computer, it may overwrite production data on your remote hosting computer.

If you have to copy an SQL database (.sdf file), perhaps you should delete everything in the database, and then copy the empty .sdf file from your development computer to the server.

THAT'S IT. GOOD LUCK !

 

WebPages Publish

ASP.NET Web Pages - Examples in C# and VB


Learn ASP.NET Web Pages by C# and Visual Basic examples.


Examples in C# Examples in VB

Basic Web Pages





Basic Web Pages





Basic C#











Basic VB











Working with Databases




Working with Databases




Using the Chart Helper






Using the Chart Helper







ASP.NET Web Pages - Classes

 

ASP.NET Classes Reference

Method Description
AsBool(), AsBool(true|false) Converts a string value to a Boolean value (true/false). Returns false or the specified value if the string does not represent true/false.
AsDateTime(), AsDateTime(value) Converts a string value to date/time. Returns DateTime. MinValue or the specified value if the string does not represent a date/time.
AsDecimal(), AsDecimal(value) Converts a string value to a decimal value. Returns 0.0 or the specified value if the string does not represent a decimal value.
AsFloat(), AsFloat(value) Converts a string value to a float. Returns 0.0 or the specified value if the string does not represent a decimal value.
AsInt(), AsInt(value) Converts a string value to an integer. Returns 0 or the specified value if the string does not represent an integer.
Href(path [, param1 [, param2]]) Creates a browser-compatible URL from a local file path, with optional additional path parts.
Html.Raw(value) Renders value as HTML markup instead of rendering it as HTML-encoded output.
IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt() Returns true if the value can be converted from a string to the specified type.
IsEmpty() Returns true if the object or variable has no value.
IsPost Returns true if the request is a POST. (Initial requests are usually a GET.)
Layout Specifies the path of a layout page to apply to this page.
PageData[key], PageData[index], Page Contains data shared between the page, layout pages, and partial pages in the current request. You can use the dynamic Page property to access the same data, as in the following example:
RenderBody() (Layout pages) Renders the content of a content page that is not in any named sections.
RenderPage(path, values)
RenderPage(path[, param1 [, param2]])
Renders a content page using the specified path and optional extra data. You can get the values of the extra parameters from PageData by position (example 1) or key (example 2).
RenderSection(sectionName [, required = true|false]) (Layout pages) Renders a content section that has a name. Set required to false to make a section optional.
Request.Cookies[key] Gets or sets the value of an HTTP cookie.
Request.Files[key] Gets the files that were uploaded in the current request.
Request.Form[key] Gets data that was posted in a form (as strings). Request[key] checks both the Request.Form and the Request.QueryString collections.
Request.QueryString[key] Gets data that was specified in the URL query string. Request[key] checks both the Request.Form and the Request.QueryString collections.
Request.Unvalidated(key)
Request.Unvalidated().QueryString|Form|Cookies|Headers[key]
Selectively disables request validation for a form element, query-string value, cookie, or header value. Request validation is enabled by default and prevents users from posting markup or other potentially dangerous content.
Response.AddHeader(name, value) Adds an HTTP server header to the response.
Response.OutputCache(seconds [, sliding] [, varyByParams]) Caches the page output for a specified time. Optionally set sliding to reset the timeout on each page access and varyByParams to cache different versions of the page for each different query string in the page request.
Response.Redirect(path) Redirects the browser request to a new location.
Response.SetStatus(httpStatusCode) Sets the HTTP status code sent to the browser.
Response.WriteBinary(data [, mimetype]) Writes the contents of data to the response with an optional MIME type.
Response.WriteFile(file) Writes the contents of a file to the response.
@section(sectionName) { content } (Layout pages) Defines a content section that has a name.
Server.HtmlDecode(htmlText) Decodes a string that is HTML encoded.
Server.HtmlEncode(text) Encodes a string for rendering in HTML markup.
Server.MapPath(virtualPath) Returns the server physical path for the specified virtual path.
Server.UrlDecode(urlText) Decodes text from a URL.
Server.UrlEncode(text) Encodes text to put in a URL.
Session[key] Gets or sets a value that exists until the user closes the browser.
ToString() Displays a string representation of the object's value.
UrlData[index] Gets additional data from the URL (for example, /MyPage/ExtraData).



 
WebPages Classes

Razor is not a programming language. It's a server side markup language.


What is Razor?

Razor is a markup syntax that lets you embed server-based code (Visual Basic and C#) into web pages.

Server-based code can create dynamic web content on the fly, while a web page is written to the browser. When a web page is called, the server executes the server-based code inside the page before it returns the page to the browser. By running on the server, the code can perform complex tasks, like accessing databases.

Razor is based on ASP.NET, and designed for creating web applications. It has the power of traditional ASP.NET markup, but it is easier to use, and easier to learn.


Razor Syntax

Razor uses a syntax very similar to PHP and Classic ASP.

Razor:

<ul>
@for (int i = 0; i < 10; i++) {
<li>@i</li>
}
</ul>

PHP:

<ul>
<?php
for ($i = 0; $i < 10; $i++) {
echo("<li>$i</li>");
}
?>
</ul>

Classic ASP:

<ul>
<%for i = 0 to 10%>
<li><%=i%></li>
<%next%>
</ul> 

Razor Helpers

ASP.NET helpers are components that can be accessed by single lines of Razor code.

You can build your own helpers using Razor syntax, or use built-in ASP.NET helpers.

Below is a short description of some useful Razor helpers:

  • Web Grid
  • Web Graphics
  • Google Analytics
  • Facebook Integration
  • Twitter Integration
  • Sending Email
  • Validation

Razor Programming Languages

Razor supports both C# (C sharp) and VB (Visual Basic).

Razor Intro

Razor supports both C# (C sharp) and VB (Visual Basic).


Main Razor Syntax Rules for C#

  • Razor code blocks are enclosed in @{ ... }
  • Inline expressions (variables and functions) start with @
  • Code statements end with semicolon
  • Variables are declared with the var keyword
  • Strings are enclosed with quotation marks
  • C# code is case sensitive
  • C# files have the extension .cshtml

C# Example

<!-- Single statement block -->
@{ var myMessage = "Hello World"; }

<!-- Inline expression or variable -->
<p>The value of myMessage is: 
@myMessage</p>

<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}

<p>The greeting is: 
@greetingMessage</p>


Main Razor Syntax Rules for VB

  • Razor code blocks are enclosed in @Code ... End Code
  • Inline expressions (variables and functions) start with @
  • Variables are declared with the Dim keyword
  • Strings are enclosed with quotation marks
  • VB code is not case sensitive
  • VB files have the extension .vbhtml

Example

<!-- Single statement block  --> 
@Code dim myMessage = "Hello World" End Code
 
<!-- Inline expression or variable --> 
<p>The value of myMessage is: 
@myMessage</p> 
 
<!-- Multi-statement block --> 
@Code
dim greeting = "Welcome to our site!" 
dim weekDay = DateTime.Now.DayOfWeek 
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
End Code


<p>The greeting is: 
@greetingMessage</p>



How Does it Work?

Razor is a simple programming syntax for embedding server code in web pages.

Razor syntax is based on the ASP.NET framework, the part of the Microsoft.NET Framework that's specifically designed for creating web applications.  

The Razor syntax gives you all the power of ASP.NET, but is using a simplified syntax that's easier to learn if you're a beginner, and makes you more productive if you're an expert.

Razor web pages can be described as HTML pages with two kinds of content: HTML content and Razor code.

When the server reads the page, it runs the Razor code first, before it sends the HTML page to the browser. The code that is executed on the server can perform tasks that cannot be done in the browser, for example accessing a server database. Server code can create dynamic HTML content on the fly, before it is sent to the browser. Seen from the browser, the HTML generated by server code is no different than static HTML content.

ASP.NET web pages with Razor syntax have the special file extension cshtml (Razor using C#) or vbhtml (Razor using VB).


Working With Objects

Server coding often involves objects.

The "DateTime" object is a typical built-in ASP.NET object, but objects can also be self-defined, a web page, a text box, a file, a database record, etc.

Objects may have methods they can perform. A database record might have a "Save" method, an image object might have a "Rotate" method, an email object might have a "Send" method, and so on.

Objects also have properties that describe their characteristics. A database record might have a FirstName and a LastName property (among others).

The ASP.NET DateTime object has a Now property (written as DateTime.Now), and the Now property has a Day property (written as DateTime.Now.Day). The example below shows how to access some properties of the DateTime object:

Example

<table border="1">
<tr>
<th width="100px">Name</th>
<td width="100px">Value</td>
</tr>
<tr>
<td>Day</td><td>
@DateTime.Now.Day</td>
</tr>
<tr>
<td>Hour</td><td>
@DateTime.Now.Hour</td>
</tr>
<tr>
<td>Minute</td><td>
@DateTime.Now.Minute</td>
</tr>
<tr>
<td>Second</td><td>
@DateTime.Now.Second</td>
</tr>
</td>
</table>


If and Else Conditions

An important feature of dynamic web pages is that you can determine what to do based on conditions.

The common way to do this is with the if ... else statements:

Example

@{
var txt = "";
if(DateTime.Now.Hour > 12)
  {txt = "Good Evening";}
else
  {txt = "Good Morning";}
}
<html>
<body>
<p>The message is 
@txt</p>
</body>
</html>


Reading User Input

Another important feature of dynamic web pages is that you can read user input.

Input is read by the Request[] function, and posting (input) is tested by the IsPost condition:

Example

@{
var totalMessage = "";
if(IsPost)
    {
    var num1 = Request["text1"];
    var num2 = Request["text2"];
    var total = num1.AsInt() + num2.AsInt();
    totalMessage = "Total = " + total;
    }
}

<html>
<body style="background-color: beige; font-family: Verdana, Arial;">
<form action="" method="post">
<p><label for="text1">First Number:</label><br>
<input type="text" name="text1" /></p>
<p><label for="text2">Second Number:</label><br>
<input type="text" name="text2" /></p>
<p><input type="submit" value=" Add " /></p>
</form>
<p>
@totalMessage</p>
</body>
</html>

 

Razor Syntax

Variables are named entities used to store data.


Variables

Variables are used to store data.

The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters.

A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc.

Variables are declared using the var keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.

Examples

// Using the var keyword:
var greeting = "Welcome to W3Schools";
var counter = 103;
var today = DateTime.Today;

// Using data types:
string greeting = "Welcome to W3Schools";
int counter = 103;
DateTime today = DateTime.Today;


Data Types

Below is a list of  common data types:

Type

Description

Examples

int

Integer (whole numbers)

103, 12, 5168

float

Floating-point number

3.14, 3.4e38

decimal

Decimal number (higher precision)

1037.196543

bool

Boolean

true, false

string

String

"Hello W3Schools", "John"



Operators

An operator tells ASP.NET what kind of command to perform in an expression.

 The C# language supports many operators. Below is a list of common operators:

Operator

Description

Example

=

Assigns a value to a variable.

i=6

+
-
*
/

Adds a value or variable.
Subtracts a value or variable.
Multiplies a value or variable.
Divides a value or variable.

i=5+5
i=5-5
i=5*5
i=5/5

+=
-=

Increments a variable.
Decrements a variable.

i += 1
i -= 1

==

Equality. Returns true if values are equal.

if (i==10)

!=

Inequality. Returns true if values are not equal.

if (i!=10)

<
>
<=
>=

Less than.
Greater than.
Less than or equal.
Greater than or equal.

if (i<10)
if (i>10)
if (i<=10)
if (i>=10)

+

Adding strings (concatenation).

"w3" + "schools"

.

Dot. Separate objects and methods.

DateTime.Hour

()

Parenthesis. Groups values.

(i+5)

()

Parenthesis. Passes parameters.

x=Add(i,5)

[]

Brackets. Accesses values in arrays or collections.

name[3]

!

Not. Reverses true or false.

if (!ready)

&&
||

Logical AND.
Logical OR.

if (ready && clear)
if (ready || clear)


Converting Data Types

Converting from one data type to another is sometimes useful.

The most common example is to convert string input to another type, such as an integer or a date.

As a rule, user input comes as strings, even if the user entered a number. Therefore, numeric input values must be converted to numbers before they can be used in calculations.

Below is a list of common conversion methods:

Method

Description

Example

AsInt()
IsInt()

Converts a string to an integer.

if (myString.IsInt())
  {myInt=myString.AsInt();}

AsFloat()
IsFloat()

Converts a string to a floating-point number.

if (myString.IsFloat())
  {myFloat=myString.AsFloat();}

AsDecimal()
IsDecimal()

Converts a string to a decimal number.

if (myString.IsDecimal())
  {myDec=myString.AsDecimal();}

AsDateTime()
IsDateTime()

Converts a string to an ASP.NET DateTime type.

myString="10/10/2012";
myDate=myString.AsDateTime();

AsBool()
IsBool()

Converts a string to a Boolean.

myString="True";
myBool=myString.AsBool();

ToString()

Converts any data type to a string.

myInt=1234;
myString=myInt.ToString();

 

Razor C# Variables

Statements can be executed repeatedly in loops.


For Loops

If you need to run the same statements repeatedly, you can program a loop.

If you know how many times you want to loop, you can use a for loop. This kind of loop is especially useful for counting up or counting down:

Example

<html>
<body>
@for(var i = 10; i < 21; i++)
    {<p>Line @i</p>}
</body>
</html>


For Each Loops

If you work with a collection or an array, you often use a for each loop.

A collection is a group of similar objects, and the for each loop lets you carry out a task on each item. The for each loop walks through a collection until it is finished.

The example below walks through the ASP.NET Request.ServerVariables collection.

Example

<html>
<body>
<ul>
@foreach (var x in Request.ServerVariables)
    {<li>@x</li>}
</ul>
</body>
</html>



While Loops

The while loop is a general purpose loop.

A while loop begins with the while keyword, followed by parentheses, where you specify how long the loop continues, then a block to repeat.

While loops typically add to, or subtract from, a variable used for counting.

In the example below, the += operator adds 1 to the variable i, each time the loop runs.

Example

<html>
<body>
@{
var i = 0;
while (i < 5)
    {
    i += 1;
    <p>Line @i</p>
    }
}

</body>
</html>


Arrays

An array is useful when you want to store similar variables but don't want to create a separate variable for each of them:

Example

@{
string[] members = {"Jani", "Hege", "Kai", "Jim"};
int i = Array.IndexOf(members, "Kai")+1;
int len = members.Length;
string x = members[2-1];
}
<html>
<body>
<h3>Members</h3>
@foreach (var person in members)
{
<p>@person</p>
}

<p>The number of names in Members are 
@len</p>
<p>The person at position 2 is 
@x</p>
<p>Kai is now in position 
@i</p>
</body>
</html>

 

Razor C# Loops

Programming Logic: Execute code based on conditions.


The If Condition

C# lets you execute code based on conditions.

To test a condition you use an if statement. The if statement returns true or false, based on your test:

  • The if statement starts a code block
  • The condition is written inside parenthesis
  • The code inside the braces is executed if the test is true

Example

@{var price=50;}
<html>
<body>
@if (price>30)
    {
    <p>The price is too high.</p>
    }
</body>
</html>


The Else Condition

An if statement can include an else condition.

The else condition defines the code to be executed if the condition is false.

Example

@{var price=20;}
<html>
<body>
@if (price>30)
  {
  <p>The price is too high.</p>
  }
else
  {
  <p>The price is OK.</p>
  }
</body>
</html>

Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".



The Else If Condition

Multiple conditions can be tested with an else if condition:

Example

@{var price=25;}
<html>
<body>
@if (price>=30)
  {
  <p>The price is high.</p>
  }
else if (price>20 && price<30)
  {
  <p>The price is OK.</p>
  }
else
  {
  <p>The price is low.</p>
  }   
</body>
</html>

In the example above, if the first condition is true, it will be executed.

If not, then if the next condition is true, this condition will be executed.

You can have any number of else if conditions.

If none of the if and else if conditions are true, the last else block (without a condition) covers "everything else".


Switch Conditions

switch block can be used to test a number of individual conditions:

Example

@{
var weekday=DateTime.Now.DayOfWeek;
var day=weekday.ToString();
var message="";
}
<html>
<body>
@switch(day)
{
case "Monday":
    message="This is the first weekday.";
    break;
case "Thursday":
    message="Only one day before weekend.";
    break;
case "Friday":
    message="Tomorrow is weekend!";
    break;
default:
    message="Today is " + day;
    break;
}
<p>@message</p>
</body>
</html>

The test value (day) is in parentheses. Each individual test condition has a case value that ends with a colon, and any number of code lines ending with a break statement. If the test value matches the case value, the code lines are executed.

A switch block can have a default case (default:) for "everything else" that runs if none of the cases are true.

 

Razor C# Logic

Variables are named entities used to store data.


Variables

Variables are used to store data.

The name of a variable must begin with an alphabetic character and cannot contain whitespace or reserved characters.

A variable can be of a specific type, indicating the kind of data it stores. String variables store string values ("Welcome to W3Schools"), integer variables store number values (103), date variables store date values, etc.

Variables are declared using the Dim keyword, or by using the type (if you want to declare the type), but ASP.NET can usually determine data types automatically.

Examples

// Using the Dim keyword:
Dim greeting = "Welcome to W3Schools"
Dim counter = 103
Dim today = DateTime.Today

// Using data types:
Dim greeting As String = "Welcome to W3Schools"
Dim counter As Integer = 103
Dim today As DateTime = DateTime.Today


Data Types

Below is a list of  common data types:

Type

Description

Examples

integer

Integer (whole numbers)

103, 12, 5168

double

64 bit floating-point number

3.14, 3.4e38

decimal

Decimal number (higher precision)

1037.196543

boolean

Boolean

true, false

string

String

"Hello W3Schools", "John"



Operators

An operator tells ASP.NET what kind of command to perform in an expression.

 The VB language supports many operators. Below is a list of common operators:

Operator

Description

Example

=

Assigns a value to a variable.

i=6

+
-
*
/

Adds a value or variable.
Subtracts a value or variable.
Multiplies a value or variable.
Divides a value or variable.

i=5+5
i=5-5
i=5*5
i=5/5

+=
-=

Increments a variable.
Decrements a variable.

i += 1
i -= 1

=

Equality. Returns true if values are equal.

if i=10

<> 

Inequality. Returns true if values are not equal.

if <>10

<
>
<=
>=

Less than.
Greater than.
Less than or equal.
Greater than or equal.

if i<10
if i>10
if i<=10
if i>=10

&

Adding strings (concatenation).

"w3" & "schools"

.

Dot. Separate objects and methods.

DateTime.Hour

()

Parenthesis. Groups values.

(i+5)

()

Parenthesis. Passes parameters.

x=Add(i,5)

()

Parenthesis. Accesses values in arrays or collections.

name(3)

Not

Not. Reverses true or false.

if Not ready

And
OR

Logical AND.
Logical OR.

if ready And clear
if ready Or clear

AndAlso
orElse

Extended Logical AND.
Extended Logical OR.

if ready AndAlso clear
if ready OrElse clear


Converting Data Types

Converting from one data type to another is sometimes useful.

The most common example is to convert string input to another type, such as an integer or a date.

As a rule, user input comes as strings, even if the user entered a number. Therefore, numeric input values must be converted to numbers before they can be used in calculations.

Below is a list of common conversion methods:

Method

Decryptions

Example

AsInt()
IsInt()

Converts a string to an integer.

if myString.IsInt() then
   myInt=myString.AsInt()
end if

AsFloat()
IsFloat()

Converts a string to a floating-point number.

if myString.IsFloat() then
   myFloat=myString.AsFloat()
end if

AsDecimal()
IsDecimal()

Converts a string to a decimal number.

if myString.IsDecimal() then
   myDec=myString.AsDecimal()
end if

AsDateTime()
IsDateTime()

Converts a string to an ASP.NET DateTime type.

myString="10/10/2012"
myDate=myString.AsDateTime()

AsBool()
IsBool()

Converts a string to a Boolean.

myString="True"
myBool=myString.AsBool()

ToString()

Converts any data type to a string.

myInt=1234
myString=myInt.ToString()

 

Razor VB Variables

Statements can be executed repeatedly in loops.


For Loops

If you need to run the same statements repeatedly, you can program a loop.

If you know how many times you want to loop, you can use a for loop. This kind of loop is especially useful for counting up or counting down:

Example

<html>
<body>
@For i=10 To 21
    @<p>Line #@i</p>
Next i
</body>
</html>


For Each Loops

If you work with a collection or an array, you often use a for each loop.

A collection is a group of similar objects, and the for each loop lets you carry out a task on each item. The for each loop walks through a collection until it is finished.

The example below walks through the ASP.NET Request.ServerVariables collection.

Example

<html>
<body>
<ul>
@For Each x In Request.ServerVariables
    @<li>@x</li>
Next x
</ul>
</body>
</html>



While Loops

The while loop is a general purpose loop.

A while loop begins with the while keyword, followed by parentheses, where you specify how long the loop continues, then a block to repeat.

While loops typically add to, or subtract from, a variable used for counting.

In the example below, the += operator adds 1 to the variable i, each time the loop runs.

Example

<html>
<body>
@Code
Dim i=0
Do While i<5
    i += 1
    @<p>Line #@i</p>
Loop
End Code

</body>
</html>


Arrays

An array is useful when you want to store similar variables but don't want to create a separate variable for each of them:

Example

@Code
Dim members As String()={"Jani","Hege","Kai","Jim"}
i=Array.IndexOf(members,"Kai")+1
len=members.Length
x=members(2-1)
end Code
<html>
<body>
<h3>Members</h3>
@For Each person In members
   @<p>@person</p>
Next person

<p>The number of names in Members are 
@len</p>
<p>The person at position 2 is 
@x</p>
<p>Kai is now in position 
@i</p>
</body>
</html>

 

Razor VB Loops

Programming Logic: Execute code based on conditions.


The If Condition

VB lets you execute code based on conditions.

To test a condition you use the if statement. The if statement returns true or false, based on your test:

  • The if statement starts a code block
  • The condition is written between if and then
  • The code between if ... then and end if is executed if the test is true

Example

@Code
Dim price=50
End Code
<html>
<body>
@If price>30 Then
    @<p>The price is too high.</p>
End If
</body>
</html>


The Else Condition

An if statement can include an else condition.

The else condition defines the code to be executed if the condition is false.

Example

@Code
Dim price=20
End Code
<html>
<body>
@if price>30 then
    @<p>The price is too high.</p>
Else
    @<p>The price is OK.</p>
End If
</body>
</html>

Note: In the example above, if the first condition is true, it will be executed. The else condition covers "everything else".



The ElseIf Condition

Multiple conditions can be tested with an else if condition:

Example

@Code
Dim price=25
End Code
<html>
<body>
@If price>=30 Then
    @<p>The price is high.</p>
ElseIf price>20 And price<30 then
    @<p>The price is OK.</p>
Else
    @<p>The price is low.</p>
End If   
</body>
</html>

In the example above, if the first condition is true, it will be executed.

If not, then if the next condition is true, this condition will be executed.

You can have any number of else if conditions.

If none of the if or else if conditions are true, the last else block (without a condition) covers "everything else".


Select Conditions

select block can be used to test a number of individual conditions:

Example

@Code
Dim weekday=DateTime.Now.DayOfWeek
Dim day=weekday.ToString()
Dim message=""
End Code
<html>
<body>
@Select Case day
Case "Monday"
    message="This is the first weekday."
Case "Thursday"
    message="Only one day before weekend."
Case "Friday"
    message="Tomorrow is weekend!"
Case Else
    message="Today is " & day
End Select
<p>@message</p>
</body>
</html>

"Select Case" is followed by the test value (day). Each individual test condition has a case value, and any number of code lines. If the test value matches the case value, the code lines are executed.

A select block can have a default case (Case Else) for "everything else" that runs if none of the other cases are true.

 

Razor VB Logic

ASP is an old (but still powerful) tool for making dynamic Web pages.

ASP is a technology (much like PHP) for executing scripts on a web server.

In this tutorial you will learn all you need to know about ASP.


Easy Learning with "Show Example"

This ASP tutorial contains hundreds of examples.

Our "Show Example" tool makes it easy to learn ASP, because it shows ASP code with parallel HTML output.

Example

<!DOCTYPE html>
<html>
<body>
<%
response.write("My first ASP script!")
%>

</body>
</html>

Click on the "Show Example" button to see how it works!


What is ASP?

  • ASP stands for Active Server Pages
  • ASP is a Microsoft Technology
  • ASP is a program that runs inside a web server

What is an ASP File?

  • An ASP file has the file extension ".asp"
  • An ASP file is just the same as an HTML file
  • An ASP file can contain server scripts in addition to HTML
  • Server scripts in an ASP file are executed on the server


What can ASP do for you?

  • Edit, change, add content, or customize any web page
  • Respond to user queries or data submitted from HTML forms
  • Access databases or other server data and return results to a browser
  • Provide web security since ASP code cannot be viewed in a browser
  • Offer simplicity and speed

How Does it Work?

When a browser requests a normal HTML file, the server just returns the file.

When a browser requests an ASP file, the server passes the request to the ASP engine which reads the ASP file and executes the server scripts in the file.

Finally the ASP file is returned to the browser as plain HTML.


ASP References

At W3Schools you will find complete ASP references about built-in objects and components, and their properties and methods.


ASP Examples

Learn by 100 examples! Because ASP scripts are executed on the server, you can not view ASP code in a browser, you will only see the output from ASP which is plain HTML. At W3Schools every example displays the hidden ASP code. This will make it easier for you to understand how it works.

 

ASP Intro

All our examples shows the ASP code in red.

This makes it easier for you to understand how ASP works.


ASP Uses VBScript

The default scripting language in ASP is VBScript.

A scripting language is a lightweight programming language.

VBScript is a light version of Microsoft's Visual Basic.


ASP Files

ASP files can be ordinary HTML files. In addition, ASP files can also contain server scripts.

Scripts surrounded by <% and %> are executed on the server.

The Response.Write() method is used by ASP to write output to HTML.

The following example writes "Hello World" into HTML:

Example

<!DOCTYPE html>
<html>
<body>
<%
Response.Write("Hello World!")
%>

</body>
</html>

VBScript is case insensitive. Response.Write() can be written as response.write().


Using JavaScript in ASP

To set JavaScript as the scripting language for a web page you must insert a language specification at the top of the page:

Example

<%@ language="javascript"%>
<!DOCTYPE html>
<html>
<body>
<%
Response.Write("Hello World!")
%>

</body>
</html>

This tutorial uses the VBScript scripting language.



More Examples

There is an easy shortcut to Response.Write(). You can use an equal sign (=) instead.

The following example also writes "Hello World" into HTML:

Example

<!DOCTYPE html>
<html>
<body>
<%
="Hello World!"
%>

</body>
</html>

HTML tags can be a part of the output:

Example

<!DOCTYPE html>
<html>
<body>
<%
Response.Write("<h2>You can use HTML tags to format the text!</h2>")
%>

</body>
</html>

HTML attributes can be a part of the output:

Example

<!DOCTYPE html>
<html>
<body>
<%
Response.Write("<p style='color:#0000ff'>This text is styled.</p>")
%>

</body>
</html>


VBScript Examples

This tutorial contains a lot of VBScript examples.


VBScript Reference

This tutorial has complete VBScript reference.

 

ASP Syntax

ASP Variables

 

Variables are "containers" for storing information.


More Examples


This example demonstrates how to declare a variable, assign a value to it, and use the value in a text.


Arrays are used to store a series of related data items. This example demonstrates how to create an array that stores names.


How to loop through the six headings in HTML.


This example will display a different message to the user depending on the time on the server.


This example is the same as the one above, but the syntax is different.


How to create a variable, assign a value to it, and then change the value of it.


How to insert a variable value in a text.


Do You Remember Algebra from School?

Do you remember algebra from school? x=5, y=6, z=x+y

Do you remember that a letter (like x) could be used to hold a value (like 5), and that you could use the information above to calculate the value of z to be 11?

These letters are called variables, and variables can be used to hold values (x=5) or expressions (z=x+y).


VBScript Variables

As with algebra, VBScript variables are used to hold values or expressions.

A variable can have a short name, like x, or a more descriptive name, like carname.

Rules for VBScript variable names:

  • Must begin with a letter 
  • Cannot contain a period (.)
  • Cannot exceed 255 characters

In VBScript, all variables are of type variant, that can store different types of data.



Declaring (Creating) VBScript Variables

Creating variables in VBScript is most often referred to as "declaring" variables.

You can declare VBScript variables with the Dim, Public or the Private statement. Like this:

Dim x
Dim carname

Now you have created two variables. The name of the variables are "x" and "carname".

You can also declare variables by using its name in a script. Like this:

carname="Volvo"

Now you have also created a variable. The name of the variable is "carname". However, this method is not a good practice, because you can misspell the variable name later in your script, and that can cause strange results when your script is running.

If you misspell for example the "carname" variable to "carnime", the script will automatically create a new variable called "carnime".  To prevent your script from doing this, you can use the Option Explicit statement. This statement forces you to declare all your variables with the dim, public or private statement.

Put the Option Explicit statement on the top of your script. Like this:

Option Explicit
Dim carname
carname=some value

Assigning Values to Variables

You assign a value to a variable like this:

carname="Volvo"
x=10

The variable name is on the left side of the expression and the value you want to assign to the variable is on the right. Now the variable "carname" has the value of "Volvo", and the variable "x" has the value of "10".


VBScript Array Variables

An array variable is used to store multiple values in a single variable.

In the following example, an array containing 3 elements is declared:

Dim names(2)

The number shown in the parentheses is 2. We start at zero so this array contains 3 elements. This is a fixed-size array. You assign data to each of the elements of the array like this:

names(0)="Tove"
names(1)="Jani"
names(2)="Stale"

Similarly, the data can be retrieved from any element using the index of the particular array element you want. Like this:

mother=names(0)

You can have up to 60 dimensions in an array. Multiple dimensions are declared by separating the numbers in the parentheses with commas. Here we have a two-dimensional array consisting of 5 rows and 7 columns:

Dim table(4,6)

Assign data to a two-dimensional array:

Example




<%
Dim x(2,2)
x(0,0)="Volvo"
x(0,1)="BMW"
x(0,2)="Ford"
x(1,0)="Apple"
x(1,1)="Orange"
x(1,2)="Banana"
x(2,0)="Coke"
x(2,1)="Pepsi"
x(2,2)="Sprite"
for i=0 to 2
    response.write("

")
    for j=0 to 2
        response.write(x(i,j) & "
")
    next
    response.write("

")
next
%>



The Lifetime of Variables

A variable declared outside a procedure can be accessed and changed by any script in the ASP file.

A variable declared inside a procedure is created and destroyed every time the procedure is executed. No scripts outside the procedure can access or change the variable.

To declare variables accessible to more than one ASP file, declare them as session variables or application variables.

Session Variables

Session variables are used to store information about ONE single user, and are available to all pages in one application. Typically information stored in session variables are name, id, and preferences.

Application Variables

Application variables are also available to all pages in one application. Application variables are used to store information about ALL users in one specific application.

 

 
ASP Variables

ASP Procedures

 

In ASP you can call a JavaScript procedure from a VBScript and vice versa.


Procedures

The ASP source code can contain procedures and functions:

Example




<%
sub vbproc(num1,num2)
response.write(num1*num2)
end sub
%>



Result: <%call vbproc(3,4)%>




Insert the <%@ language="language" %> line above the tag to write the procedure/function in another scripting language:

Example

<%@ language="javascript" %>



<%
function jsproc(num1,num2)
{
Response.Write(num1*num2)
}
%>



Result: <%jsproc(3,4)%>






Differences Between VBScript and JavaScript

When calling a VBScript or a JavaScript procedure from an ASP file written in VBScript, you can use the "call" keyword followed by the procedure name. If a procedure requires parameters, the parameter list must be enclosed in parentheses when using the "call" keyword. If you omit the "call" keyword, the parameter list must not be enclosed in parentheses. If the procedure has no parameters, the parentheses are optional.

When calling a JavaScript or a VBScript procedure from an ASP file written in JavaScript, always use parentheses after the procedure name.


VBScript Procedures

VBScript has two kinds procedures:

  • Sub procedure
  • Function procedure

VBScript Sub Procedures

A Sub procedure:

  • is a series of statements, enclosed by the Sub and End Sub statements
  • can perform actions, but does not return a value
  • can take arguments
Sub mysub()
  some statements
End Sub

or

Sub mysub(argument1,argument2)
  some statements
End Sub

 

Example

Sub mysub()
  response.write("I was written by a sub procedure")
End Sub

VBScript Function Procedures

A Function procedure:

  • is a series of statements, enclosed by the Function and End Function statements
  • can perform actions and can return a value
  • can take arguments that are passed to it by a calling procedure
  • without arguments, must include an empty set of parentheses ()
  • returns a value by assigning a value to its name
Function myfunction()
  some statements
  myfunction=some value
End Function

or

Function myfunction(argument1,argument2)
  some statements
  myfunction=some value
End Function

 

Example

function myfunction()
  myfunction=Date()
end function

Calling a Procedure

This simple function procedures is called to calculate the sum of two arguments:

Example

Function myfunction(a,b)
myfunction=a+b
End Function

response.write(myfunction(5,9))

The function "myfunction" will return the sum of argument "a" and argument "b". In this case 14.

When you call a procedure you can use the Call statement, like this:

Call MyProc(argument)

Or, you can omit the Call statement, like this:

MyProc argument

More Examples


How to call both a JavaScript procedure and a VBScript procedure in an ASP file.

 

 
ASP Procedures
 

Conditional Statements

Conditional statements are used to perform different actions for different decisions.

In VBScript we have four conditional statements:

  • If statement - executes a set of code when a condition is true
  • If...Then...Else statement - select one of two sets of lines to execute
  • If...Then...ElseIf statement - select one of many sets of lines to execute
  • Select Case statement - select one of many sets of lines to execute

If...Then...Else

Use the If...Then...Else statement if you want to

  • execute some code if a condition is true
  • select one of two blocks of code to execute

If you want to execute only one statement when a condition is true, you can write the code on one line:

If i=10 Then response.write("Hello")

There is no ..Else.. in this syntax. You just tell the code to perform one action if a condition is true (in this case If i=10).

If you want to execute more than one statement when a condition is true, you must put each statement on separate lines, and end the statement with the keyword "End If":

If i=10 Then
response.write("Hello")
i = i+1
End If

There is no ..Else.. in the example above either. You just tell the code to perform multiple actions if the condition is true.

If you want to execute a statement if a condition is true and execute another statement if the condition is not true, you must add the "Else" keyword:

Example

i=hour(time)
If i < 10 Then
response.write("Good morning!")
Else
response.write("Have a nice day!")
End If

In the example above, the first block of code will be executed if the condition is true, and the other block will be executed otherwise (if i is greater than 10).



If...Then...ElseIf

You can use the If...Then...ElseIf statement if you want to select one of many blocks of code to execute:

Example

i=hour(time)
If i = 10 Then
response.write("Just started...!")
ElseIf i = 11 Then
response.write("Hungry!")
ElseIf i = 12 Then
response.write("Ah, lunch-time!")
ElseIf i = 16 Then
response.write("Time to go home!")
Else
response.write("Unknown")
End If

Select Case

You can also use the "Select Case" statement if you want to select one of many blocks of code to execute:

Example

d=weekday(date)
Select Case d
  Case 1
    response.write("Sleepy Sunday")
  Case 2
    response.write("Monday again!")
  Case 3
    response.write("Just Tuesday!")
  Case 4
    response.write("Wednesday!")
  Case 5
    response.write("Thursday...")
  Case 6
    response.write("Finally Friday!")
  Case else
    response.write("Super Saturday!!!!")
End Select

This is how it works: First we have a single expression (most often a variable), that is evaluated once. The value of the expression is then compared with the values for each Case in the structure. If there is a match, the block of code associated with that Case is executed.

 

 
ASP Conditionals
 

Looping Statements

Looping statements are used to run the same block of code a specified number of times.

In VBScript we have four looping statements:

  • For...Next statement - runs code a specified number of times
  • For Each...Next statement - runs code for each item in a collection or each element of an array
  • Do...Loop statement - loops while or until a condition is true
  • While...Wend statement - Do not use it - use the Do...Loop statement instead

For...Next Loop

Use the For...Next statement to run a block of code a specified number of times.

The For statement specifies the counter variable (i), and its start and end values. The Next statement increases the counter variable (i) by one.

Example




<%
For i = 0 To 5
  response.write("The number is " & i & "
")
Next
%>


The Step Keyword

With the Step keyword, you can increase or decrease the counter variable by the value you specify.

In the example below, the counter variable (i) is INCREASED by two, each time the loop repeats.

For i=2 To 10 Step 2
  some code
Next

To decrease the counter variable, you must use a negative Step value. You must specify an end value that is less than the start value.

In the example below, the counter variable (i) is DECREASED by two, each time the loop repeats.

For i=10 To 2 Step -2
  some code
Next

Exit a For...Next

You can exit a For...Next statement with the Exit For keyword.

For i=1 To 10
  If i=5 Then Exit For
  some code
Next


For Each...Next Loop

A For Each...Next loop repeats a block of code for each item in a collection, or for each element of an array.

Example




<%
Dim cars(2)
cars(0)="Volvo"
cars(1)="Saab"
cars(2)="BMW"

For Each x In cars
  response.write(x & "
")
Next
%>



Do...Loop

If you don't know how many repetitions you want, use a Do...Loop statement.

The Do...Loop statement repeats a block of code while a condition is true, or until a condition becomes true.

Repeat Code While a Condition is True

You use the While keyword to check a condition in a Do...Loop statement.

Do While i>10
  some code
Loop

If i equals 9, the code inside the loop above will never be executed.

Do
  some code
Loop While i>10

The code inside this loop will be executed at least one time, even if i is less than 10.

Repeat Code Until a Condition Becomes True

You use the Until keyword to check a condition in a Do...Loop statement.

Do Until i=10
  some code
Loop

If i equals 10, the code inside the loop will never be executed.

Do
  some code
Loop Until i=10

The code inside this loop will be executed at least one time, even if i is equal to 10.

Exit a Do...Loop

You can exit a Do...Loop statement with the Exit Do keyword.

Do Until i=10
  i=i-1
  If i<10 Then Exit Do
Loop

The code inside this loop will be executed as long as i is different from 10, and as long as i is greater than 10.


More Examples


How to loop through the six headings in html.


How to make a simple Do...While loop.

 

 
ASP Looping

The Request.QueryString and Request.Form commands are used to retrieve user input from forms.



User Input

The Request object can be used to retrieve user information from forms.

User input can be retrieved with the Request.QueryString or Request.Form command. 


Request.QueryString

The Request.QueryString command is used to collect values in a form with method="get".

Information sent from a form with the GET method is visible to everyone (it will be displayed in the browser's address bar) and has limits on the amount of information to send.

Example HTML form

<form method="get" action="simpleform.asp">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would look like this:

https://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates

Assume that "simpleform.asp" contains the following ASP script:

<body>
Welcome
<%
response.write(request.querystring("fname"))
response.write(" " & request.querystring("lname"))
%>
</body>

The browser will display the following in the body of the document:

Welcome Bill Gates



Request.Form

The Request.Form command is used to collect values in a form with method="post".

Information sent from a form with the POST method is invisible to others and has no limits on the amount of information to send.

Example HTML form

<form method="post" action="simpleform.asp">
First Name: <input type="text" name="fname"><br>
Last Name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

If a user typed "Bill" and "Gates" in the HTML form above, the URL sent to the server would look like this:

https://www.w3schools.com/simpleform.asp

Assume that "simpleform.asp" contains the following ASP script:

<body>
Welcome
<%
response.write(request.form("fname"))
response.write(" " & request.form("lname"))
%>
</body>

The browser will display the following in the body of the document:

Welcome Bill Gates


Form Validation

User input should be validated on the browser whenever possible (by client scripts). Browser validation is faster and reduces the server load.

You should consider server validation if the user input will be inserted into a database. A good way to validate a form on the server is to post the form to itself, instead of jumping to a different page. The user will then get the error messages on the same page as the form. This makes it easier to discover the error.

 

ASP Forms

A cookie is often used to identify a user.


More Examples

 

How to create a Welcome cookie.


What is a Cookie?

A cookie is often used to identify a user. A cookie is a small file that the server embeds on the user's computer. Each time the same computer requests a page with a browser, it will send the cookie too. With ASP, you can both create and retrieve cookie values.


How to Create a Cookie?

The "Response.Cookies" command is used to create cookies.

Note: The Response.Cookies command must appear BEFORE the <html> tag.

In the example below, we will create a cookie named "firstname" and assign the value "Alex" to it:

<%
Response.Cookies("firstname")="Alex"
%>

It is also possible to assign properties to a cookie, like setting a date when the cookie should expire:

<%
Response.Cookies("firstname")="Alex"
Response.Cookies("firstname").Expires=#May 10,2012#
%>


How to Retrieve a Cookie Value?

The "Request.Cookies" command is used to retrieve a cookie value.

In the example below, we retrieve the value of the cookie named "firstname" and display it on a page:

<%
fname=Request.Cookies("firstname")
response.write("Firstname=" & fname)
%>

Output: Firstname=Alex



A Cookie with Keys

If a cookie contains a collection of multiple values, we say that the cookie has Keys.

In the example below, we will create a cookie collection named "user". The "user" cookie has Keys that contains information about a user:

<%
Response.Cookies("user")("firstname")="John"
Response.Cookies("user")("lastname")="Smith"
Response.Cookies("user")("country")="Norway"
Response.Cookies("user")("age")="25"
%>


Read all Cookies

Look at the following code:

<%
Response.Cookies("firstname")="Alex"
Response.Cookies("user")("firstname")="John"
Response.Cookies("user")("lastname")="Smith"
Response.Cookies("user")("country")="Norway"
Response.Cookies("user")("age")="25"
%>

Assume that your server has sent all the cookies above to a user.

Now we want to read all the cookies sent to a user. The example below shows how to do it (note that the code below checks if a cookie has Keys with the HasKeys property):

<!DOCTYPE html>
<html>
<body>

<%
dim x,y
for each x in Request.Cookies
  response.write("<p>")
  if Request.Cookies(x).HasKeys then
    for each y in Request.Cookies(x)
      response.write(x & ":" & y & "=" & Request.Cookies(x)(y))
      response.write("<br>")
    next
  else
    Response.Write(x & "=" & Request.Cookies(x) & "<br>")
  end if
  response.write "</p>"
next
%>

</body>
</html>

Output:

firstname=Alex

user:firstname=John
user:lastname=Smith
user:country=Norway
user:age=25


What if a Browser Does NOT Support Cookies?

If your application deals with browsers that do not support cookies, you will have to use other methods to pass information from one page to another in your application. There are two ways of doing this:

1. Add parameters to a URL

You can add parameters to a URL:

<a href="welcome.asp?fname=John&lname=Smith">Go to Welcome Page</a>

And retrieve the values in the "welcome.asp" file like this:

<%
fname=Request.querystring("fname")
lname=Request.querystring("lname")
response.write("<p>Hello " & fname & " " & lname & "!</p>")
response.write("<p>Welcome to my Web site!</p>")
%>

2. Use a form

You can use a form. The form passes the user input to "welcome.asp" when the user clicks on the Submit button:

<form method="post" action="welcome.asp">
First Name: <input type="text" name="fname" value="">
Last Name: <input type="text" name="lname" value="">
<input type="submit" value="Submit">
</form>

Retrieve the values in the "welcome.asp" file like this:

<%
fname=Request.form("fname")
lname=Request.form("lname")
response.write("<p>Hello " & fname & " " & lname & "!</p>")
response.write("<p>Welcome to my Web site!</p>")
%>

 

ASP Cookies

A Session object stores information about, or change settings for a user session.


The Session object

When you are working with an application on your computer, you open it, do some changes and then you close it. This is much like a Session. The computer knows who you are. It knows when you open the application and when you close it. However, on the internet there is one problem: the web server does not know who you are and what you do, because the HTTP address doesn't maintain state.

ASP solves this problem by creating a unique cookie for each user. The cookie is sent to the user's computer and it contains information that identifies the user. This interface is called the Session object.

The Session object stores information about, or change settings for a user session.

Variables stored in a Session object hold information about one single user, and are available to all pages in one application. Common information stored in session variables are name, id, and preferences. The server creates a new Session object for each new user, and destroys the Session object when the session expires.


When does a Session Start?

A session starts when:

  • A new user requests an ASP file, and the Global.asa file includes a Session_OnStart procedure
  • A value is stored in a Session variable
  • A user requests an ASP file, and the Global.asa file uses the <object> tag to instantiate an object with session scope

When does a Session End?

A session ends if a user has not requested or refreshed a page in the application for a specified period. By default, this is 20 minutes.

If you want to set a timeout interval that is shorter or longer than the default, use the Timeout property.

The example below sets a timeout interval of 5 minutes:

<%
Session.Timeout=5
%>

Use the Abandon method to end a session immediately:

<%
Session.Abandon
%>

Note: The main problem with sessions is WHEN they should end. We do not know if the user's last request was the final one or not. So we do not know how long we should keep the session "alive". Waiting too long for an idle session uses up resources on the server, but if the session is deleted too soon the user has to start all over again because the server has deleted all the information. Finding the right timeout interval can be difficult!

Tip: Only store SMALL amounts of data in session variables!



Store and Retrieve Session Variables

The most important thing about the Session object is that you can store variables in it.

The example below will set the Session variable username to "Donald Duck" and the Session variable age to "50":

<%
Session("username")="Donald Duck"
Session("age")=50
%>

When the value is stored in a session variable it can be reached from ANY page in the ASP application:

Welcome <%Response.Write(Session("username"))%>

The line above returns: "Welcome Donald Duck".

You can also store user preferences in the Session object, and then access that preference to choose what page to return to the user.

The example below specifies a text-only version of the page if the user has a low screen resolution:

<%If Session("screenres")="low" Then%>
  This is the text version of the page
<%Else%>
  This is the multimedia version of the page
<%End If%>


Remove Session Variables

The Contents collection contains all session variables.

It is possible to remove a session variable with the Remove method.

The example below removes the session variable "sale" if the value of the session variable "age" is lower than 18:

<%
If Session.Contents("age")<18 then
  Session.Contents.Remove("sale")
End If
%>

To remove all variables in a session, use the RemoveAll method:

<%
Session.Contents.RemoveAll()
%>


Loop Through the Contents Collection

The Contents collection contains all session variables. You can loop through the Contents collection, to see what's stored in it:

<%
Session("username")="Donald Duck"
Session("age")=50

dim i
For Each i in Session.Contents
  Response.Write(i & "<br>")
Next
%>

Result:

username
age

If you do not know the number of items in the Contents collection, you can use the Count property:

<%
dim i
dim j
j=Session.Contents.Count
Response.Write("Session variables: " & j)
For i=1 to j
  Response.Write(Session.Contents(i) & "<br>")
Next
%>

Result:

Session variables: 2
Donald Duck
50


Loop Through the StaticObjects Collection

You can loop through the StaticObjects collection, to see the values of all objects stored in the Session object:

<%
dim i
For Each i in Session.StaticObjects
  Response.Write(i & "<br>")
Next
%>

 

ASP Session

A group of ASP files that work together to perform some purpose is called an application. The Application object is used to tie these files together.


Application Object

An application on the Web may consists of several ASP files that work together to perform some purpose. The Application object is used to tie these files together.

The Application object is used to store and access variables from any page, just like the Session object. The difference is that ALL users share ONE Application object (with Sessions there is ONE Session object for EACH user).

The Application object holds information that will be used by many pages in the application (like database connection information). The information can be accessed from any page. The information can also be changed in one place, and the changes will automatically be reflected on all pages.

The Application object's collections, methods, and events are described below:

Collections

Collection

Description

Contents

Contains all the items appended to the application through a script command

StaticObjects

Contains all the objects appended to the application with the HTML <object> tag

Methods

Method

Description

Contents.Remove

Deletes an item from the Contents collection

Contents.RemoveAll()

Deletes all items from the Contents collection

Lock

Prevents other users from modifying the variables in the Application object

Unlock

Enables other users to modify the variables in the Application object (after it has been locked using the Lock method)

Events

Event

Description

Application_OnEnd

Occurs when all user sessions are over, and the application ends

Application_OnStart

Occurs before the first new session is created (when the Application object is first referenced)

 

ASP Application

The #include Directive

You can insert the content of one ASP file into another ASP file before the server executes it, with the #include directive.

The #include directive is used to create functions, headers, footers, or elements that will be reused on multiple pages.


How to Use the #include Directive

Here is a file called "mypage.asp":

<!DOCTYPE html>
<html>
<body>
<h3>Words of Wisdom:</h3>
<p><!--#include file="wisdom.inc"--></p>
<h3>The time is:</h3>
<p><!--#include file="time.inc"--></p>
</body>
</html>

Here is the "wisdom.inc" file:

"One should never increase, beyond what is necessary,
the number of entities required to explain anything."

Here is the "time.inc" file:

<%
Response.Write(Time)
%>

If you look at the source code in a browser, it will look something like this:

<!DOCTYPE html>
<html>
<body>
<h3>Words of Wisdom:</h3>
<p>"One should never increase, beyond what is necessary,
the number of entities required to explain anything."</p>
<h3>The time is:</h3>
<p>11:33:42 AM</p>
</body>
</html>



Syntax for Including Files

To include a file in an ASP page, place the #include directive inside comment tags:

<!--#include virtual="somefilename"-->

or

<!--#include file ="somefilename"-->

The Virtual Keyword

Use the virtual keyword to indicate a path beginning with a virtual directory.

If a file named "header.inc" resides in a virtual directory named /html, the following line would insert the contents of "header.inc":

<!-- #include virtual ="/html/header.inc" -->

The File Keyword

Use the file keyword to indicate a relative path. A relative path begins with the directory that contains the including file.

If you have a file in the html directory, and the file "header.inc" resides in htmlheaders, the following line would insert "header.inc" in your file:

<!-- #include file ="headersheader.inc" -->

Note that the path to the included file (headersheader.inc) is relative to the including file. If the file containing this #include statement is not in the html directory, the statement will not work.


Tips and Notes

In the sections above we have used the file extension ".inc" for included files. Notice that if a user tries to browse an INC file directly, its content will be displayed. If your included file contains confidential information or information you do not want any users to see, it is better to use an ASP extension. The source code in an ASP file will not be visible after the interpretation. An included file can also include other files, and one ASP file can include the same file more than once.

Important: Included files are processed and inserted before the scripts are executed. The following script will NOT work because ASP executes the #include directive before it assigns a value to the variable:

<%
fname="header.inc"
%>
<!--#include file="<%fname%>"-->

You cannot open or close a script delimiter in an INC file. The following script will NOT work:

<%
For i = 1 To n
  <!--#include file="count.inc"-->
Next
%>

But this script will work:

<% For i = 1 to n %>
  <!--#include file="count.inc" -->
<% Next %>

 

ASP #include

The Global.asa file

The Global.asa file is an optional file that can contain declarations of objects, variables, and methods that can be accessed by every page in an ASP application.

All valid browser scripts (JavaScript, VBScript, JScript, PerlScript, etc.) can be used within Global.asa.

The Global.asa file can contain only the following:

  • Application events
  • Session events
  • <object> declarations
  • TypeLibrary declarations
  • the #include directive

Note: The Global.asa file must be stored in the root directory of the ASP application, and each application can only have one Global.asa file.


Events in Global.asa

In Global.asa you can tell the application and session objects what to do when the application/session starts and what to do when the application/session ends. The code for this is placed in event handlers. The Global.asa file can contain four types of events:

Application_OnStart - Occurs when the FIRST user calls the first page in an ASP application. This event occurs after the Web server is restarted or after the Global.asa file is edited. The "Session_OnStart" event occurs immediately after this event.

Session_OnStart - This event occurs EVERY time a NEW user requests his or her first page in the ASP application.

Session_OnEnd - This event occurs EVERY time a user ends a session. A user-session ends after a page has not been requested by the user for a specified time (by default this is 20 minutes).

Application_OnEnd - This event occurs after the LAST user has ended the session. Typically, this event occurs when a Web server stops. This procedure is used to clean up settings after the Application stops, like delete records or write information to text files.

A Global.asa file could look something like this:

<script language="vbscript" runat="server">

sub Application_OnStart
'some code
end sub

sub Application_OnEnd
'some code
end sub

sub Session_OnStart
'some code
end sub

sub Session_OnEnd
'some code
end sub

</script>

Note: Because we cannot use the ASP script delimiters (<% and %>) to insert scripts in the Global.asa file, we put subroutines inside an HTML <script> element.



<object> Declarations

It is possible to create objects with session or application scope in Global.asa by using the <object> tag.

Note: The <object> tag should be outside the <script> tag!

Syntax

<object runat="server" scope="scope" id="id" {progid="progID"|classid="classID"}>
....
</object>

 

Parameter Description
scope Sets the scope of the object (either Session or Application)
id Specifies a unique id for the object
ProgID An id associated with a class id. The format for ProgID is [Vendor.]Component[.Version]

Either ProgID or ClassID must be specified.

ClassID Specifies a unique id for a COM class object.

Either ProgID or ClassID must be specified.

Examples

The first example creates an object of session scope named "MyAd" by using the ProgID parameter:

<object runat="server" scope="session" id="MyAd" progid="MSWC.AdRotator">
</object>

The second example creates an object of application scope named "MyConnection" by using the ClassID parameter:

<object runat="server" scope="application" id="MyConnection"
classid="Clsid:8AD3067A-B3FC-11CF-A560-00A0C9081C21">
</object>

The objects declared in the Global.asa file can be used by any script in the application:

GLOBAL.ASA:

<object runat="server" scope="session" id="MyAd" progid="MSWC.AdRotator">
</object>

You could reference the object "MyAd" from any page in the ASP application:

SOME .ASP FILE:

<%=MyAd.GetAdvertisement("/banners/adrot.txt")%>

TypeLibrary Declarations

A TypeLibrary is a container for the contents of a DLL file corresponding to a COM object. By including a call to the TypeLibrary in the Global.asa file, the constants of the COM object can be accessed, and errors can be better reported by the ASP code. If your Web application relies on COM objects that have declared data types in type libraries, you can declare the type libraries in Global.asa.

Syntax

<!--METADATA TYPE="TypeLib"
file="filename" uuid="id" version="number" lcid="localeid"
-->

 

Parameter Description
file Specifies an absolute path to a type library.

Either the file parameter or the uuid parameter is required

uuid Specifies a unique identifier for the type library.

Either the file parameter or the uuid parameter is required

version Optional. Used for selecting version. If the requested version is not found, then the most recent version is used
lcid Optional. The locale identifier to be used for the type library

Error Values

The server can return one of the following error messages:

Error Code Description
ASP 0222 Invalid type library specification
ASP 0223 Type library not found
ASP 0224 Type library cannot be loaded
ASP 0225 Type library cannot be wrapped

Note: METADATA tags can appear anywhere in the Global.asa file (both inside and outside <script> tags). However, it is recommended that METADATA tags appear near the top of the Global.asa file.


Restrictions

Restrictions on what you can include in the Global.asa file:

  • You cannot display text written in the Global.asa file. This file can't display information
  • You can only use Server and Application objects in the Application_OnStart and Application_OnEnd subroutines. In the Session_OnEnd subroutine, you can use Server, Application, and Session objects. In the Session_OnStart subroutine you can use any built-in object

How to use the Subroutines

Global.asa is often used to initialize variables. 

The example below shows how to detect the exact time a visitor first arrives on a Web site. The time is stored in a Session variable named "started", and the value of the "started" variable can be accessed from any ASP page in the application:

<script language="vbscript" runat="server">
sub Session_OnStart
Session("started")=now()
end sub
</script>

Global.asa can also be used to control page access.

The example below shows how to redirect every new visitor to another page, in this case to a page called "newpage.asp":

<script language="vbscript" runat="server">
sub Session_OnStart
Response.Redirect("newpage.asp")
end sub
</script>

And you can include functions in the Global.asa file.

In the example below the Application_OnStart subroutine occurs when the Web server starts. Then the Application_OnStart subroutine calls another subroutine named "getcustomers". The "getcustomers" subroutine opens a database and retrieves a record set from the "customers" table. The record set is assigned to an array, where it can be accessed from any ASP page without querying the database:

<script language="vbscript" runat="server">

sub Application_OnStart
getcustomers
end sub

sub getcustomers
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
set rs=conn.execute("select name from customers")
Application("customers")=rs.GetRows
rs.Close
conn.Close
end sub

</script>

Global.asa Example

In this example we will create a Global.asa file that counts the number of current visitors.

  • The Application_OnStart sets the Application variable "visitors" to 0 when the server starts
  • The Session_OnStart subroutine adds one to the variable "visitors" every time a new visitor arrives
  • The Session_OnEnd subroutine subtracts one from "visitors" each time this subroutine is triggered

The Global.asa file:

<script language="vbscript" runat="server">

Sub Application_OnStart
Application("visitors")=0
End Sub

Sub Session_OnStart
Application.Lock
Application("visitors")=Application("visitors")+1
Application.UnLock
End Sub

Sub Session_OnEnd
Application.Lock
Application("visitors")=Application("visitors")-1
Application.UnLock
End Sub

</script>

To display the number of current visitors in an ASP file:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>There are <%response.write(Application("visitors"))%> online now!</p>
</body>
</html>
ASP Global.asa

AJAX is about updating parts of a web page, without reloading the whole page.


What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.


How AJAX Works

AJAX


AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

  • XMLHttpRequest object (to exchange data asynchronously with a server)
  • JavaScript/DOM (to display/interact with the information)
  • CSS (to style the data)
  • XML (often used as the format for transferring data)

AJAX applications are browser- and platform-independent!



Google Suggest

AJAX was made popular in 2005 by Google, with Google Suggest.

Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.


Start Using AJAX Today

In our ASP tutorial, we will demonstrate how AJAX can update parts of a web page, without reloading the whole page. The server script will be written in ASP.

If you want to learn more about AJAX, visit our 

AJAX ASP Example

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:

Example

Start typing a name in the input field below:

Top of Form

First name: 

Bottom of Form

Suggestions:

 


Example Explained

In the example above, when a user types a character in the input field, a function called "showHint()" is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.asp?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to an ASP file (gethint.asp) on the server
  • Notice that q parameter is added gethint.asp?q="+str
  • The str variable holds the content of the input field

The ASP File - "gethint.asp"

The ASP file checks an array of names, and returns the corresponding name(s) to the browser:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>


AJAX can be used for interactive communication with a database.


AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example

Top of Form

 Select a customer: Alfreds Futterkiste North/South Wolski Zajazd 

Bottom of Form

 

Customer info will be listed here...


Example Explained - The HTML Page

When a user selects a customer in the dropdown list above, a function called "showCustomer()" is executed. The function is triggered by the "onchange" event:

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (this.readyState==4 && this.status==200)
    {
    document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<

<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Source code explanation:

If no customer is selected (str.length==0), the function clears the content of the txtHint placeholder and exits the function.

If a customer is selected, the showCustomer() function executes the following:

  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The ASP File

The page on the server called by the JavaScript above is an ASP file called "getcustomer.asp".

The source code in "getcustomer.asp" runs a query against a database, and returns the result in an HTML table:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>

 

ASP AJAX

CDOSYS is a built-in component in ASP. This component is used to send e-mails with ASP.


Sending e-mail with CDOSYS

CDO (Collaboration Data Objects) is a Microsoft technology that is designed to simplify the creation of messaging applications.

CDOSYS is a built-in component in ASP. We will show you how to use this component to send e-mail with ASP.

How about CDONTs?

Microsoft has discontinued the use of CDONTs on Windows 2000, Windows XP and Windows 2003. If you have used CDONTs in your ASP applications, you should update the code and use the new CDO technology.

Examples using CDOSYS

Sending a text e-mail:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.TextBody = "This is a message."
myMail.Send
set myMail = nothing
%>

Sending a text e-mail with Bcc and CC fields:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.Bcc = "[email protected]"
myMail.Cc = "[email protected]"
myMail.TextBody = "This is a message."
myMail.Send
set myMail = nothing
%>

Sending an HTML e-mail:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.HTMLBody = "<h1>This is a message.</h1>"
myMail.Send
set myMail = nothing
%>

Sending an HTML e-mail that sends a webpage from a website:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To ="[email protected]"
myMail.CreateMHTMLBody "https://www.w3schools.com/asp/"
myMail.Send
set myMail = nothing
%>



Sending an HTML e-mail that sends a webpage from a file on your computer:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.CreateMHTMLBody "file://c:/mydocuments/test.htm"
myMail.Send
set myMail = nothing
%>

Sending a text e-mail with an Attachment:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.TextBody = "This is a message."
myMail.AddAttachment "c:mydocumentstest.txt"
myMail.Send
set myMail = nothing
%>

Sending a text e-mail using a remote server:

<%
Set myMail = CreateObject("CDO.Message")
myMail.Subject = "Sending email with CDO"
myMail.From = "[email protected]"
myMail.To = "[email protected]"
myMail.TextBody = "This is a message."
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2
'Name or IP of remote SMTP server
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserver") = "smtp.server.com"
'Server port
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25
myMail.Configuration.Fields.Update
myMail.Send
set myMail = nothing
%>

 

ASP e-mail

ASP and VBScript Examples


ASP Output



VbScript Variables




VBScript Looping




VBScript Date and Time Functions








Some Other Built-in VBScript Functions









Procedures


VBScript vs JavaScript







VBScript Conditional Statements




ASP Forms



ASP Cookies

ASP Response Object












ASP Request Object













ASP Session Object


ASP Server Object



ASP FileSystem Object







ASP TextStream Object








ASP Drive Object










ASP File Object




ASP Dictionary Object






ASP AdRotator

ASP Browser Capabilities

ASP ContentRotator

ASP Content Linking


ADO Display