Demo PDF

ASP.
NET Web Pages - Demonstration

Previous
Next Chapter
This is a Web Pages Demonstration

This demonstration will teach you ASP.NET Web Pages by building a web site from scratch:
Create a web site

Add a home page
Add a style sheet
Add a database
Add login and security
Add navigation
Add Ajax support
Would You Like to Read the Tutorial First?

Many developers like to start learning a new technology by looking at a demonstration
If you want to read our Web Pages tutorial first, go to the ASP.NET Web Pages Tutorial.
What Will We Create?

This demonstration will create a web site where you can list customers from a company
database.
The web site will look like this:
ASP.NET Web Pages - Creating a Web Site

Previous
Next Chapter
Learn ASP.NET Web Pages by building a web site from scratch.

Part I: Creating a Web Site.
Create a Web Site

Create an empty web site named DemoWebPages.
If you want to learn how to create an empty web site, please go to the chapter Web Empty Site.
Create a Home Page

In the "DemoWebPages" folder, create a new CSHTML file named Default.cshtml.
Put the following content inside the file:
Default.asp
<!DOCTYPE html>
<html>
<head>
<title>Web Pages Demo</title>
</head>
<body>
<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>
</body>
</html>
Run example
Add an About Page

In the "DemoWebPages" folder, create a new CSHTML file named "About.cshtml".
Put the following code inside the about file:
About.cshtml
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</body>
</html>
The about file above contains a heading and a paragraph. Please feel free to edit the content.
ASP.NET Web Pages - Adding Style

Previous
Next Chapter

Part II: Adding CSS and a Standard Layout.
What We Will Do
In this chapter we will:
Create a standard style sheet for the site

Create a standard layout file for the site
Create a new home page for the site
Create a Style Sheet

In your web folder (DemoWebPages), create a new CSS file named "Site.css".
Put the following code inside the CSS file:
Site.css
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
}
h1
{
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
}
The CSS file above defines the styles to be used used for
The HTML body element <body>

The HTML element with id="main"
The HTML heading element <h1>
Create a Layout Page
In your web folder (DemoWebPages), create a new CSHTML file named "Layout.cshtml".
Put the following code inside the layout file:
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Site.css">
</head>
<body>
<div id="main">
@RenderBody()
<p>© 2013 W3Schools. All rights reserved.</p>
</div>
</body>
</html>
The layout file above defines the layout of your web pages. It has a link to your style sheet file
(Site.css), and a call to the @RenderBody() function, where your page content should be
displayed.
Edit the Home Page

In your "DemoWebPages" folder, edit the file named "Default.cshtml".
Change the content to the following:
Default.cshtml
@{Layout="Layout.cshtml";}
<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
Run example
The file starts with a reference to the layout file, otherwise it contains normal HTML markup.
Congratulations
You have created your first web site, with a main page (Default.cshtml), a common template for
all your pages (Layout.cshtml), and a common style sheet (Sire.css).
In the next chapters of this tutorial, we will add a database to the web site. Then we will add
login and security, and finally add navigation.
ASP.NET Web Pages - Adding a Database

Previous
Next Chapter

Part III: Adding a Database.
What We Will Do
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.
If you want to learn how to create a database for your web, please go to the chapter Web
Database.
Adding a Customers Page

In the "DemoWebPages" folder, create a new CSHTML file named "Customers.cshtml".
Replace the code in the file with the code from the example below:
Customers.cshtml
@{Layout = "Layout.cshtml";
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName,City,Country FROM Customers");
}
<html>
<body>
<h1>Customers</h1>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
@foreach(var row in query)
{
<tr>
<td>@row.CompanyName</td>
<td>@row.City</td>
<td>@row.Country</td>
</tr>
}
</table>
</body>
</html>
Run example
Database Connection
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 Web Pages - Adding Login

Previous
Next Chapter

Part IV: Adding Membership registration, and Login.
What We Will Do
Create a WebSecurity database

