asp.net省市易做图联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

答案：
本文主要列举了省市易做图联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例。前段时间需要作一个的Web前端应用，需要用多个框架，一个典型的应用场景是省市易做图联动，基于此应用，特将三种主要的ajax框架略作整理，方便有需要的朋友查阅。
在示例之前，我们先设置一个演示数据源，新建一个项目，项目结构如图：
  
主要文件如下：
AreaModel.cs:
复制代码 代码如下:

using System; 
using System.Collections.Generic; 
namespace Downmoon.Framework.Model 
{ 
#region PopularArea 
public class Area 
{ 
private string m_Area_ID; 
/// <summary> 
/// 地区编号 
/// </summary> 
public string Area_ID 
{ 
get { return m_Area_ID; } 
set { m_Area_ID = value; } 
} 
private string m_Area_Name; 
/// <summary> 
/// 地区名称 
/// </summary> 
public string Area_Name 
{ 
get { return m_Area_Name; } 
set { m_Area_Name = value; } 
} 
private double m_Area_Order; 
/// <summary> 
/// 排序 
/// </summary> 
public double Area_Order 
{ 
get { return m_Area_Order; } 
set { m_Area_Order = value; } 
} 
private int m_Area_Layer; 
/// <summary> 
/// 层级 
/// </summary> 
public int Area_Layer 
{ 
get { return m_Area_Layer; } 
set { m_Area_Layer = value; } 
} 
private string m_Area_FatherID; 
/// <summary> 
/// 父级ID 
/// </summary> 
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<Area> GetAreaList() 
{ 
List<Area> Areas = new List<Area>(); 
Areas.Add(new Area("110000", "北京市", 0, 1, "000000")); 
Areas.Add(new Area("110100", "市辖区", 0, 2, "110000")); 
Areas.Add(new Area("110101", "东城区", 0, 3, "110100")); 
Areas.Add(new Area("110102", "西城区", 0, 3, "110100")); 
Areas.Add(new Area("110103", "崇文区", 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", "上城区", 0, 3, "330100")); 
Areas.Add(new Area("330103", "下城区", 0, 3, "330100")); 
Areas.Add(new Area("330104", "江干区", 0, 3, "330100")); 
Areas.Add(new Area("330105", "拱墅区", 0, 3, "330100")); 
Areas.Add(new Area("330106", "西湖区", 0, 3, "330100")); 
Areas.Add(new Area("330203", "海曙区", 0, 3, "330200")); 
Areas.Add(new Area("330204", "江东区", 0, 3, "330200")); 
Areas.Add(new Area("330205", "江北区", 0, 3, "330200")); 
Areas.Add(new Area("330206", "北仑区", 0, 3, "330200")); 
Areas.Add(new Area("330211", "镇海区", 0, 3, "330200")); 
return Areas; 
} 
public List<Area> 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 inte易做图ce IArea 
{ 
List<Area> GetAreaList(); 
List<Area> GetAreaListFindByParentID(string filterID); 
} 
} 
 
一、基于aspnet自带的Ajax框架，主要好处是与asp.net完全集成，无需写过多的 js。缺点是在framework2下需作一些设置，在Framework 4下无需设置。 
Framework 2： 

需首先在web.config文件中作配置： 

复制代码 代码如下:
 
<?xml version="1.0"?> 
<configuration> 
<configSections> 
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> 
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> 
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> 
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> 
</sectionGroup> 
</sectionGroup> 
</sectionGroup> 
</configSections> 
<system.web> 
<customErrors defaultRedirect="" /> 
<trace mostRecent="true" pageOutput="true" /> 
<pages> 
<controls> 
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 
</controls> 
</pages> 
<compilation> 
<assemblies> 
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> 
</assemblies> 
</compilation> 
<httpHandlers> 
<remove verb="*" path="*.asmx"/> 
<add verb="*" pa

上一个：ASP.NET 应用程序级 验证用户是否登录 一般处理程序
下一个：asp.net B2B网站对接支付宝接口