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

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# CODE
 
 

  
  
  
  using
  
   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
  
  ;
        }
    }
}