asp.net下使用AjaxPro实现二级联动代码
程序员文章站
2024-03-08 10:58:46
复制代码 代码如下: <%@ page language="c#" autoeventwireup="true" codefile="test.aspx.cs" in...
复制代码 代码如下:
<%@ 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>
<div class=cnblogs_highlighter><pre class=brush:csharp>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;
}
}
</pre>
</div>