用AjaxPro实现二级联动

在实际asp.net项目中经常会遇到无刷新二级或者N级(N>=2)联动情况，其实N级联动和二级联动的原理都是一样的，实现这种办法有很多，一种是纯脚本实现（动态生成Array数组），一种是采用微软的Ajax.net中的UpdatePanel来实现，今天给大家来展示如何采用AjaxPro来实现，相关文章请参考http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx《AjaxPro与服务器端交互过程中如何传值》一文。
前台aspx页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %><!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>AjaxPro实现二级联动</title>
</head>
<body><form id="form1" runat="server"><div><table width="200" border="0" align="center" cellpadding="3" cellspacing="1" bordercolor="#FFFFFF" style="border-collapse: collapse"><tr align="center"><td height="20" colspan="2"><strong>AjaxPro实现二级联动</strong>&nbsp;</td></tr><tr class="tdbg" ><td width="30%">省份</td><td width="70%" align="left"><asp:DropDownList ID="ddlStateList" runat="server" DataTextField="StateName" DataValueField="StateId"></asp:DropDownList></td></tr><tr class="tdbg" ><td><strong>城市</strong></td><td align="left"><asp:DropDownList ID="ddlCityList" runat="server"></asp:DropDownList></td></tr></table></div><script language="javascript" type="text/javascript" defer="defer"> function ShowCity(id){var res=Test.GetCityList(parseInt(id)).value;var ddl=document.getElementById("<%=ddlCityList.UniqueID %>");ddl.length=0;if(res){//res是服务器返回的一个List<City>集合for(var i=0;i<res.length;i++){ddl.options.add(new Option(res[i].CityName,res[i].CityId));//从上面可以看出可以直接调用List<City>集合中的元素和它们的属性}}}
</script></form>
</body>
</html>

后台.cs代码，注意为了省事，我把两个实体类也一同归并到一个.cs文件中了。

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;/*** 写作说明：本文展示了如何利用AjaxPro与服务器交互，并且还展示了在Js中可以直接调用服务器返回的集合和直接调用服务器上class的属性* 作者：周公* 日期：2008-1-1* 首发地址：http://blog.csdn.net/zhoufoxcn/**/
public partial class Test : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e){if (!Page.IsPostBack){List<State> stateList = new List<State>(10);stateList.Add(new State(0, "选择城市"));//默认选项stateList.Add(new State(1,"北京"));stateList.Add(new State(2, "天津"));stateList.Add(new State(3, "上海"));stateList.Add(new State(4, "湖北"));stateList.Add(new State(5, "湖南"));stateList.Add(new State(6, "山西"));ddlStateList.DataSource = stateList;ddlStateList.DataBind();ddlStateList.Attributes["onchange"] = "ShowCity(this.options[selectedIndex].value)";}AjaxPro.Utility.RegisterTypeForAjax(typeof(Test));//注册}[AjaxPro.AjaxMethod]public List<City> GetCityList(int stateId){//呵呵，都是我熟悉的城市或者区List<City> cityList = new List<City>(12);cityList.Add(new City(11, "海淀区", 1));cityList.Add(new City(12, "朝阳区", 1));cityList.Add(new City(13, "大港区", 2));cityList.Add(new City(14, "南开区", 2));cityList.Add(new City(15, "普陀区", 3));cityList.Add(new City(16, "黄浦区", 3));cityList.Add(new City(17, "黄冈市", 4));cityList.Add(new City(18, "荆州市", 4));cityList.Add(new City(19, "长沙市", 5));cityList.Add(new City(20, "岳阳市", 5));cityList.Add(new City(21, "太原市", 6));cityList.Add(new City(22, "大同市", 6));List<City> tempList = new List<City>();for (int i = 0; i < cityList.Count; i++){if (cityList[i].StateId == stateId){tempList.Add(cityList[i]);}}return tempList;}
}
/// <summary>
/// 省份信息
/// </summary>
public class State
{private int stateId;private string stateName;/// <summary>/// 省份名/// </summary>public string StateName{get { return stateName; }set { stateName = value; }}/// <summary>/// 省份编号/// </summary>public int StateId{get { return stateId; }set { stateId = value; }}public State(int stateId, string stateName){this.stateId = stateId;this.stateName = stateName;}
}
/// <summary>
/// 城市信息
/// </summary>
public class City
{private int cityId;private int stateId;private string cityName;/// <summary>/// 城市名称/// </summary>public string CityName{get { return cityName; }set { cityName = value; }}/// <summary>/// 城市所在省份编号/// </summary>public int StateId{get { return stateId; }set { stateId = value; }}/// <summary>/// 城市编号/// </summary>public int CityId{get { return cityId; }set { cityId = value; }}public City(int cityId, string cityName, int stateId){this.cityId = cityId;this.cityName = cityName;this.stateId = stateId;}}

转载于:https://www.cnblogs.com/PearlRan/p/4833071.html

用AjaxPro实现二级联动相关推荐

popwindow下拉筛选二级联动_职场人必备！一分钟搞定Excel二级联动下拉菜单
对于一级下拉菜单的设置,相信经常使用Excel的用户都不陌生,那么,二级联动下拉菜单又是什么呢?与一级下拉菜单有什么关系呢? 二级联动下拉菜单是根据一级下拉菜单内容的变化而变化的.大家都知道,不同的部 ...
select三级联动怎么删除前一个的_python测试开发django57.xadmin选项二级联动
前言当我们选择项目分类的时候,一个项目下关联多个模块,同时有这两个选项框的时候,需要实现选中一个项目,模块里面自动删除出该项目下的模块,如下图这种解决基本思路: 1.写个jqeury脚本监听cha ...
关于ExtJS在使用下拉列表框的二级联动获取数据
2019独角兽企业重金招聘Python工程师标准>>> 使用下拉列表框的二级联动获取数据,如果第一个下拉列表框有默认值时,需要设置fireEvent执行select事件示例: va ...
二级联动菜单，简单实现
/*** jQuery Linkage Menu** Copyright 2014, sunyingyuan* QQ: 1586383022* Email: yingyuansun@163.com** ...
Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"><o ...
Vue -- 配合iView实现省市二级联动
在实现省市二级联动时,如果省份和城市写在一个数组对象中.可以根据,点击某个省份时获取到目标省份的id 是否同数组中的某个对象id一致来判断 iView中的on-change事件 on-change ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
ADO.NET——二级联动 +ajax
View视图代码: //需要定义一个表里,用onchange事件来给市下拉框传值 //加载事件 $(function () { shengxia(); shi(""); }) // ...
vue一二级联动清空二级数据_【周一实用技巧】二级联动还不够，自动更新才最牛。Excel 2013利用数据验证条件制作一级、二级联动和自动更新下拉列表...
Excel 2013实用技巧教程系列第-9.4-节下拉列表下拉列表作为提高数据录入效率和防止错误数据的有效方法,在日常工作中应用非常普遍.除了一级.二级联动列表,小编excel小课堂(ID:e ...

用AjaxPro实现二级联动

用AjaxPro实现二级联动相关推荐

最新文章

热门文章