SHARE THIS PAGE

ASP.NET Web Pages - AJAX

« Previous

Next Chapter »

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

Part VII: Displaying Data Using AJAX.

What We Will Do

In this chapter we will:

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".

Put the following code inside the file:

getCustomers.cshtml

@{
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName,City,Country FROM Customers");
}
<table border="1">
<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>

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".

Put the following code inside the file:

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 »