dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...
本文主要列舉了省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例。前段時(shí)間需要作一個(gè)的Web前端應(yīng)用，需要用多個(gè)框架，一個(gè)典型的應(yīng)用場(chǎng)景是省市三級(jí)聯(lián)動(dòng)，基于此應(yīng)用，特將三種主要的ajax框架略作整理，方便有需要的朋友查閱。
在示例之前，我們先設(shè)置一個(gè)演示數(shù)據(jù)源，新建一個(gè)項(xiàng)目，項(xiàng)目結(jié)構(gòu)如圖：
主要文件如下：
AreaModel.cs:
using System;
using System.Collections.Generic;
namespace Downmoon.Framework.Model
{
#region PopularArea
public class Area
{
private string m_Area_ID;
///
/// 地區(qū)編號(hào)
///
public string Area_ID
{
get { return m_Area_ID; }
set { m_Area_ID = value; }
}
private string m_Area_Name;
///
/// 地區(qū)名稱
///
public string Area_Name
{
get { return m_Area_Name; }
set { m_Area_Name = value; }
}
private double m_Area_Order;
///
/// 排序
///
public double Area_Order
{
get { return m_Area_Order; }
set { m_Area_Order = value; }
}
private int m_Area_Layer;
///
/// 層級(jí)
///
public int Area_Layer
{
get { return m_Area_Layer; }
set { m_Area_Layer = value; }
}
private string m_Area_FatherID;
///
/// 父級(jí)ID
///
public string Area_FatherID
{
get { return m_Area_FatherID; }
set { m_Area_FatherID = value; }
}
public Area() { }
public Area(string id, string name, double order, int layer, string father)
{
this.Area_ID = id;
this.Area_Name = name;
this.m_Area_Order = order;
this.m_Area_Layer = layer;
this.m_Area_FatherID = father;
}
}
#endregion
}
AreaControl.cs:
using System;
using System.Collections.Generic;
using Downmoon.Framework.Model;
namespace Downmoon.Framework.Controllers
{
public class AreaList : IArea
{
// Area singleton
private static AreaList instance;
public static AreaList Instance
{
get
{
if (AreaList.instance == null)
{
AreaList.instance = new AreaList();
}
return AreaList.instance;
}
}
public List GetAreaList()
{
List Areas = new List();
Areas.Add(new Area("110000", "北京市", 0, 1, "000000"));
Areas.Add(new Area("110100", "市轄區(qū)", 0, 2, "110000"));
Areas.Add(new Area("110101", "東城區(qū)", 0, 3, "110100"));
Areas.Add(new Area("110102", "西城區(qū)", 0, 3, "110100"));
Areas.Add(new Area("110103", "崇文區(qū)", 0, 3, "110100"));
Areas.Add(new Area("330000", "浙江省", 0, 1, "000000"));
Areas.Add(new Area("330100", "杭州市", 0, 2, "330000"));
Areas.Add(new Area("330200", "寧波市", 0, 2, "330000"));
Areas.Add(new Area("330102", "上城區(qū)", 0, 3, "330100"));
Areas.Add(new Area("330103", "下城區(qū)", 0, 3, "330100"));
Areas.Add(new Area("330104", "江干區(qū)", 0, 3, "330100"));
Areas.Add(new Area("330105", "拱墅區(qū)", 0, 3, "330100"));
Areas.Add(new Area("330106", "西湖區(qū)", 0, 3, "330100"));
Areas.Add(new Area("330203", "海曙區(qū)", 0, 3, "330200"));
Areas.Add(new Area("330204", "江東區(qū)", 0, 3, "330200"));
Areas.Add(new Area("330205", "江北區(qū)", 0, 3, "330200"));
Areas.Add(new Area("330206", "北侖區(qū)", 0, 3, "330200"));
Areas.Add(new Area("330211", "鎮(zhèn)海區(qū)", 0, 3, "330200"));
return Areas;
}
public List GetAreaListFindByParentID(string filter)
{
return GetAreaList().FindAll(
delegate(Area ar)
{
return ar.Area_FatherID == filter;
}
);
}
}
}
Factory.cs
using System;
using System.Collections.Generic;
//using Downmoon.Framework.Model;
namespace Downmoon.Framework.Controllers
{
public class Factory
{
public static IArea GetAreaController()
{
return AreaList.Instance;
}
}
}
IArea.cs
using System;
using System.Collections.Generic;
using System.Text;
using Downmoon.Framework.Model;
namespace Downmoon.Framework.Controllers
{
public interface IArea
{
List GetAreaList();
List GetAreaListFindByParentID(string filterID);
}
}
一、基于aspnet自帶的Ajax框架，主要好處是與asp.net完全集成，無(wú)需寫過(guò)多的 js。缺點(diǎn)是在framework2下需作一些設(shè)置，在Framework 4下無(wú)需設(shè)置。
Framework 2：
需首先在web.config文件中作配置：
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
前臺(tái)頁(yè)面：
請(qǐng)選擇省/市/區(qū)： | AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" /> onselectedindexchanged="dpCity_SelectedIndexChanged" /> /> |
正在查詢，請(qǐng)稍候…………………… |
Framework 4：與代碼完全一樣，只是無(wú)需在web.config中作配置。
如圖：
二、基于JQuery1.4.1的Ajax框架，主要好處是與后續(xù)版本的asp.net完全集成。
基于ashx作一個(gè) Request，主要代碼：
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 description for AjaxRequest
///
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();
//根據(jù)傳過(guò)來(lái)的Value值 進(jìn)行查詢
//List list = db.ChinaStates.Where(c => c.ParentAreaCode == strId).ToList();
List 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 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;
}
}
}
}
前臺(tái)：aspx
#dpCity
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
-->
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
請(qǐng)選擇省/市/區(qū)：
三、基于ExtJS 3.2的Ajax框架。
后臺(tái)ashx:
using System;
using System.Collections.Generic;
using System.Web;
using Downmoon.Framework.Controllers;
using Downmoon.Framework.Model;
using System.Text;
namespace dropdown_ExtJS32_Net2.Ajax
{
///
/// Summary description for GetAreaXml
///
public class GetAreaXml : IHttpHandler
{
//string baseCode = "000000";
public void ProcessRequest(HttpContext context)
{
string parentId = "000000";
if (context.Request["pid"] != null)
{
parentId = context.Request["pid"].ToString();
}
//parentId = (parentId.Length > 0) ? parentId : "000000";
string parentId2 = "000000";
if (context.Request["pid2"] != null)
{
parentId2 = context.Request["pid2"].ToString();
}
#region tony 2010.2.7 update
List list = new List();
//if (parentId.Length > 0)
//{
list = Factory.GetAreaController().GetAreaListFindByParentID(parentId);
//}
else if (parentId2.Length > 0)
{
list = Factory.GetAreaController().GetAreaListFindByParentID(parentId2);
}
#endregion
context.Response.AddHeader("Cache-Control", "no-cache, must-revalidate");
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.ContentType = "text/html";
StringBuilder sb = new StringBuilder();
for (int i = 0; i < list.Count; i++)
{
sb.Append("{\"Area_Name\":\"" + list[i].Area_Name + "\",");
sb.Append("\"Area_ID\":\"" + list[i].Area_ID + "\"},");
}
string json = sb.ToString().TrimEnd(',');
context.Response.Write("{\"Results\":[" + json + "]}");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
前臺(tái)頁(yè)面.aspx
demo a dropdownlist by extjs 3.2請(qǐng)選擇 省 市 縣 |
效果如圖：
邀月注：本文版權(quán)由邀月和CSDN共同所有，轉(zhuǎn)載請(qǐng)注明出處。
助人等于自助! 3w@live.cn
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： rpc进程Linux,linux RPC
- 下一篇： mongodb安装教程Linux,Ubu