VB.NET Web应用中如何为ListBox启用多列显示？

我来给你几个实用的方案，都是基于ASP.NET Web Forms里的ListBox和SqlDataSource实现多列显示的，你可以根据需求选择：

这是最省心的方式，直接在SqlDataSource的查询语句里把要显示的两列拼接成一个字段，再绑定到ListBox的显示文本上。

比如原查询是：

SELECT Id, Name, Age FROM Users

改成拼接后的查询（SQL Server用CONCAT，旧版本可以用+拼接，注意类型转换）：

SELECT Id, CONCAT(Name, ' - 年龄：', Age) AS DisplayText FROM Users

然后配置ListBox和SqlDataSource：

<asp:ListBox ID="ListBox1" runat="server" DataSourceID="SqlDataSource1" 
    DataTextField="DisplayText" DataValueField="Id">
</asp:ListBox>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:YourConnString %>"
    SelectCommand="SELECT Id, CONCAT(Name, ' - 年龄：', Age) AS DisplayText FROM Users">
</asp:SqlDataSource>

这种方法不用额外写代码，适合对显示格式要求不高的场景。

如果不想修改SQL语句，或者需要根据条件调整显示逻辑，可以在ListBox的DataBound事件里手动处理每个项的文本：

1. 先让SqlDataSource查询出所有需要的字段：

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:YourConnString %>"
    SelectCommand="SELECT Id, Name, Age FROM Users">
</asp:SqlDataSource>

2. 给ListBox绑定DataBound事件：

<asp:ListBox ID="ListBox1" runat="server" DataSourceID="SqlDataSource1" 
    DataValueField="Id" OnDataBound="ListBox1_DataBound">
</asp:ListBox>

3. 在后台代码（.cs文件）里实现事件逻辑，还能通过字符串格式化让两列对齐：

protected void ListBox1_DataBound(object sender, EventArgs e)
{
    foreach (ListItem item in ListBox1.Items)
    {
        var dataItem = item.DataItem as DataRowView;
        if (dataItem != null)
        {
            string name = dataItem["Name"].ToString();
            int age = Convert.ToInt32(dataItem["Age"]);
            // 用逗号加负数实现左对齐，控制第一列宽度
            item.Text = $"{name,-15} 年龄：{age}";
        }
    }
}

如果想要真正的“分栏”样式（比如固定列宽、分隔线），可以给每个ListBox项添加HTML结构，再用CSS排版：

1. 后台代码里构建带HTML的内容（注意用innerHTML避免HTML转义）：

protected void ListBox1_DataBound(object sender, EventArgs e)
{
    foreach (ListItem item in ListBox1.Items)
    {
        var dataItem = item.DataItem as DataRowView;
        if (dataItem != null)
        {
            string name = dataItem["Name"].ToString();
            int age = Convert.ToInt32(dataItem["Age"]);
            string htmlContent = $"<span class='col1'>{name}</span><span class='col2'>{age}</span>";
            item.Attributes["innerHTML"] = htmlContent;
        }
    }
}

2. 在页面<head>里添加CSS样式：

<style>
    #ListBox1 .col1 {
        display: inline-block;
        width: 150px;
        padding-right: 10px;
        border-right: 1px solid #ccc;
    }
    #ListBox1 .col2 {
        display: inline-block;
        width: 80px;
        padding-left: 10px;
    }
    #ListBox1 {
        padding: 5px;
        width: 250px; /* 调整总宽度适配两列 */
    }
</style>

这样就能实现类似表格的整齐多列效果。

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