webservice动态加载下拉列表
如果你对 WebService 完全不懂, 请查看一下这篇文章 http://www.code-studio.net/CSView.aspx?aid=253), 因为本文实例使用到 AJAX.NET 1.0 正式版组件, 涉及修改 Web.config 文件等.
使用 WebService 实现动态加载下拉列表基本思路很简单, 分以下几步:
1. 加载一个根选项, 如动态加载省份各市下载列表, 则必须先有一个初始列表, 如省份列表.
2. 根本根选项内容, 异步调用服务端方法, 将返回的数据现加载到一个下拉列表.
3. 保存最后程序需要选择项到一个 Hidden 服务器控件.(因为经我测试, 客户端脚本加载的下拉列表在回发到服务端将是空的, 不得已只好保存到 Hidden 控件)
4. 将页面的 EnableEventValidation 设为 false.(这样降低程序的安全性, 注意! 如验证控件可能被恶意用户跳过, 所以要另外人工加强代码安全性)
详细代码如下
default.aspx
WebService.cs
使用 WebService 实现动态加载下拉列表基本思路很简单, 分以下几步:
1. 加载一个根选项, 如动态加载省份各市下载列表, 则必须先有一个初始列表, 如省份列表.
2. 根本根选项内容, 异步调用服务端方法, 将返回的数据现加载到一个下拉列表.
3. 保存最后程序需要选择项到一个 Hidden 服务器控件.(因为经我测试, 客户端脚本加载的下拉列表在回发到服务端将是空的, 不得已只好保存到 Hidden 控件)
4. 将页面的 EnableEventValidation 设为 false.(这样降低程序的安全性, 注意! 如验证控件可能被恶意用户跳过, 所以要另外人工加强代码安全性)
详细代码如下
default.aspx
HTML CODE<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " EnableEventValidation = " false " %> <% @ Register Assembly = " System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 " Namespace = " System.Web.UI " TagPrefix = " asp " %> <! 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 > 无标题页 </ title > </ head > < body > < form id ="form1" runat ="server" > < div > < asp:ScriptManager ID ="ScriptManager1" runat ="server" > < Services > < asp:ServiceReference Path ="WebService.asmx" InlineScript ="true" /> <% -- Path 值为.asmx 文件路径 -- %> </ Services > </ asp:ScriptManager > < input id ="Text1" type ="text" />< input id ="Button3" type ="button" value ="Hello!-最简单的异步调用" onclick ="helloCodeStudio()" /> < select id ="listProvince" onclick ="getCities()" > < option value ="" selected ="selected" > 选择省份 </ option > < option value ="GD" > 广东 </ option > < option value ="BJ" > 北京 </ option > </ select > < asp:DropDownList ID ="ddlCities" runat ="server" onclick ="setCity()" > </ asp:DropDownList > < asp:HiddenField ID ="hdnCity" runat ="server" /> < asp:Button ID ="Button4" runat ="server" OnClick ="Button4_Click" Text ="提交" /> < asp:Label ID ="Label1" runat ="server" Text ="Label" ></ asp:Label ></ div > </ form > < script type ="text/javascript" > function helloCodeStudio(){ // 我们要为每个 WebService 传递一个客户端脚本方法用于更新页面 WebService.HelloCodeStudio(onHelloCodeStudioReturned); } function onHelloCodeStudioReturned(rtnValue){ // $get 方法是 AJAX.NET 定义好的一个方法, 我们只管用就行了. // 该方法等价于 document.getElementById(var elementId) $get( " Text1 " ).value = rtnValue; } function getCities(){ var oProvince = $get( " listProvince " ); var sSelectedProvince = oProvince.options[oProvince.selectedIndex].value; if (sSelectedProvince != "" ) WebService.GetCities(sSelectedProvince,onGetCitiesReturned) } function setCity(){ var oHdnElm = $get( " hdnCity " ); var oCities = $get( " <%=ddlCities.ClientID %> " ); oHdnElm.value = oCities.options[oCities.selectedIndex].text; } function onGetCitiesReturned(rtnValue){ if (rtnValue != null ){ var oCities = $get( " <%=ddlCities.ClientID %> " ); for ( var i = 0 ;i != oCities.length; ++ i) oCities.options[i] = null ; for ( var i = 0 ;i != rtnValue.length; ++ i){ var opt = new Option(); opt.text = rtnValue[i]; oCities.options[i] = opt; } setCity(); } } </ script > </ body > </ html >
WebService.cs
C# CODEusing System; using System.Web; using System.Collections; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services; /// <summary> /// WebService 的摘要说明 /// </summary> [WebService(Namespace = " http://tempuri.org/ " )] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] // 表示整个类的所有方法都允许客户端脚本异步调用 public class WebService : System.Web.Services.WebService { public WebService () { // 如果使用设计的组件，请取消注释以下行 // InitializeComponent(); } [WebMethod] public string HelloCodeStudio() { // 简单到只返回一个字符串 return " Hello Code Studio " ; } [WebMethod] public string [] GetCities( string province) { // 本实例只为说明方法, 所以简单的使用两上个数组变量充当所谓的数据源. // 实际使用应该是根据自己需要而定, 如 数据库, XML, 或者或者文件形式等 string [] GD = { " 广州 " , " 深圳 " , " 佛山 " , " 珠海 " , " 东莞 " , " 惠州 " , " 汕头 " , " 汕尾 " , " 茂名 " , " 清远 " , " 河源 " , " 肇庆 " }; string [] BJ = { " 海淀区 " , " 朝阳区 " , " XX区 " , " YY区 " }; switch (province) { case " GD " : return GD; case " BJ " : return BJ; default : return null ; } } }