This tutorial will show you how to Working with DropDownLists by ajax using ASP.NET 2.0 and C#.
First, you need to import the namespace from System.Data.SqlClient.
| using System.Data.SqlClient; |
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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 (!Page.IsPostBack)
{
this.DropDownList1.Attributes.Add("onchange", "return startRequest();"); ListProvince(); if (ProvinceID != "") {
GetCityByProvinceID(ProvinceID); }
private DataSet GetDataSet(string sql)
{
string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda =new SqlDataAdapter(sql,constring);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds; }
private void GetCityByProvinceID(string ProvinceID)
{
string connStr = ConfigurationSettings.AppSettings["ConnectionString"]; SqlConnection conn = new SqlConnection(connStr); string sql = "select * from authors where au_id='" + ProvinceID + "'"; SqlCommand cmd = new SqlCommand(sql, conn); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); string s = @"<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>"; int m = 0; while (dr.Read()) {
if (m % 2 == 0) {
s += "<tr style='color:#333333;background-color:#FFFBD6;'>"; } else {
s += "<tr style='color:#333333;background-color:White;'>"; } m++; 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>";</tr> } s+="</table>"; dr.Close(); conn.Close(); this.Response.Write(s); this.Response.End(); |
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:
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
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> |
The front end AjaxDropDownListCsharp2005.aspx page looks something like this:
If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
<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 /> |
The flow for the code behind page is as follows
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
if (!Page.IsPostBack) {
// 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 this.DropDownList1.Attributes.Add("onchange", "return startRequest();"); ListProvince(); if (ProvinceID != "") {
GetCityByProvinceID(ProvinceID); } } } private string ProvinceID {
get {
if (Request["ProvinceID"] != null && Request["ProvinceID"].ToString() != "") {
return Request["ProvinceID"]; } else {
return ""; } } } private DataSet GetDataSet(string sql) {
string constring=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda =new SqlDataAdapter(sql,constring);
DataSet ds=new DataSet();
sda.Fill(ds);
return ds; } private void GetCityByProvinceID(string ProvinceID) {
string connStr = ConfigurationSettings.AppSettings["ConnectionString"]; SqlConnection conn = new SqlConnection(connStr); string sql = "select * from authors where au_id='" + ProvinceID + "'"; SqlCommand cmd = new SqlCommand(sql, conn); conn.Open(); SqlDataReader dr = cmd.ExecuteReader(); string s = @"<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>"; int m = 0; while (dr.Read()) {
if (m % 2 == 0) {
s += "<tr style='color:#333333;background-color:#FFFBD6;'>"; } else {
s += "<tr style='color:#333333;background-color:White;'>"; } m++; 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>"; } s+="</table>"; dr.Close(); conn.Close(); this.Response.Write(s); this.Response.End(); } private void ListProvince() {
string sql = "select * from authors";
DataSet ds = GetDataSet(sql);
DropDownList1.DataSource = ds;
DropDownList1.DataTextField = "au_id";
DropDownList1.DataValueField = "au_id";
DropDownList1.DataBind(); } |
We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!
Looking for the VB.NET2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!