Use jQuery to Build Ajax-enabled ASP.NET Controls | 2

Use jQuery to Build Ajax-enabled ASP.NET Controls [con't]

The Complete Source

Here's the complete source code of the generic handler used to generate the JSON data:

using System.Web;
using System.Text;
using System;
namespace jQuery_WebReference
{
  public class CustomHandler : IHttpHandler
  {
    /// <summary>
    /// Processes the request and generates the response as JSON
    /// </summary>
    /// <param name="context">An instance of the current HttpContext</param>
    public void ProcessRequest(HttpContext context)
    {
      String strDepartmentID = context.Request.QueryString["departmentID"];
      StringBuilder sbResult = new StringBuilder();
 
      switch (strDepartmentID)
      {
        case "1":
          sbResult.Append("[");
          sbResult.Append("{");
          sbResult.Append(""Department":"Joydip Kanjilal",");
          sbResult.Append(""DepartmentID":"1"");
          sbResult.Append("},");
          sbResult.Append("{");
          sbResult.Append(""Department":"Tilak Tarafder",");
          sbResult.Append(""DepartmentID":"1"");
          sbResult.Append("}");
          sbResult.Append("]");
          break;
 
        case "2":
          sbResult.Append("[");
          sbResult.Append("{");
          sbResult.Append(""Department":"Vinay KPM",");
          sbResult.Append(""DepartmentID":"2"");
          sbResult.Append("},");
          sbResult.Append("{");
          sbResult.Append(""Department":"Sriram Putrevu",");
          sbResult.Append(""DepartmentID":"2"");
          sbResult.Append("}");
          sbResult.Append("]");
          break;
 
        case "3":
          sbResult.Append("[");
          sbResult.Append("{");
          sbResult.Append(""Department":"Kunal Bhowmick",");
          sbResult.Append(""DepartmentID":"3"");
          sbResult.Append("},");
          sbResult.Append("{");
          sbResult.Append(""Department":"Souvik Das",");
          sbResult.Append(""DepartmentID":"3"");
          sbResult.Append("}");
          sbResult.Append("]");
          break;
      }
      context.Response.ContentType = "application/json";
      context.Response.ContentEncoding = Encoding.UTF8;
      context.Response.Write(sbResult.ToString());
      context.Response.End();
    }
    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

Here's the complete markup code in the Default.aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQuery_WebReference.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Using jQuery with JSON</title>
  <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(document).ready(function () {
      $("#rbDepartmentList").change(function () {
        $("#ddlDepartment").html("");
        var departmentID = $('input[name=rbDepartmentList]:checked').val();
        if (departmentID != 0) {
          $.getJSON('CustomHandler.ashx?departmentID=' + departmentID, function (getData) {
            $.each(getData, function () {
              $("#ddlDepartment").append($("<option></option>").val(this['DepartmentID']).html(this['Department']));
            });
          });
        }
      });
    });
  </script>
</head>
<body>
  <form id="frmWebReference" runat="server">
  <div>
    <table>
      <tr>
        <td>
          <asp:RadioButtonList ID="rbDepartmentList" runat="Server" ToolTip="--Select Department--">
              <asp:ListItem Text="Finance" Value="1"></asp:ListItem>
              <asp:ListItem Text="HR" Value="2"></asp:ListItem>              
              <asp:ListItem Text="Sales" Value="3"></asp:ListItem>
          </asp:RadioButtonList>
        </td>
      </tr>
      <tr>
        <td>
          Employee(s) in the Selected Department:
        </td>
        <td>
          <asp:DropDownList ID="ddlDepartment" runat="server">
          </asp:DropDownList>
        </td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

When you execute the application, you'll see a RadioButtonList control and a DropDownList control. When you select a department, the employee(s) belonging to that particular department will be dynamically populated.

Summary

JQuery provides support for browser independence, a simplified event handling model and seamless extensibility through its plug-in API. Ajax allows you to design and implement lightning fast and responsive applications with reduced consumption of resources. This article demonstrated how you can use jQuery and Ajax to build Ajax-enabled ASP.NET controls. Happy coding!

Original: June 4, 2010

[prev]

Use jQuery to Build Ajax-enabled ASP.NET Controls | 2

Use jQuery to Build Ajax-enabled ASP.NET Controls [con't]

The Complete Source

Summary

Find a programming school near you