ASP.NET Ajax级联DropDownList实现代码攻略

在ASP.NET中，实现级联DropDownList的功能是非常常见的需求之一。本文将带领大家通过ASP.NET Ajax实现级联DropDownList的方法，包括如何构建后端数据源、在前端进行切换时实现DropDownList级联更新等。

1. 准备工作

在开始之前，我们需要确保以下几点：

ASP.NET框架版本在4.5以上；
已安装ASP.NET Ajax扩展程序包（在NuGet中可下载）；
页面钩子函数已加载（通过Page_Load或Init函数实现）。

2. 构建后端数据源

我们需要准备两个DropDownList，一个用于选择父级，一个用于选择子级。为了实现两者之间的级联，我们需要为子级DropDownList动态加载可选项。

在后台代码中，我们需要编写一个返回子级选项列表的函数，并在父级DropDownList选项变更后触发它。

以下是一个示例，假设我们需要从服务端API中获取子级选项：

// 获取子级选项数据
protected string GetChildData(int parentId)
{
    // 向服务器API请求子级选项数据
    var client = new HttpClient();
    var result = client.GetAsync("http://api.example.com/childoptions?parentId=" + parentId).Result;

    // 处理服务器响应并返回JSON格式数据
    if (result.IsSuccessStatusCode)
    {
        var options = result.Content.ReadAsStringAsync().Result;
        return options;
    }
    else
    {
        return "[]"; // 返回空数据
    }
}

该函数将根据传入的parentId参数向服务端API请求子级选项数据，并返回JSON格式数据。

3. 为父级DropDownList添加选项变更事件

在页面载入时，我们需要为父级DropDownList添加选项变更事件。该事件将会在页面初始化时运行一次，并在父级DropDownList切换选项时自动触发。

以下是一个示例，假设我们的页面中存在名为"parentDropDownList"和"childDropDownList"的DropDownList：

<script type="text/javascript">
    // 父级选项列表更改事件处理函数
    function parentDropDownList_Changed() {
        var parentId = $(this).val(); // 获取当前选中项的值

        // 如果父选项列表有选中项
        if (parentId) {
            // 向服务器API获取子级选项数据
            $.ajax({
                type: "GET",
                url: "/api/getchild/" + parentId, // 访问服务器API的接口
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(result) {
                    // 从服务器API成功获取到数据
                    // 将子级选项列表删除旧的选项
                    $("#childDropDownList option").each(function() {
                        $(this).remove();
                    });

                    // 将新的选项添加到子级选项列表
                    $.each(result, function(i, item) {
                        $("#childDropDownList").append($('<option>', {
                            value: item.Value,
                            text: item.Text
                        }));
                    });
                },
                error: function(err) {
                    // 访问服务器API失败，输出错误信息
                    console.log(err.statusText);
                }
            });
        }
    }

    // 页面初始化时注册父级选项列表更改事件
    $(function() {
        $("#parentDropDownList").change(parentDropDownList_Changed);
    });
</script>

4. 完整代码示例

以下是一个完整的ASP.NET Ajax级联DropDownList代码示例，展示了如何实现级联DropDownList的功能。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <div>
            <div>
                <asp:DropDownList ID="parentDropDownList" runat="server" Width="200px">
                    <asp:ListItem Text="父级选项1" Value="1"></asp:ListItem>
                    <asp:ListItem Text="父级选项2" Value="2"></asp:ListItem>
                    <asp:ListItem Text="父级选项3" Value="3"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <div>
                <asp:DropDownList ID="childDropDownList" runat="server" Width="200px"></asp:DropDownList>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        // 父级选项列表更改事件处理函数
        function parentDropDownList_Changed() {
            var parentId = $(this).val(); // 获取当前选中项的值

            // 如果父选项列表有选中项
            if (parentId) {
                // 向服务器API获取子级选项数据
                $.ajax({
                    type: "GET",
                    url: "/api/getchild/" + parentId, // 访问服务器API的接口
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(result) {
                        // 从服务器API成功获取到数据
                        // 将子级选项列表删除旧的选项
                        $("#childDropDownList option").each(function() {
                            $(this).remove();
                        });

                        // 将新的选项添加到子级选项列表
                        $.each(result, function(i, item) {
                            $("#childDropDownList").append($('<option>', {
                                value: item.Value,
                                text: item.Text
                            }));
                        });
                    },
                    error: function(err) {
                        // 访问服务器API失败，输出错误信息
                        console.log(err.statusText);
                    }
                });
            }
        }

        // 页面初始化时注册父级选项列表更改事件
        $(function() {
            $("#parentDropDownList").change(parentDropDownList_Changed);
        });
    </script>