Initialize WebSecurity in AppStart
Add a membership registration page
Add a member login page
The WebSecurity Object

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.
Creating a Web Security Database

A common way to add security to a web site, is to use an authentication database.
In its simplest form, an authentication database contains a list of registered users with passwords.
Create a new SQL Server Compact database in the App_Data folder of your web.
Name the database "Users.sdf".
If you don't know how to create a database for your web, please go to the chapter Web Database.
You don't have to create a new database. You can create a new table named Users in your
existing database (Northwind.sdf).
Create an AppStart Page

In your web folder (DemoWebPages), create a new page named _AppStart.cshtml.
Replace the content of the page with this code:
_AppStart.cshtml
@{
WebSecurity.InitializeDatabaseConnection("Users", "UserProfile", "UserId", "Email", true);
}
The code above will be run each time your web site (application) starts. It will initialize a
WebSecurity database, with user profiles, logins, passwords, and membership information (if it
is not already initialized).
"Users" is the name of the database.
"UserProfile" is the name of the database table that contains the user profile information.
"UserId" is the name of the (integer) column that contains the user IDs.
"Email" is the name of the (string) column that contains user names.
true is a boolean value indicating that the user profile and membership tables should be created
automatically if they don't exist. Otherwise set to false.
Although true indicates that the membership tables can be created automatically, the
database itself must always exist.
Edit The Style Sheet

Edit your style sheet (Site.css):
Add the following CSS code to the end of the CSS file:
Site.css
/* Forms */
fieldset label
{
display:block;
padding:4px;
}
input[type="text"],input[type="password"]
{
width:300px;
}
input[type="submit"]
{
padding:4px;
}
Add a Registration Page

In your web folder (DemoWebPages), create a new file named "Register.cshtml".
Put the following code inside the file:
Register.cshtml
@{Layout = "Layout.cshtml";
// Initialize page
var email = "";
var password = "";

var confirmPassword = "";
var ErrorMessage = "";
// If this is a POST request, validate and process data
if (IsPost)
{
email = Request.Form["email"];
password = Request.Form["password"];
confirmPassword = Request.Form["confirmPassword"];
if (email.IsEmpty() || password.IsEmpty())
{ErrorMessage = "You must specify both email and password.";}
if (password != confirmPassword)
{ErrorMessage = "Password and confirmation do not match.";}
// If all information is valid, create a new account
if (ErrorMessage=="")
{
var db = Database.Open("Users");
var user = db.QuerySingle("SELECT Email FROM UserProfile
WHERE LOWER(Email) = LOWER(@0)", email);
if (user == null)
{
db.Execute("INSERT INTO UserProfile (Email) VALUES (@0)", email);
WebSecurity.CreateAccount(email, password, false);
// Navigate back to the homepage and exit
Response.Redirect("Default.cshtml");
}
else
{ErrorMessage = "Email address is already in use.";}
}
}
if (ErrorMessage!="")
{
<p>@ErrorMessage</p>
<p>Please correct the errors and try again.</p>
}
}
<h1>Register</h1>
<form method="post" action="">
<fieldset>
<legend>Sign-up Form</legend>
<ol>
<li>
<label>Email:</label>
<input type="text" id="email" name="email" />
</li>
<li>
<label>Password:</label>
<input type="password" id="password" name="password" />
</li>
<li>
<label>Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" />
</li>
<li>
<p><input type="submit" value="Register" /></p>
</li>
</ol>
</fieldset>
</form>
Add a Login Page

In your web folder (DemoWebPages), create a new file named "Login.cshtml".
Login.cshtml
@{Layout="Layout.cshtml";
// Initialize page
var username = "";
var password = "";
var ErrorMessage = "";
// If this is a POST request, validate and process data
if (IsPost)
{
username = Request.Form["username"];
password = Request.Form["password"];
if (username.IsEmpty() || password.IsEmpty())
{ErrorMessage = "You must specify a username and password.";}
else
{
// Login, Navigate back to the homepage and exit
if (WebSecurity.Login(username, password, false))
{Response.Redirect("Default.cshtml");}
else
{ErrorMessage = "Login failed";}
}
}
if (ErrorMessage!="")
{
<p>@ErrorMessage</p>
<p>Please correct the errors and try again.</p>
}
}
<h1>Login</h1>
<form method="post" action="">
<fieldset>
<legend>Log In to Your Account</legend>
<ol>
<li>
<label>Username:</label>
<input type="text" id="username" name="username" />
</li>
<li>
<label>Password:</label>
<input type="password" id="password" name="password" />
</li>
<li>
<p><input type="submit" value="login" /></p>
</li>
</ol>
</fieldset>
</form>
Congratulations
You have added membership registration and login information to your website.
ASP.NET Web Pages - Adding Security
Previous
Next Chapter

Part V: Adding Security.
What We Will Do
Add access restriction security to a web page
Membership, Login, and Security

In the previous chapter we added a registration page and a login page to the web site.
When a membership is registered, the user can login, with his email address and password.
However, user membership and login functions do not automatically restrict (or open) any access
to the web site.
Security (access restrictions) has to be added to each of the web pages.
Adding Security to Pages

Access restrictions (security) can easily be added to any web page.
Just put the following code inside the page:
Security Code:
if (!WebSecurity.IsAuthenticated)
{
Response.Redirect("Login.cshtml");
}
The code above executes an if test, asking if the user is logged in. If not, the user is redirected to
the login page.
Preventing Access to the Database

In our example, the page Customers.cshtml, lists customers from the "Northwind" database.
Add the security code at the beginning of the page:
Customers.cshtml
@{
if (!WebSecurity.IsAuthenticated)
{
Response.Redirect("Login");
}
Layout = "Layout.cshtml";
}
<html>
<body>
<h1>Customers</h1>
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
{
<tr>
<td>@row.City</td>
</tr>
}
</table>
</body>
</html>
The Customers page above, is a copy of the page from the previous chapter about
databases. The security code (added at the beginning) is marked red.
Congratulations
You have added security to your web site, using the WebSecurity object.
For a full reference to the WebSecurity object, please visit our WebSecurity Object Reference.
ASP.NET Web Pages - Adding Navigation

Previous
Next Chapter

Part VI: Adding a Navigation Menu.
What We Will Do
Add a navigation menu
Add a Navigation Menu

To add a navigation menu, edit your layout file (Layout.cshtml).
Put the following (red marked) code inside the layout file:
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Site.css">
</head>
<body>
<ul id="menu">
<li><a href="Default">Home</a></li>
<li><a href="About">About</a></li>
<li><a href="Customers">Data</a></li>
<li><a href="Register">Register</a></li>
<li><a href="Login">Login</a></li>
</ul>
<div id="main">
@RenderBody()
<p>© 2013 W3Schools. All rights reserved.</p>
</div>
</body>
</html>
The layout file above, is a copy of the layout file from the previous chapter, with an added
unordered list.

Now, edit your style sheet (Site.css):
Put the following (red marked) code inside the file:
Site.css
body
{
color: #696969;
}
#main
{
padding: 30px;
}
h1
{
color: #996600;
}
/* Forms */
fieldset label
{
display:block;
padding:4px;
}
input[type="text"],input[type="password"]
{
width:300px;
}
input[type="submit"]
{
padding:4px;
}
/* Menu */
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #e8eef4;
}
Run example
The style sheet above, is a copy of the style sheet from the previous chapter, with added styles
for an unordered list (marked red), and a small change in the border-radius style for the main
window.
Congratulations
You have added navigation to your website.
ASP.NET Web Pages - AJAX

Previous
Next Chapter

Part VII: Displaying Data Using AJAX.
What We Will Do
Displaing data from the database using AJAX
Create an AJAX Server Page

In your web folder (DemoWebPages), create a new CSHTML file named
"getCustomers.cshtml".
getCustomers.cshtml
@{
}
<table border="1">
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
{
<tr>
<td>@row.City</td>
</tr>
}
</table>
The file above is a standard CSHTML file, returning only an HTML table.
Create an AJAX Browser Page

In your "DemoWebPages" folder, create a new file named "Ajax.html".
Ajax.html
<!DOCTYPE html>
<html>
<head>
<title>ASP Demo</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Customers</h1>
<div id="t01"></div>
</div>
<script>
var xmlhttp;
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("t01").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getCustomers.cshtml",true);
xmlhttp.send();
</script>
</body>
</html>
Try it Yourself
Congratulations
You have created your first data page using AJAX.
ASP.NET Web Forms - Demonstration

Previous
Next Chapter
This is a Web Forms Demonstration

This demonstration will teach you ASP.NET Web Forms by building a website from scratch:
Create a web site
Add files and folders

Add a consistent look
Add navigation
Add a database
Add Ajax support
Would You Like to Read the Tutorial First?

Many developers like to start learning a new technology by looking at a demonstration.
If you want to read our Web Forms tutorial first, go to the ASP.NET Web Forms Tutorial.
ASP.NET Web Forms - Creating a Website

Previous
Next Chapter
Learn ASP.NET Web Forms by building a web site from scratch.

Part I: Creating a Web Site.
Create a Web Site

Create an empty web site named DemoWebForms.
If you want to learn how to create an empty web site, please go to the chapter Web Empty Site.
Create a Home Page

In the "DemoWebForms" folder, create a new ASPX file named Default.aspx.
Put the following content inside the file:
Default.aspx
<!DOCTYPE html>
<html>
<head>
<title>ASP Web Forms Demo</title>
</head>
<body>
<p>A Home Page (Default.aspx)</p>
<p>A Layout File (Site.master)</p>
</body>
</html>
Run example
Add an About Page

In the "DemoWebForms" folder, create a new ASPX file named "About.aspx".
About.aspx
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<h1>About Us</h1>
</body>
</html>
The about file above contains a heading and a paragraph. Please feel free to edit the content.
ASP.NET Web Forms - Adding Style

Previous
Next Chapter

Part II: Adding CSS and a Standard Layout.
What We Will Do
Create a standard style sheet for the site

Create a standard master page for the site
Create a Style Sheet

In your web folder (DemoWebForms), create a new CSS file named "Site.css".
To create a CSS file, right-click the root folder and select "New File". Then select a CSS
file.
Put the following code inside the CSS file:
Site.css
body
{
color: #696969;
}
#main
{
padding: 30px;
}
h1
{
color: #996600;
}
The CSS file above defines the styles to be used used for
The HTML body element <body>

The HTML element with id="main"
The HTML heading element <h1>
Create a Master Page

In your web folder (DemoWebForms), create a new master page named "Site.master".
To create a Master file, right-click the root folder and select "New File". Then select
"Master Page (VB)".
Put the following code inside the master file:
Site.master
<%@ Master Language="VB" %>
<!DOCTYPE html>
<html>
<head id="head" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">

<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<p>© <%=DateTime.Now.Year%> W3Schools. All rights reserved.</p>
</div>
</form>
</body>
</html>
The master file above defines the layout of your web pages. It has a link to your style sheet file
(Site.css), and an asp control (asp:ContentPlaceHolder), where your page content should be
displayed.
Edit the Home Page

In your "DemoWebForms" folder, edit the file named "Default.aspx".
Default.aspx
<%@ Page Title="Home" MasterPageFile="Site.master" %>
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
<p>A Home Page (Default.aspx)</p>
<p>A Layout File (Site.master)</p>
</asp:Content>
Run example
The file starts with a reference to the layout file, otherwise it contains an asp control and a
normal HTML markup.
Edit the About Page

In your "DemoWebForms" folder, edit the file named "About.aspx".
About.aspx
<%@ Page Title="Home" MasterPageFile="Site.master" %>
<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
<h1>About Us</h1>
</asp:Content>
Congratulations
You have created your first ASP.NET Web Forms site, with a main page (Default.aspx), a
common template for all your pages (Site.master), and a common style sheet (Site.css).
In the next chapters of this tutorial, we will add a database to the web site. And finally we will
add navigation.
Web Forms File Types

Below is a list of ASP.NET Web Forms most common file types.
Extension
.htm / .html
.css
.js
.aspx
.ascx
.asax
.asmx
.cs
Description
HTML Pages
Web pages to be viewed directly by the browser
Style Sheets
Defines styles and formatting for the web site
JavaScripts
Contains JavaScripts to be executed in the browser
Web Forms
The core of ASP.NET. Web pages with ASP.NET code.
Web User Controls
Contains code fragments to be used by multiple pages
Global Class
Global code (like startup code)
Web Service
Contains callable web services
Class Files
Contains code in C#
.vb
.config
.master
.sitemap
.xml
.sdf
.mdf
Class Files
Contains code in Vb (Visual Basic)
Web Configuration
Contains configuration information for the web site
Master Pages
Define the global structure (look) of the web site
XML Sitemap
Data stored in XML format
SQL Server Compact Databases
SQL Server Express (Access) Databases
ASP.NET Web Forms - Adding a Database

Previous
Next Chapter

Part III: Adding a Database.
What We Will Do
Create a page to list data from a database
Displaying Data from Database

With Web Forms, 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 MS Access database.
You can download the database from this link: Northwind.zip
Adding a Customers Page

In the "DemoWebForms" folder, create a new ASPX file named "Customers.aspx".
Customers.aspx
<%@ Page Title="Data" MasterPageFile="Site.master" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

<h1>Customers</h1>
<%
Dim dbconn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
dbconn=New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data
source=C:\WebData\Northwind.mdb")
objAdapter=New OledbDataAdapter("SELECT CompanyName,City,Country FROM
Customers",dbconn)
objAdapter.Fill(objDataSet,"myTable")
objTable=objDataSet.Tables("myTable")
response.write("<table border='1'>")
response.write("<tr><th>Name</th><th>City</th><th>Country</th></tr>")
for each x in objTable.Rows
response.write("<tr>")
response.write("<td>" & x("companyname") & "</td>")
response.write("<td>" & x("city") & "</td>")
response.write("<td>" & x("country") & "</td>")
response.write("</tr>")
next
response.write("</table>")
dbconn.Close()
%>
</asp:Content>
Run example
Congratulations
You have added a database to your web project.
ASP.NET Web Forms - Adding Navigation

Previous
Next Chapter

Part IV: Adding a Navigation Menu.
What We Will Do
Add a navigation menu
Add a Navigation Menu

Edit the content of the master file (Site.master).
Site.master
<%@ Master Language="VB" %>
<!DOCTYPE html>
<head id="head" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ul id="menu">
<li><a href="Default.aspx">Home</a></li>
<li><a href="Customers.aspx">Data</a></li>
<li><a href="About.aspx">About</a></li>
</ul>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<p>© <%=DateTime.Now.year%> W3Schools. All rights reserved.</p>
</div>
</form>
</body>
</html>
The master file above, is a copy of the master file from the previous chapter, with an added
unordered list (marked red).

Edit your your style sheet (Site.css):
Site.css
body
{
color: #696969;
}
#main
{
padding: 20px;
border-radius: 0 4px 4px 4px;
}
h1
{
color: #996600;
}
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #e8eef4;
}
Run example
The style sheet above, is a copy of the style sheet from the previous chapter, with added styles
for an unordered list (marked red).
Congratulations
You have added navigation to your website.
ASP.NET Web Forms - AJAX

