本文主要列举了省市三级联动的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 interface IArea
{
List<Area> GetAreaList();
List<Area> GetAreaListFindByParentID(string filterID);
}
}
一、基于aspnet自带的Ajax框架，主要好处是与asp.net完全集成，无需写过多的 js。缺点是在framework2下需作一些设置，在Framework 4下无需设置。
Framework 2：
需首先在web.config文件中作配置：
复制代码 代码如下: