如何在ASP.NET下拉列表中显示多内容？含国家代码绑定及Bootstrap实现

当然可以用数据绑定实现这个需求！而且结合Bootstrap能快速美化下拉组件，下面是一步步的实现方案：

一、核心：数据绑定实现多内容显示 #

我们可以构造包含国家名称和国家代码的数据源，通过指定DataTextField来显示组合后的多内容文本，DataValueField保留纯代码用于后续业务逻辑。

后端（C#）代码（Page_Load绑定） #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 构造国家数据：这里用硬编码示例，实际可以从数据库/配置文件读取
        var countryDataSource = new List<object>
        {
            new { DisplayText = "中国 (+86)", CodeValue = "+86" },
            new { DisplayText = "美国 (+1)", CodeValue = "+1" },
            new { DisplayText = "英国 (+44)", CodeValue = "+44" },
            new { DisplayText = "日本 (+81)", CodeValue = "+81" }
            // 可扩展更多国家数据
        };

        // 绑定到DropDownList
        ddlCountryCodes.DataSource = countryDataSource;
        ddlCountryCodes.DataTextField = "DisplayText"; // 显示的多内容文本
        ddlCountryCodes.DataValueField = "CodeValue"; // 后台获取的纯代码值
        ddlCountryCodes.DataBind();

        // 设置默认选中项
        ddlCountryCodes.SelectedIndex = 0;
    }
}

前端（ASPX）代码（结合Bootstrap样式） #

Bootstrap没有内置的国家代码下拉组件，但它的form-select类可以直接美化ASP.NET的DropDownList，让样式和Bootstrap表单体系统一：

<div class="mb-3">
    <label for="ddlCountryCodes" class="form-label">选择国家/地区代码</label>
    <asp:DropDownList ID="ddlCountryCodes" runat="server" CssClass="form-select"></asp:DropDownList>
</div>

二、Bootstrap相关优化说明 #

• 基础美化：只用给DropDownList添加form-select类，就能自动获得Bootstrap的圆角、内边距、hover效果等样式，无需额外插件。
• 进阶功能：如果需要搜索筛选国家的功能，可以结合Bootstrap的下拉插件（比如Bootstrap Select），不过这需要引入额外的JS/CSS，但基础的多内容显示用原生数据绑定+form-select就足够了。

三、进阶：从外部数据源加载国家数据 #

如果不想硬编码国家列表，可以从数据库或配置文件读取，比如用JSON配置文件：

1. 在App_Data目录下创建countries.json文件：

[
    {"Name":"中国","Code":"+86"},
    {"Name":"美国","Code":"+1"},
    {"Name":"英国","Code":"+44"}
]

2. 后端读取并转换为数据源：

// 需要引入Newtonsoft.Json包（NuGet安装）
using Newtonsoft.Json;

public class CountryInfo
{
    public string Name { get; set; }
    public string Code { get; set; }
    public string DisplayText => $"{Name} ({Code})";
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var jsonPath = Server.MapPath("~/App_Data/countries.json");
        var jsonContent = File.ReadAllText(jsonPath);
        var countryList = JsonConvert.DeserializeObject<List<CountryInfo>>(jsonContent);

        ddlCountryCodes.DataSource = countryList;
        ddlCountryCodes.DataTextField = "DisplayText";
        ddlCountryCodes.DataValueField = "Code";
        ddlCountryCodes.DataBind();
    }
}

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