DotNet Tutorials

Server Intellect

Navigator : Home > Tutorials > AJAX Tutorials > ...

 AJAX working with DropDownLists using VB.NET

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

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


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

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:

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


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

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.DotNetTutorials.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
End Class


We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

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!
 
123 ASP

411 ASP

Dot Net Freaks

Server Intellect