Home > AJAX, ASP.Net > Dynamic DropDownList with HttpRequest

Dynamic DropDownList with HttpRequest


Hi

try this example to Get Data for Selected value from Dropdownlist without postback like Ajax

but without using AJAX Control ToolKit

I use Customers table from Northwind Database

so i want to display data for Selected Customer from DropdownList control

First : Create Default.aspx page

<%@ 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>
    <script type="text/javascript">
    function GetXmlHttpObject(handler)
  {
  var objXmlHttp=null
  if (navigator.userAgent.indexOf("Opera")>=0)
  {
  alert("This example doesn't work in Opera")
  return
  }
  if (navigator.userAgent.indexOf("MSIE")>=0)
  {
  var strName="Msxml2.XMLHTTP"
  if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
  {
  strName="Microsoft.XMLHTTP"
  }
  try
  {
  objXmlHttp=new ActiveXObject(strName)
  objXmlHttp.onreadystatechange=handler
  return objXmlHttp
  }
  catch(e)
  {
  alert("Error. Scripting for ActiveX might be disabled")
  return
  }
  }
  if (navigator.userAgent.indexOf("Mozilla")>=0)
  {
  objXmlHttp=new XMLHttpRequest()
  objXmlHttp.onload=handler
  objXmlHttp.onerror=handler
  return objXmlHttp
  }
  }
//-----------
function GetCustomer(id)
  {
  var url="FetchCustomer.aspx?CustomerID=" + id ;
  xmlHttp=GetXmlHttpObject(stateChanged);
  xmlHttp.open("GET", url , true);
  xmlHttp.send(null);
  }
 
 
  function stateChanged()
  {
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
  {
  document.getElementById('CustomerDetails').innerHTML=xmlHttp.responseText;
  }
  }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Select Customer :-
        <asp: DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="CustomerID" AppendDataBoundItems="True">
            <asp:ListItem Value="-1">Select</asp:ListItem>
        </asp: DropDownList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [CustomerID], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
        <br />
        </div>
        <div id="CustomerDetails"></div>

    </form>
</body>
</html>

and in code behind :

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;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DropDownList1.Attributes["onChange"] = "GetCustomer(this.value);";
        HttpResponse myHttpResponse = Response;
        HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
        DropDownList1.Attributes.AddAttributes(myHtmlTextWriter);

    }
}

Second : Create FetchCustomer.aspx page

where i select data with Selected Value send from the first page

so in code behind of this page

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;
using System.Text;

public partial class FetchCustomer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        StringBuilder sb = new StringBuilder();
        sb.Append("<br />");

        string connstr = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        string query = "SELECT [ContactName], [ContactTitle], [Address], [City], [Country], [Phone], [PostalCode] FROM [Customers] WHERE CustomerID = @CustomerID";
        SqlConnection conn = new SqlConnection(connstr);
        SqlCommand cmd = new SqlCommand(query, conn);
        cmd.Parameters.AddWithValue("@CustomerID", Request.QueryString["CustomerID"]);
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            sb.Append("Contact Name: " + dr[0].ToString() + "<br />");
            sb.Append("ContactTitle: " + dr[1].ToString() + "<br />");
            sb.Append("ContactTitle: " + dr[2].ToString() + "<br />");
            sb.Append("City: " + dr[3].ToString() + "<br />");
            sb.Append("Country: " + dr[4].ToString() + "<br />");
            sb.Append("Phone: " + dr[5].ToString() + "<br />");
            sb.Append("PostalCode: " + dr[6].ToString() + "<br />");
        }
        dr.Close();
        dr.Dispose();
        conn.Close();
        conn.Dispose();
        Response.Write(sb.ToString());
        Response.End();

    }
}

Hope this helps

Good Luck

Advertisements
Categories: AJAX, ASP.Net Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: