使用Ajax创建下拉控件

Question

到我写这篇文章的时候，我已经花了10多个染料，但还是不能解决我的问题：

我有一个数据库表位置，它有3个文件LocID，locName，locParent。

我想创建一个包含所有主要位置的DropDownList，例如国家。然后，当用户选择一个位置(例如，一个国家)时，该国家中的所有城市都会重新加载到一个动态创建的下拉列表中。

这个页面必须有无限的子类别。此外，解决方案必须在Ajax和C#中。

Answer 1

您需要将AjaxExtensions (随.net 3.5提供)添加到.net 2.0应用程序http://www.asp.net/ajax中

这将要求页面上有一个ToolKitScriptManager

在页面上放置三个下拉列表。将它们命名为ddlCountry、ddlCity和ddlMainLocation。

可以选择将两个"sub“下拉列表放在设置为不可见的面板中。

在页面加载时，使用SqlDataBase阅读器从数据库中提取位置信息

使用阅读器，遍历记录并将项目添加到下拉列表中

例如。

    // Create a command object and set it to run a stored procedure that gets the countries from the database
SqlDataReader rdr = cmd.ExecuteQuery();
try
{
    ddlCountries.items.clear();
    While (rdr.read())
    {
        // Text to display, Common Data Item
        ddlCountries.items.add(new ListItem(rdr("CountryName").toString(),rdr("CountryCode").ToString());
    }
}
catch()
{
    // do something with your error
}

在ddlCountries下拉列表中添加以下属性：

1. OnSelectedINdexChanged =“ddlCountries_SelectedIndexChanged"
2. AutoPostback = "true"

(1)将对正在更改的索引执行命令(2)将在项更改时触发回发

然后，ddlCountries_SelectedIndexChanged事件方法将在数据库中查询属于所选国家/地区代码的相关城市(或将该值作为包含城市的表的外键)

现在测试代码，以确保回发导致使用数据填充城市列表。此时，它是一个具有回发功能的普通ASP.Net页面。要完成部分回发，在标记中，在下拉列表周围添加一个updatepanel。它看起来如下所示：

<asp:UpdatePanel runat="server" id="upnlDropdowns" UpdateMode="Conditional">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ddlCountries" EventName="OnSelectedIndexChanged" />
                        </Triggers>
<ContentTemplate>
<!--... Your Drop downs and any code to be Ajaxified .../-->
</ContentTemplate>
</asp:UpdatePanel>

再次测试并确保所有功能仍在运行。如果是这样，那么您可以添加第三个下拉列表。这一次，它将由cities下拉列表的selected index changed事件填充。

一旦一切正常，您可以通过添加一个updateprogress来扩展updatePanel以显示工作图像，从而添加令人惊叹的效果。

祝好运!