用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> </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;
}
}用AjaxPro实现二级联动的更多相关文章
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- Select标签下拉列表二级联动级联
首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...
- 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动（xml方法）
之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...
- 利用JavaScript来实现省份—市县的二级联动
所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...
- 省市二级联动（原生JS）
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- asp.net mvc jQuery 城市二级联动
页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...
- Dwz下拉菜单的二级联动
在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name, 增加了属性:ref. ref 属 ...
- xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...
随机推荐
- PHP之文件的锁定、上传与下载
小结文件的锁定机制.上传和下载 1.文件锁定 现在都在讲究什么分布式.并发等,实际上文件的操作也是并发的,在网络环境下,多个用户在同一时刻访问页面,对同一服务器上的同一文件进行着读取,如果,这个用户刚 ...
- J2EE项目应用开发过程中的易错点
场景一 实体类型与数据库类型不一致,在进行条件查询过程中不走索引 分析 字段值类型和数据库定义的字段类型不一致时,MySQL就会在内部做数据转化, 它的处理行为就会和我们期望的有些不一样,当我们使用整 ...
- ###《Effective STL》--Chapter3
点击查看Evernote原文. #@author: gr #@date: 2014-09-13 #@email: forgerui@gmail.com Chapter3 关联容器 Topic 22: ...
- ### 学习《C++ Primer》- 8
Part 8: 面向对象(第15章) // @author: gr // @date: 2015-01-09 // @email: forgerui@gmail.com 一.OOP 面向对象程序设计的 ...
- 【html】【21】高级篇--搜索框
下载: http://www.xwcms.net/js/bddm/25368.html 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- java中的异常处理机制_finally的使用
finally总结: finally代码块:定义一定执行的代码 通常用于关闭资源或者某些一定执行的代码 实例1:finally功能演示 class FuShuException extends Exc ...
- 导出Execel
//请求入口 @SuppressWarnings("serial")@ParentPackage("default") //action请求@Results( ...
- 百练_4120 硬币（DP）
描述 宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面值分别为a1,a2… an. Bob在机场看到了一个特别喜欢的礼物,想买来 ...
- 两种Ajax方法
两种Ajax方法 Ajax是一种用于快速创建动态网页的技术,他通过在后台与服务器进行少量的数据交换,可以实现网页的异步更新,不需要像传统网页那样重新加载页面也可以做到对网页的某部分作出更新,现在这项技 ...
- iOS 分类思想(1)
1.需求:如果对一个类在不更改代码的基础上要为它再扩充额外的方法可以使用继承和分类 2.分类 作用:可以在不修改原来类代码的基础上,给某一个类扩充一些对象方法或者类方法,因此一个类可以有多个分类 实现 ...