dropdownlist ajax联动,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;
///
/// 地区编号
///
public string Area_ID
{
get { return m_Area_ID; }
set { m_Area_ID = value; }
}
private string m_Area_Name;
///
/// 地区名称
///
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;
///
/// 层级
///
public int Area_Layer
{
get { return m_Area_Layer; }
set { m_Area_Layer = value; }
}
private string m_Area_FatherID;
///
/// 父级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", "市辖区", 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 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完全集成,无需写过多的 js。缺点是在framework2下需作一些设置,在Framework 4下无需设置。
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"/>
前台页面:
请选择省/市/区: |
AutoPostBack="true" onselectedindexchanged="dpProvince_SelectedIndexChanged" /> onselectedindexchanged="dpCity_SelectedIndexChanged" /> /> |
正在查询,请稍候…………………… |
Framework 4:与代码完全一样,只是无需在web.config中作配置。
如图:
二、基于JQuery1.4.1的Ajax框架,主要好处是与后续版本的asp.net完全集成。
基于ashx作一个 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();
//根据传过来的Value值 进行查询
//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;
}
}
}
}
前台:aspx
#dpCity
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
-->
{
display: none;
position: relative;
}
#dpArea
{
display: none;
position: relative;
}
请选择省/市/区:
三、基于ExtJS 3.2的Ajax框架。
后台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;
}
}
}
}
前台页面.aspx
demo a dropdownlist by extjs 3.2
请选择 省 市 县 |
效果如图:
邀月注:本文版权由邀月和CSDN共同所有,转载请注明出处。
助人等于自助! 3w@live.cn
dropdownlist ajax联动,asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例...相关推荐
- 使用ajax和json实现省市区三级联动
使用ajax和json实现省市区三级联动 运行效果 HTML部分 <div id="address"><label>家庭住址:</label>& ...
- JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- php省城联动_使用php ajax实现一个省市区的三级联动
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...
- 完整,详细的基于jquery省市三级联动和基于angular的省市三级联动对比
前几天遇到需要输入地址的一个项目,里面就会有全国各个省市县的选择. 对于全国省市县的选择,难点在于全国省市县的数据资源.而具体的操作并不是很难. 本来我想免费发送资源的,可是csdn,这最少也需要1积 ...
- 原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
- php原生态三级联动_ajax php实现三级联动的方法
ajax php实现三级联动的方法 发布时间:2020-08-19 09:34:43 来源:亿速云 阅读:106 作者:小新 小编给大家分享一下ajax php实现三级联动的方法,希望大家阅读完这篇文 ...
- mysql 省市区三级联动_javaweb--json--ajax--mysql实现省市区三级联动(附三级联动数据库)...
在web中,实现三级联动很常见,尤其是利用jquery+json.但是从根本上来说jquery并不是最能让人容易理解的,接下来从最基本的javascript开始,实现由javascript+json+ ...
- jquery三级联动模糊查询_jquery三级联动
三级联动 --请选择-- --请选择-- --请选择-- $(function(){functioninitCity(){ $("#city").html('--请选择--'); ...
- python省市区三级联动_Django Admin实现三级联动的示例代码(省市区)
通过自定义Admin的模板文件实现省市区的三级联动.要求创建记录时,根据省>市>区的顺序选择依次显示对应数据. 修改记录时默认显示已存在的数据. Model class Member(mo ...
最新文章
- golang reflect 反射 简介
- .Net Micro Framework研究—TCP/IP通信
- python向mysql中添加数据_Django save()方法不向Mysql数据库插入数据
- oracle日志表设计,数据库设计 – 数据库日志表结构
- iPhone上运行Linux也要来了
- react中规范类型接口的使用
- 世界上第一位程序员,竟然是诗人拜伦的女儿?
- 互联网架构设计漫谈 (1)-概述
- 论述计算机模拟的优势与重要性,计算机模拟技术在高中地理教学的应用
- Zabbix自定义监控、自动报警
- j2ee,ajax中文乱码解决方法。。
- 28款GitHub最流行的开源机器学习项目
- 问卷星全自动填写脚本浅尝
- 怎么预防和清除计算机病毒,预防和清除计算机病毒的方法
- 关于购物网站的设计概念
- 【无标题】关于BC25连接电信物联网平台的问题(批量产品在广东连接不到物联网平台,在合肥测试是可以的)
- 线性神经网络原理以及MATLAB算法实现权值拟合和可线性分类
- excel怎么设置打印区域_Excel如何设置打印区域及打印区域如何调整
- 姬魔恋战纪服务器维护,《姬魔恋战纪》11月7日更新公告
- Jmeter结果各参数含义
热门文章
- c++一个类创建多个对象_C ++ | 创建一个类的多个对象
- ruby打印_Ruby程序打印一个数字的乘法表
- c ++查找字符串_C ++类和对象| 查找输出程序| 套装3
- pacemaker+corosync实现集群管理
- Java即时类| hashCode()方法与示例
- 一文读懂MySQL查询语句的执行过程
- 聊聊近期的感受和10月文章精选!
- 面试突击 004 | 如何排查 Redis 中的慢查询?视频实战篇
- Spring Boot(十三)RabbitMQ安装与集成
- Win7搭建NodeJs开发环境以及HelloWorld展示—图解