</body>
</html>

5. 代码说明

第3段代码展示了获取子级选项数据的后端代码逻辑，该函数应在服务端API中实现，并返回JSON格式数据。
第4段代码展示了为父级DropDownList添加选项变更事件，该事件将在页面初始化时运行一次，并在父级DropDownList切换选项时自动触发子级选项的数据更新。
第5段至第40码展示了一个完整的ASP.NET Ajax级联DropDownList实现代码示例，包括前端和后端代码。在该示例中，我们使用了一个名为"api/getchild"的服务器API和一个名为"childDropDownList"的子级DropDownList，需要根据实际情况进行修改。

6. 示例应用

下面是两个示例代码，他们分别演示了通过ASP.NET WebForms和MVC实现级联DropDownList的功能。

ASP.NET WebForms示例

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <div>
            <div>
                <asp:DropDownList ID="parentDropDownList" runat="server">
                    <asp:ListItem Text="请选择" Value=""></asp:ListItem>
                    <asp:ListItem Text="北京市" Value="1"></asp:ListItem>
                    <asp:ListItem Text="上海市" Value="2"></asp:ListItem>
                    <asp:ListItem Text="广州市" Value="3"></asp:ListItem>
                    <asp:ListItem Text="深圳市" Value="4"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <div>
                <asp:DropDownList ID="childDropDownList" runat="server"></asp:DropDownList>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        // 父级选项列表更改事件处理函数
        function parentDropDownList_Changed() {
            var parentId = $(this).val(); // 获取当前选中项的值

            // 如果父选项列表有选中项
            if (parentId) {
                // 向服务器API获取子级选项数据
                $.ajax({
                    type: "GET",
                    url: "/getchild.ashx?parentid=" + parentId, // 访问服务器API的接口
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(result) {
                        // 从服务器API成功获取到数据
                        // 将子级选项列表删除旧的选项
                        $("#childDropDownList option").each(function() {
                            $(this).remove();
                        });

                        // 将新的选项添加到子级选项列表
                        $.each(result, function(i, item) {
                            $("#childDropDownList").append($('<option>', {
                                value: item.Value,
                                text: item.Text
                            }));
                        });
                    },
                    error: function(err) {
                        // 访问服务器API失败，输出错误信息
                        console.log(err.statusText);
                    }
                });
            }
        }

        // 页面初始化时注册父级选项列表更改事件
        $(function() {
            $("#parentDropDownList").change(parentDropDownList_Changed);
        });
    </script>
</body>
</html>

ASP.NET MVC4示例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            @Html.DropDownList("Parent", (SelectList)ViewBag.ParentList, "-请选择-", new { @id = "parent", @value = "" })
            <br />
            <br />
            @Html.DropDownList("Child", new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "-请选择-", new { @id = "child", @value = "" })
        }
    </div>
    <script type="text/javascript">
        $(function () {
            $("#parent").change(function () {
                $.getJSON("@Url.Action("GetChild", "Home")", { parentid: $("#parent").val() }, function (data) {
                    var items = "<option>-请选择-</option>";
                    $.each(data, function (i, item) {
                        items += "<option value='" + item.Value + "'>" + item.Text + "</option>";
                    });
                    $("#child").html(items);
                });
            });
        });
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET Ajax级联DropDownList实现代码 - Python技术站

ASP.NET Ajax级联DropDownList实现代码