Previous
Next Chapter

Part V: Displaying Data Using AJAX.
What We Will Do
Displaing data from the database using AJAX
Create an AJAX Server Page

In your web folder (DemoWebForms), create a new ASPX file named "getCustomers.aspx".
getCustomers.aspx
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<%
Dim dbconn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
dbconn=New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data
source=C:\WebData\Northwind.mdb")
objAdapter=New OledbDataAdapter("SELECT CompanyName,City,Country FROM
Customers",dbconn)
objAdapter.Fill(objDataSet,"customers")
objTable=objDataSet.Tables("customers")
objRow=objTable.Rows(0)
response.write("<table border='1'>")
response.write("<tr><th>Name</th><th>City</th><th>Country</th></tr>")
for each x in objTable.Rows
response.write("<tr>")
response.write("<td>" & x("companyname") & "</td>")
response.write("<td>" & x("city") & "</td>")
response.write("<td>" & x("country") & "</td>")
response.write("</tr>")
next
response.write("</table>")
dbconn.Close()
%>
The file above is a standard ASPX file, returning only an HTML table.
Create an AJAX Browser Page

In your "DemoWebForms" folder, create a new file named "Ajax.html".
Ajax.html
<!DOCTYPE html>
<html>
<head>
<title>ASP Demo</title>
</head>
<body>
<div id="main">
<h1>Customers</h1>
<div id="t01"></div>
</div>
<script>
var xmlhttp;
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("t01").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getCustomers.aspx",true);
xmlhttp.send();
</script>
</body>
</html>
Try it Yourself
Congratulations
You have created your first data page using AJAX.

Demo PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Demo PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

ASP.

NET Web Pages - Demonstration

This is a Web Pages Demonstration

Create a web site

Would You Like to Read the Tutorial First?

What Will We Create?

ASP.NET Web Pages - Creating a Web Site

Learn ASP.NET Web Pages by building a web site from scratch.

Create a Web Site

Create a Home Page

Add an About Page

ASP.NET Web Pages - Adding Style

Learn ASP.NET Web Pages by building a web site from scratch.

Create a standard style sheet for the site

Create a Style Sheet

The HTML body element <body>

Create a Layout Page

Edit the Home Page

ASP.NET Web Pages - Adding a Database

Learn ASP.NET Web Pages by building a web site from scratch.

Create a web page to list data from a database

Displaying Data from Database

Adding a Customers Page

ASP.NET Web Pages - Adding Login

Learn ASP.NET Web Pages by building a web site from scratch.

Create a WebSecurity database

The WebSecurity Object

Creating a Web Security Database

Create an AppStart Page

Edit The Style Sheet

Add a Registration Page

var password = "";

Add a Login Page

ASP.NET Web Pages - Adding Security

Learn ASP.NET Web Pages by building a web site from scratch.

Add access restriction security to a web page

Membership, Login, and Security

Adding Security to Pages

Preventing Access to the Database

ASP.NET Web Pages - Adding Navigation

Learn ASP.NET Web Pages by building a web site from scratch.

Add a navigation menu

Add a Navigation Menu

Edit The Style Sheet

ASP.NET Web Pages - AJAX

Learn ASP.NET Web Pages by building a web site from scratch.

Displaing data from the database using AJAX

Create an AJAX Server Page

Create an AJAX Browser Page

ASP.NET Web Forms - Demonstration

This is a Web Forms Demonstration

Create a web site

Add files and folders

Would You Like to Read the Tutorial First?

ASP.NET Web Forms - Creating a Website

Learn ASP.NET Web Forms by building a web site from scratch.

Create a Web Site

Create a Home Page

Add an About Page

ASP.NET Web Forms - Adding Style

Learn ASP.NET Web Forms by building a web site from scratch.

Create a standard style sheet for the site

Create a Style Sheet