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 |
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.
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() |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
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> |
Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!
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 |
