using System;
using System.Collections.Generic;
using System.Web;
using Downmoon.Framework.Controllers;
using Downmoon.Framework.Model;
using System.Text;
namespace dropdown_JQuery14_Net2
{
/// <summary>
/// Summary description for AjaxRequest
/// </summary>
public class AjaxRequest : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string Area_FatherID = string.Empty;
if (context.Request["pid"] != null)
{ Area_FatherID = context.Request["pid"].ToString(); }
string parentId = string.Empty;
//mydbDataContext db = new mydbDataContext();
//根据传过来的Value值 进行查询
//List<ChinaStates> list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();
List<Area> list = Factory.GetAreaController().GetAreaListFindByParentID(Area_FatherID);
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Write(ListToJson(list));
context.Response.End();
}
public string ListToJson(List<Area> list)
{
StringBuilder sb = new StringBuilder();
if (list != null)
{
sb.Append("[");
for (int i = 0; i < list.Count; i++)
{
sb.Append("{");
sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\",");
sb.Append("\"Area_Name\":\"" + list[i].Area_Name + "\"");
//sb.Append("\"Area_FatherID\":\"" + list[i].Area_FatherID + "\"");
if (i != list.Count - 1)
{
sb.Append("},");
}
}
}
sb.Append("}");
sb.Append("]");
return sb.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
前台：aspx
复制代码 代码如下:
<!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>
<mce:style type="text/css"><!--
#dpCity
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
--></mce:style><style type="text/css" mce_bogus="1"> #dpCity
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
</style>
<mce:script language="javascript" type="text/javascript" src="https://www.jb51.net/Scripts/jquery-1.4.1.js" mce_src="https://www.jb51.net/Scripts/jquery-1.4.1.js"></mce:script>
</head>
<body>
<form runat="server">
<div>
请选择省/市/区： <asp:DropDownList runat="server" />
<asp:DropDownList runat="server">
</asp:DropDownList>
<asp:DropDownList runat="server" AutoPostBack="false" />
</div>
<mce:script language="javascript" type="text/javascript"><!--
$(function () {
var $dp1 = $("#dpProvince");
var $dp2 = $("#dpCity");
var $dp3 = $("select[name$=dpArea]");
$dp1.focus();
//alert($dpCity);
loadAreas("000000", "0");
$dp1.bind("change keyup", function () {
if ($(this).val() != "") {
//alert($("select option:selected").val());
//loadAreas($("select option:selected").val(), "1");
var strPid = $dp1.attr("value"); //获取城市
loadAreas(strPid, "1");
$dp2.fadeIn("slow");
} else {
$dp2.fadeOut("slow");
}
});
$dp2.bind("change keyup", function () {
var strCId = $dp2.attr("value"); //获取城市
if ($(this).val() != "") {
loadAreas(strCId, "2");
$dp3.fadeIn("slow");
} else {
$dp3.fadeOut("slow");
}
});
});
function loadAreas(selectedItem, level) {
$.getJSON("AjaxRequest.ashx?pid=" + selectedItem, function (data) {
switch (level) {
case "0":
$("#dpProvince").html("");
$("#dpProvince").append("<option value='' selected='selected'>请选择...</option>");
for (var i = 0; i < data.length; i++) {
$("#dpProvince").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
};
break;
case "1":
$("#dpCity").html("");
$("#dpCity").append("<option value='' selected='selected'>请选择...</option>");
for (var i = 0; i < data.length; i++) {
$("#dpCity").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
};
break;
case "2":
$("#dpArea").html("");
$("#dpArea").append("<option value='' selected='selected'>请选择...</option>");
for (var i = 0; i < data.length; i++) {
$("#dpArea").append($("<option></option>").val(data[i].Area_ID).html(data[i].Area_Name));
};
break;
default:
break;
}
});
}
// --></mce:script>
</form>
</body>
</html>
三、基于ExtJS 3.2的Ajax框架。
后台ashx:
复制代码 代码如下: