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 C#.
First, you need to import the namespace from System.Data.SqlClient.
| using 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 (!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(); |
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.
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 moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
The front end AjaxDropDownListCsharp2005.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 /> |
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
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.AspNetTutorials.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(); } |
Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!
Looking for the VB.NET2005 Version? Click Here!
Looking for more ASP.NET Tutorials? Click Here!