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

版权所有：基础软件。作者邮箱：sun.j.l.studio@gmail.com。本文首发于 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>

结束。