Saturday, April 4, 2009

ASP.NET and Ajax - using XmlHttpRequest




In this post i will show how to use XmlHttpRequest object in asp.net.Here's an example that fetches the Product details by categoryid.Create a new web application and add following code on Default.aspx page( I have used Ajax.aspx). Ajax.aspx 

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

<!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></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 GetProduct(id) {
          var url = "Details.aspx?CatId=" + id;
          xmlHttp = GetXmlHttpObject(stateChanged);
          xmlHttp.open("GET", url, true);
          xmlHttp.send(null);
      }


      function stateChanged() {
          if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
              document.getElementById('ProductDetails').innerHTML = xmlHttp.responseText;
          }
      }

  </script>

</head>
<body>
  <form id="form1" runat="server">
  <div>
      <div>
          <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
              DataTextField="CategoryName" DataValueField="CategoryID">
          </asp:DropDownList>
      </div>
      <div id="ProductDetails">
      </div>
  </div>
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:northwindConnectionString %>"
      SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>
  </form>
</body>
</html>



Ajax.aspx.cs




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Ajax : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
      if (!Page.IsPostBack)
      {
          DropDownList1.DataBind();
          DropDownList1.Items.Insert(0, "");
      }
      DropDownList1.Attributes["onChange"] = "GetProduct(this.value);";
      HttpResponse myHttpResponse = Response;
      HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
      DropDownList1.Attributes.AddAttributes(myHtmlTextWriter);


  }
}
And finally create Details.aspx page and remove everything from .aspx page except the first line. write down following code on Page_Load event of details.aspx page. 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data.SqlClient;

public partial class Details : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
       Response.Clear();
       StringBuilder sb = new StringBuilder();
       sb.Append("<br />");
       string connstr = System.Configuration.ConfigurationManager.ConnectionStrings["northwindConnectionString"].ConnectionString;
       string query = "SELECT * FROM Products WHERE CategoryId = @CustId";
       SqlConnection conn = new SqlConnection(connstr);
       SqlCommand cmd = new SqlCommand(query, conn);
       cmd.Parameters.AddWithValue("@CustId", Request.QueryString["CatId"]);
       conn.Open();
       SqlDataReader dr = cmd.ExecuteReader();
       while (dr.Read())
       {
           sb.Append(dr[1].ToString() + "<br />");
           sb.Append(dr[2].ToString() + "<br />");
           sb.Append(dr[3].ToString() + "<br />");
           sb.Append(dr[4].ToString() + "<br />");
           sb.Append(dr[5].ToString() + "<br />");
           sb.Append(dr[6].ToString() + "<br />");
       }
       dr.Close();
       dr.Dispose();
       conn.Close();
       conn.Dispose();
       Response.Write(sb.ToString());
       Response.End();

   }
}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)