With the XMLHttpRequest object, Microsoft Internet Explorer clients can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side XML DOM or Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation.
This tutorial will show you how to Working with DropDownLists by ajax using ASP.NET 2.0 and VB.NET.
First, you need to import the namespace from System.Data.SqlClient.
|
Imports System.Data.SqlClient
|
Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!
The System.Data.SqlClient namespace contains The System.Data.SqlClient namespace is the .NET Framework Data Provider for SQL Server.The .NET Framework Data Provider for SQL Server describes a collection of classes used to access a SQL Server database in the managed space.
In order to working with AJAX, we need XMLHttpRequest object. With the XMLHttpRequest object, Microsoft Internet Explorer clients can retrieve and submit XML data directly to a Web server without reloading the page. To convert XML data into renderable HTML content, use the client-side XML DOM or Extensible Stylesheet Language Transformations (XSLT) to compose HTML elements for presentation. In tutorial, we need a DropDownLists with being embed <Div> also.
The code is simple, there is nothing complex in it. In the page load event, I am register the attribute of Drowdownlist. It is for checking whether the ProvinceID is empty. If it is not be empty, I will call the function bind.
If Not Page.IsPostBack Then
Me.DropDownList1.Attributes.Add("onchange", "return startRequest();")
ListProvince()
If ProvinceID <> "" Then
GetCityByProvinceID(ProvinceID)
End If
Private ReadOnly Property ProvinceID() As String
Get
If Not (Request("ProvinceID") Is Nothing) AndAlso Request("ProvinceID").ToString() <> "" Then
Return Request("ProvinceID")
Else
Return ""
End If
End Get
Private Function GetDataSet(sql As String) As DataSet
Dim constring As String = System.Configuration.ConfigurationSettings.AppSettings("ConnectionString")
Dim sda As New SqlDataAdapter(sql, constring)
Dim ds As New DataSet()
sda.Fill(ds)
Return ds
End Function
Private Sub GetCityByProvinceID(ProvinceID As String)
Dim connStr As String = ConfigurationSettings.AppSettings("ConnectionString")
Dim conn As New SqlConnection(connStr)
Dim sql As String = "select * from authors where au_id='" + ProvinceID + "'"
Dim cmd As New SqlCommand(sql, conn)
conn.Open()
Dim dr As SqlDataReader = cmd.ExecuteReader()
Dim s As String = "<table cellspacing='0' cellpadding='4' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>"
s += "<tr style='color:White;background-color:#990000;font-weight:bold;'>"
s += "<th scope='col'>Authors_ID</th><th scope='col'>FirstName</th><th scope='col'>City</th>
<th scope='col'>Phone</th><th scope='col'>state</th><th scope='col'>zip</th></tr>"
Dim m As Integer = 0
While dr.Read()
If m Mod 2 = 0 Then
s += "<tr style='color:#333333;background-color:#FFFBD6;'>"
Else
s += "<tr style='color:#333333;background-color:White;'>"
End If
m += 1
s += "<td>" + dr("au_id") + "</td>"
s += "<td>" + dr("au_fname") + "</td>"
s += "<td>" + dr("city") + "</td>"
s += "<td>" + dr("phone") + "</td>"
s += "<td>" + dr("state") + "</td>"
s += "<td>" + dr("zip") + "</td>"
s += "</tr>"
End While
s += "</table>"
dr.Close()
conn.Close()
Me.Response.Write(s)
Me.Response.End() |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
Every DropDownList is rendered as a <SELECT> element in HTML. Each of these elements has its controller, called AjaxDropDownController. The controller has a lot of things to do:
Execute asynchronous request to web server to get data.
Populate the dropdownlist.
Listen to the change event of dropdownlist.
Be the observer and the observable.
Persist the content of dropdownlist in the client side.
When the controller needs to update its dropdownlist, it will call startRequest(). While calling these methods, it may pass a filter string, which is the name-value pair of the dropdownlist that it depends to. Inside the ProvinceID value, a request URL is constructed which contains the id and filter parameters.
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
function startRequest()
{
//debugger;
var ProvinceID=document.getElementById("DropDownList1");
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "?ProvinceID="+ProvinceID.value, true);
xmlHttp.send(null);
}
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
document.getElementById("gridiv").innerHTML=xmlHttp.responseText;
}
}
</script>
|
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
The front end AjaxDropDownListVB2005.aspx page looks something like this:
<div align="center">
<asp:Label ID="Label1" runat="server" Text="Please Slect Author's ID:"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Width="160px">
</asp:DropDownList>
<br />
</div>
|
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
The flow for the code behind page is as follows.
Imports System
Imports System.Data
Imports System.Configuration
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 System.Data.SqlClient
Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'This tutorial is provided in part by Server Intellect Web Hosting Solutions http://www.serverintellect.com
'Visit http://www.AspNetTutorials.com for more ASP.NET Tutorials
If Not Page.IsPostBack Then
Me.DropDownList1.Attributes.Add("onchange", "return startRequest();")
ListProvince()
If ProvinceID <> "" Then
GetCityByProvinceID(ProvinceID)
End If
End If
End Sub
Private ReadOnly Property ProvinceID() As String
Get
If Not (Request("ProvinceID") Is Nothing) AndAlso Request("ProvinceID").ToString() <> "" Then
Return Request("ProvinceID")
Else
Return ""
End If
End Get
End Property
Private Function GetDataSet(sql As String) As DataSet
Dim constring As String = System.Configuration.ConfigurationSettings.AppSettings("ConnectionString")
Dim sda As New SqlDataAdapter(sql, constring)
Dim ds As New DataSet()
sda.Fill(ds)
Return ds
End Function
Private Sub GetCityByProvinceID(ProvinceID As String)
Dim connStr As String = ConfigurationSettings.AppSettings("ConnectionString")
Dim conn As New SqlConnection(connStr)
Dim sql As String = "select * from authors where au_id='" + ProvinceID + "'"
Dim cmd As New SqlCommand(sql, conn)
conn.Open()
Dim dr As SqlDataReader = cmd.ExecuteReader()
Dim s As String = "<table cellspacing='0' cellpadding='4' border='0' id='GridView1' style='color:#333333;border-collapse:collapse;'>"
s += "<tr style='color:White;background-color:#990000;font-weight:bold;'>"
s += "<th scope='col'>Authors_ID</th><th scope='col'>FirstName</th><th scope='col'>City</th>
<th scope='col'>Phone</th><th scope='col'>state</th><th scope='col'>zip</th></tr>"
Dim m As Integer = 0
While dr.Read()
If m Mod 2 = 0 Then
s += "<tr style='color:#333333;background-color:#FFFBD6;'>"
Else
s += "<tr style='color:#333333;background-color:White;'>"
End If
m += 1
s += "<td>" + dr("au_id") + "</td>"
s += "<td>" + dr("au_fname") + "</td>"
s += "<td>" + dr("city") + "</td>"
s += "<td>" + dr("phone") + "</td>"
s += "<td>" + dr("state") + "</td>"
s += "<td>" + dr("zip") + "</td>"
s += "</tr>"
End While
s += "</table>"
dr.Close()
conn.Close()
Me.Response.Write(s)
Me.Response.End()
End Sub
Private Sub ListProvince()
Dim sql As String = "select * from authors"
Dim ds As DataSet = GetDataSet(sql)
DropDownList1.DataSource = ds
DropDownList1.DataTextField = "au_id"
DropDownList1.DataValueField = "au_id"
DropDownList1.DataBind()
End Sub |
Download the Full Working Version of this Project written with Visual Studio.NET VB.NET 2005 Here!
Looking for the C# 2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!