Swapnil Patel's: Fill Dropdown Chain Using Ajax

This is how you can fill dropdown list from another dropdown's change event in Asp.net/ C# using Ajax.

First,

Create one web application in ASP.Net/C#.

In default.aspx paste below coding.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>
</head>
<body>
   <form id="form1" runat="server">
   <asp:ScriptManager ID="myScripManager" EnablePartialRendering="true" runat="server"></asp:ScriptManager>

   <script language="javascript" type="text/javascript">
   var prm = Sys.WebForms.PageRequestManager.getInstance();
   prm.add_initializeRequest(InitializeRequest);
   prm.add_endRequest(EndRequest);
   function InitializeRequest(sender,args)
   {
   $get('chainUpdate').style.display = 'block';
   }
   function EndRequest(sender,args)
   {
   $get('chainUpdate').style.display = 'none';
   }
   </script>

   <div>
   <asp:UpdatePanel ID="chainPanel" ChildrenAsTriggers="true" RenderMode="Block" UpdateMode="Conditional" runat="server">
   <ContentTemplate>
   <table cellpadding="0" cellspacing="0" border="0">
   <tr>
   <td>
<font style="font-size:11px;font-family:verdana;">Search for:</font>
</td>
<td style="padding-left:10px;">
<asp:DropDownList ID="drpMain" AutoPostBack="true" OnSelectedIndexChanged="drpMain_SelectedIndexChanged" runat="server">
<asp:ListItem Text="(Select)" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="Gujarat" Value="1"></asp:ListItem>
<asp:ListItem Text="Maharastra" Value="2"></asp:ListItem>
   <asp:ListItem Value="3">Rajasthan</asp:ListItem>
</asp:DropDownList>
</td>
<td style="padding-left:10px;">
<asp:DropDownList ID="drpMoto" Width="220px" AutoPostBack="true" OnSelectedIndexChanged="drpMoto_SelectedIndexChanged" Enabled="false" runat="server"/>
</td>
<td style="padding-left:10px;">
    </td>
<td style="padding-left:10px;">
<asp:Button ID="btnGo" Text="Go" OnClick="btnGo_OnClick" Enabled="false" runat="server" />
</td>
   </tr>
   <tr>
   <td colspan="5" style="text-align:left;">
   <asp:UpdateProgress ID="chainUpdate" AssociatedUpdatePanelID="chainPanel" runat="server">
   <ProgressTemplate>
   <img src="img/updating.gif" alt="Updating..." style="font:12px verdana;vertical-align:middle;" />
   </ProgressTemplate>
   </asp:UpdateProgress>
   </td>
   </tr>
   <tr>
   <td colspan="5">
   <br /><br />
   <asp:Label ID="lblResult" runat="server"></asp:Label>
   </td>
   </tr>
   </table>
   </ContentTemplate>
   </asp:UpdatePanel>
   </div>
   </form>
</body>
</html>

In code behind write below code

using System;

using System.Data;

using System.Data.OleDb;

public partial class _Default : System.Web.UI.Page

{

DataSet ds = new DataSet();

protected void Page_Load(object sender, EventArgs e)

{

if (Cache["Motos"] == null)

{

ds.ReadXml(Server.MapPath("~/XMLFiles/Motors.xml"), XmlReadMode.InferSchema);

Cache.Insert("Motos", ds);

}

else

ds = (DataSet)Cache["Motos"];

}

protected void drpMain_SelectedIndexChanged(object sender, EventArgs e)

{

DataSet ds1 = new DataSet();

string provider = "Provider=Microsoft.Jet.OLEDB.4.0;";

string db = "Data Source=D:\\Northwind.mdb";

string connstr = provider + db;

//System.Threading.Thread.Sleep(1200);

drpMoto.Items.Clear();

string query = "SELECT * FROM city WHERE stateid =" + drpMain.SelectedValue;

OleDbConnection conn = new OleDbConnection(connstr);

//conn.Open();

OleDbDataAdapter ad = new OleDbDataAdapter(query, conn);

ad.Fill(ds1, "city");

drpMoto.DataTextField = "cityname";

drpMoto.DataValueField = "cityid";

drpMoto.DataSource = ds1.Tables["city"];

drpMoto.DataBind();

//conn.Close();

//ds1.Dispose();

//conn.Dispose();

drpMoto.Enabled = true;

// drpBrand.Items.Clear();

// drpBrand.Enabled = false;

btnGo.Enabled = false;

}

Swapnil Patel's

Tuesday, August 31, 2010

Fill Dropdown Chain Using Ajax

1 comment: