如何在ASP.NET中创建可异步自更新的自定义用户控件及复用下拉控件？

我来帮你搞定这个需求——要做一个能异步拉取API数据的可复用ASP.NET下拉用户控件，核心就是把异步数据获取逻辑封装到控件内部，同时保证它足够灵活、能在多个页面复用。下面一步步来实现：

1. 先搭好自定义用户控件的基础结构 #

首先新建一个ASCX用户控件（比如命名为AsyncDropdown.ascx），前端先放下拉列表和加载状态提示：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AsyncDropdown.ascx.cs" Inherits="Controls_AsyncDropdown" %>

<asp:Label ID="lblLoading" runat="server" Text="加载中..." Visible="false" CssClass="loading-text"></asp:Label>
<asp:DropDownList ID="ddlAsync" runat="server" Visible="true"></asp:DropDownList>

2. 实现异步数据获取逻辑（两种方式） #

方式一：基于你提供的WebClient改造 #

WebClient是比较传统的异步网络请求方式，我们可以把你的代码整合到控件后台，同时处理数据绑定和错误情况：

using System;
using System.Collections.Generic;
using System.Net;
using Newtonsoft.Json;

public partial class Controls_AsyncDropdown : System.Web.UI.UserControl
{
    // 可配置的API地址（后续会改成可复用属性）
    private string ApiUrl = "http://docform-nodeapi.herokuapp.com/letter...";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblLoading.Visible = true;
            DownloadDropdownData();
        }
    }

    private void DownloadDropdownData()
    {
        var client = new WebClient();
        client.DownloadStringCompleted += OnDownloadCompleted;
        client.DownloadStringAsync(new Uri(ApiUrl));
    }

    private void OnDownloadCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        lblLoading.Visible = false;
        if (e.Error == null && !e.Cancelled)
        {
            // 假设API返回JSON数组，先反序列化为实体类
            var dropdownItems = JsonConvert.DeserializeObject<List<DropdownItem>>(e.Result);
            
            // 绑定到下拉列表
            ddlAsync.DataValueField = "Id";
            ddlAsync.DataTextField = "Text";
            ddlAsync.DataSource = dropdownItems;
            ddlAsync.DataBind();
        }
        else
        {
            lblLoading.Text = "加载失败，请重试";
            lblLoading.Visible = true;
        }
    }

    // 定义接收API数据的实体类
    public class DropdownItem
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

方式二：更推荐的HttpClient+Async/Await #

WebClient已经被标记为过时，更推荐用HttpClient结合异步语法，同时要注意在WebForms中用Page.RegisterAsyncTask处理异步任务，避免页面提前渲染：

using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
using Newtonsoft.Json;

public partial class Controls_AsyncDropdown : System.Web.UI.UserControl
{
    private string ApiUrl = "http://docform-nodeapi.herokuapp.com/letter...";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblLoading.Visible = true;
            // 注册异步任务，保证WebForms生命周期正确处理
            Page.RegisterAsyncTask(new PageAsyncTask(DownloadDropdownDataAsync));
        }
    }

    private async Task DownloadDropdownDataAsync()
    {
        using (var client = new HttpClient())
        {
            try
            {
                var response = await client.GetStringAsync(ApiUrl);
                var dropdownItems = JsonConvert.DeserializeObject<List<DropdownItem>>(response);
                
                ddlAsync.DataValueField = "Id";
                ddlAsync.DataTextField = "Text";
                ddlAsync.DataSource = dropdownItems;
                ddlAsync.DataBind();
                
                lblLoading.Visible = false;
            }
            catch (Exception ex)
            {
                lblLoading.Text = $"加载失败: {ex.Message}";
                lblLoading.Visible = true;
            }
        }
    }

    public class DropdownItem
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

3. 让控件更易用、更具复用性 #

为了让控件能在不同场景复用，我们可以把关键参数改成可配置的属性，比如API地址、下拉框的字段名、加载提示文本：

// 暴露可配置属性
public string ApiUrl { get; set; }
public string ValueField { get; set; } = "Id";
public string TextField { get; set; } = "Text";
public string LoadingText { get; set; } = "加载中...";

protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(LoadingText))
    {
        lblLoading.Text = LoadingText;
    }
    // 只有设置了API地址才触发加载
    if (!IsPostBack && !string.IsNullOrEmpty(ApiUrl))
    {
        lblLoading.Visible = true;
        Page.RegisterAsyncTask(new PageAsyncTask(DownloadDropdownDataAsync));
    }
}

// 改造异步方法，使用自定义字段名
private async Task DownloadDropdownDataAsync()
{
    using (var client = new HttpClient())
    {
        try
        {
            var response = await client.GetStringAsync(ApiUrl);
            // 用dynamic兼容不同结构的API返回
            var dropdownItems = JsonConvert.DeserializeObject<List<dynamic>>(response);
            
            ddlAsync.DataValueField = ValueField;
            ddlAsync.DataTextField = TextField;
            ddlAsync.DataSource = dropdownItems;
            ddlAsync.DataBind();
            
            lblLoading.Visible = false;
        }
        catch (Exception ex)
        {
            lblLoading.Text = $"加载失败: {ex.Message}";
            lblLoading.Visible = true;
        }
    }
}

之后在页面中引用控件时，只需要简单配置参数即可：

<%@ Register TagPrefix="custom" TagName="AsyncDropdown" Src="~/Controls/AsyncDropdown.ascx" %>

<custom:AsyncDropdown ID="ddlLetters" runat="server" 
    ApiUrl="http://docform-nodeapi.herokuapp.com/letter..."
    ValueField="LetterId"
    TextField="LetterName"
    LoadingText="正在加载信件列表..." />

4. 关键注意事项 #

• 异步生命周期：WebForms中必须用Page.RegisterAsyncTask处理async/await逻辑，否则会出现数据未绑定就渲染页面的问题。
• JSON序列化：需要安装Newtonsoft.Json NuGet包（或用.NET Core+的System.Text.Json）来处理API返回的JSON数据。
• 跨域问题：如果API和你的ASP.NET应用不在同一域名下，要确保API开启了CORS跨域支持。
• 缓存优化：如果下拉数据不频繁更新，可以把获取到的数据缓存到MemoryCache或Session中，减少重复API请求。

内容的提问来源于stack exchange，提问作者pahnman