Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
Tutorial RSS
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Charts
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - AJAX - AJAX using ASP.NET 2.0 and VB
AJAX using ASP.NET 2.0 and VB


ASP.NET AJAX Tutorial

AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology.

AJAX, short for Asynchronous JavaScript And XML, isn't a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology.

First, you  need to import the  Ajax namespace from Ajax.DLL.The Ajax namespace contains Ajax.dll encapsule Asynchronous Javascript and XML in Bin folder. This is an combination of Javascript and XML. The data is transfered in the form of XML.

Imports Ajax
Imports System.Data.SqlClient
Imports System.Data

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

In tutorial, the only configuration step beyond that is to add the following code in the web.config file, inside the <system.web> element.
  <httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>
In order to make server-side functions available through JavaScript, two things must be done. First, the function or functions in question must be marked with the Ajax.AjaxMethodAttribute. Second, the class containing these functions must be registered through a call to Ajax.Utility.RegisterTypeForAjax during the page load event. Then we use GetData() even of btnGetData and display() event of DropDownList  to do the work.  The button btnGetData is a html button. It display employee data without page post-back. When chose a particular record in the Dropdownlist, the employee name and employee ID will be displayed in the label.

The code below can go in the <head> tags of the ASPX page:

<script language="javascript" type="text/javascript">
function GetData()
{
var response;
Ajax_CSharp.GetData(GetData_CallBack);
}

function GetData_CallBack(response)
{
var response=response.value;

if(response=="Empty")
{
alert("No Record Found !!!");
}
else if(response=='Error')
{
alert("An Error occured in accessing the DataBase !!!");
}
else
{
var arr=response.split("~");
var empID=arr[0].split(",");
var empName=arr[1].split(",");

document.getElementById('dlistEmployee').length=0;
for(var i=0;i<empID.length;i++)
{
var o = document.createElement("option");
o.value = empID[i];
o.text = empName[i];
document.getElementById('dlistEmployee').add(o);
}
}
}

function display()
{
var selIndex=document.getElementById("dlistEmployee").selectedIndex;
var empName=document.getElementById("dlistEmployee").options(selIndex).text;
var empID=document.getElementById("dlistEmployee").options(selIndex).value;

document.getElementById("lblResult").innerHTML="You have selected " + empName + " ( ID : " + empID + " )";
}
</script>

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

The front end AjaxDataSearchVB.aspx page looks something like this:

<div align="center">
<input id="btnGetData" onclick="GetData();" type="button" value="To Get Employee Data From DB" style="width: 203px" />
&nbsp;&nbsp;
<asp:DropDownList ID="dlistEmployee" runat="server" onchange="display();">
</asp:DropDownList><asp:Label ID="lblResult" runat="server" Text="No Record Selected"></asp:Label>
</div>

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Register Ajax in PageLoad and get data from the employee table of  Database.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Ajax.Utility.RegisterTypeForAjax(GetType(Ajax_CSharp))
End Sub

<Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)> _
Public Function GetData() As String
Try
Dim con As New SqlConnection(ConfigurationManager.AppSettings("conn"))
Dim cmd As New SqlCommand("SELECT * FROM employee", con)
cmd.Connection.Open()

Dim adapter As New SqlDataAdapter(cmd)
Dim ds As New DataSet("DataSet")
adapter.Fill(ds, "Table")

If ds.Tables(0).Rows.Count <= 0 Then
Return "Empty"
Else
Dim empID As String = ""
Dim empName As String = ""
Dim i As Integer
For i = 0 To ds.Tables(0).Rows.Count - 1
empID += ds.Tables(0).Rows(i)(0).ToString() + ","
empName += ds.Tables(0).Rows(i)(1).ToString() + ","
Next i
empID = empID.Substring(0, empID.Length - 1)
empName = empName.Substring(0, empName.Length - 1)

Return empID + "~" + empName
End If
Catch
Return "Error"
End Try
End Function

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

The flow for the code behind page is as follows.

Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports Ajax

Class Ajax_CSharp
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Ajax.Utility.RegisterTypeForAjax(GetType(Ajax_CSharp))
End Sub

<Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)> _
Public Function GetData() As String
Try
Dim con As New SqlConnection(ConfigurationManager.AppSettings("conn"))
Dim cmd As New SqlCommand("SELECT * FROM employee", con)
cmd.Connection.Open()

Dim adapter As New SqlDataAdapter(cmd)
Dim ds As New DataSet("DataSet")
adapter.Fill(ds, "Table")

If ds.Tables(0).Rows.Count <= 0 Then
Return "Empty"
Else
Dim empID As String = ""
Dim empName As String = ""
Dim i As Integer
For i = 0 To ds.Tables(0).Rows.Count - 1
empID += ds.Tables(0).Rows(i)(0).ToString() + ","
empName += ds.Tables(0).Rows(i)(1).ToString() + ","
Next i
empID = empID.Substring(0, empID.Length - 1)
empName = empName.Substring(0, empName.Length - 1)

Return empID + "~" + empName
End If
Catch
Return "Error"
End Try
End Function
End Class

Looking for the C# 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!



 
  Developer Resources







Server Intellect Rocks