客户端用JavaScript填充DropDownList控件，服务器端读不到值

版权所有：基础软件。作者邮箱：[email protected]。本文首发于 http://www.cnblogs.com/FoundationSoft。文章转载请保持此版权信息并注明出处。

今天遇到一个奇怪的问题，某一页面需要使用三级级联下拉列表框。为提高用户体验，采用jQuery的cascadingDropDown插件调用后台Web Services来实现ajax填充。填充没有任何问题，但是在服务器端却取不出来下拉表中的内容。页面代码如下。

 

  
    

   
     
   
      
   
     <
   
     form 
   
     id
   
     ="form1"
   
      runat
   
     ="server"
   
     >
   
     
 
   
     <
   
     div
   
     >
   
     
 
   
     <
   
     h3
   
     >
   
     看看用js填充的dropdownlist控件在服务器端能读出来吗？
   
     </
   
     h3
   
     >
   
     
 三个级联下拉列表框：
 
   
     <
   
     asp:DropDownList 
   
     runat
   
     ="server"
   
      id
   
     ="bigTypeList"
   
      Width
   
     ="150"
   
     >
   
     
 
   
     </
   
     asp:DropDownList
   
     >
   
     
 
   
     <
   
     asp:DropDownList 
   
     runat
   
     ="server"
   
      id
   
     ="typeList"
   
      Width
   
     ="150"
   
     >
   
     
 
   
     </
   
     asp:DropDownList
   
     >
   
     
 
   
     <
   
     asp:DropDownList 
   
     runat
   
     ="server"
   
      id
   
     ="smalltypeList"
   
      Width
   
     ="150"
   
     >
   
     
 
   
     </
   
     asp:DropDownList
   
     >
   
     
 
   
     <
   
     br 
   
     />
   
     
 
   
     <
   
     asp:Button 
   
     runat
   
     ="server"
   
      Text
   
     ="读取下拉表"
   
      ID
   
     ="OK"
   
      onclick
   
     ="OK_Click"
   
      
   
     /><
   
     br 
   
     />
   
     
 你选的是：
   
     <
   
     asp:Label 
   
     runat
   
     ="server"
   
      Text
   
     ="Label"
   
      ID
   
     ="label1"
   
     ></
   
     asp:Label
   
     >
   
     
 
   
     </
   
     div
   
     >
   
     
 
   
     </
   
     form
   
     >
  
    

用来测试的后台代码如下。

 

 

  
    

   
     
   
     protected
   
      
   
     void
   
      OK_Click(
   
     object
   
      sender, EventArgs e)
{
 ListItem[] array 
   
     =
   
      
   
     new
   
      ListItem[
   
     3
   
     ];
 array[
   
     0
   
     ] 
   
     =
   
      bigTypeList.SelectedItem; 
   
     //
   
     为null
   
     

   
      array[
   
     1
   
     ] 
   
     =
   
      typeList.SelectedItem; 
   
     //
   
     为null
   
     

   
      array[
   
     2
   
     ] 
   
     =
   
      smalltypeList.SelectedItem; 
   
     //
   
     为null
   
     

   
     }
  
    

事实证明，在服务器端读取客户端填充的DropDownList控件的值时，根本读不到任何内容。DropDownList.Items.Count为0，DropDownList.SelectedItem为null。

那么，怎么得到这个值呢，只好使用Request.Form["控件的客户端ID"]了。如下代码所示。

 

  
    

   
     
   
     string
   
      s
   
     =
   
     Request.Form[typeList.ClientID];
  
    

附：页面中的JavaScript文件。

 

 

  
    

   
     
   
      
   
     <
   
     script language
   
     =
   
     "
   
     javascript
   
     "
   
      type
   
     =
   
     "
   
     text/javascript
   
     "
   
     >
   
     
 $(
   
     function
   
      () {
 
   
     var
   
      bigId 
   
     =
   
      
   
     '
   
     #<%=bigTypeList.ClientID%>
   
     '
   
     ;
 
   
     var
   
      mediumId 
   
     =
   
      
   
     '
   
     #<%=typeList.ClientID%>
   
     '
   
     ;
 
   
     var
   
      smallId 
   
     =
   
      
   
     '
   
     #<%=smalltypeList.ClientID%>
   
     '
   
     ;
 $(bigId).cascadingDropDown(mediumId,
 
   
     '
   
     ../Services/AutoTypeService.asmx/getAutoType
   
     '
   
     ,
 { valueMember: 
   
     '
   
     id
   
     '
   
     , displayMember: 
   
     '
   
     name
   
     '
   
     , cascadingArgName: 
   
     '
   
     parent
   
     '
   
      });
 $(mediumId).cascadingDropDown(smallId,
 
   
     '
   
     ../Services/AutoTypeService.asmx/getSubAutoType
   
     '
   
     ,
 { valueMember: 
   
     '
   
     id
   
     '
   
     , displayMember: 
   
     '
   
     name
   
     '
   
     , cascadingArgName: 
   
     '
   
     parent
   
     '
   
      });
});

   
     <
   
     /
   
     script>
  
    

结束。