65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 C# 在 ASP.NET 4.0 中创建多选下拉框的最简单方法

<font color="green" size="2">CS1401</font>
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.61/5 (28投票s)

2011 年 9 月 13 日

CPOL

1分钟阅读

viewsIcon

83929

downloadIcon

3058

ASP.NET 中的多选下拉框。

Multiselect_Dropdownlist/multi2.PNG

引言

在本文中，我将向您展示如何在 ASP.NET 中创建多选控件。我会尽量使这篇文章简短明了，以便您可以在应用程序中使用代码。 之前我参考过很多多选下拉框的代码，但发现它们都有些复杂，难以实现。 所以我决定自己尝试一下。 让我们看看我是如何实现的。

背景

首先，您必须在 Visual Studio 中安装 AJAX 控件。 我使用的是 VS2010。 这是因为我正在使用弹出控件扩展器来实现此控件。

使用代码

在设计视图中放置一个文本框，并为该文本框分配弹出扩展器。 这里需要注意的一点是，您必须将文本框控件放置在 UpdatePanel 中。

之后，您创建一个面板，并在该面板中放置一个复选框列表。 然后，将此面板分配给弹出扩展器的 PopupControlID 属性。

现在来看这段代码

<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="multidropdown.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" 
  Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager runat="server">
        </asp:ToolkitScriptManager>

        <asp:UpdatePanel ID="updatepanel1" runat="server">

            <ContentTemplate>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                <asp:PopupControlExtender 
                    ID="TextBox1_PopupControlExtender" runat="server"
                    Enabled="True" ExtenderControlID="" 
                    TargetControlID="TextBox1" 
                    PopupControlID="Panel1" OffsetY="22">
                </asp:PopupControlExtender>

                <asp:Panel ID="Panel1" runat="server" 
                     Height="116px" Width="145px" 
                     BorderStyle="Solid" BorderWidth="2px" 
                     Direction="LeftToRight"
                     ScrollBars="Auto" BackColor="#CCCCCC" 
                     Style="display: none">
                   
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                          DataSourceID="SqlDataSource1" DataTextField="holiday_name"
                         DataValueField="holiday_name" AutoPostBack="True"
                        OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                    </asp:CheckBoxList>

                    <asp:SqlDataSource ID="SqlDataSource1" 
                          runat="server" ConnectionString="<%$ 
                          ConnectionStrings:employeedbConnectionString %>"
                        SelectCommand="SELECT [holiday_name] FROM [tblholidaymas]"> 
                     </asp:SqlDataSource>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

在这里，您从 SQL Server 数据库中选择数据源。

Multiselect_Dropdownlist/multi1.PNG

最后，我们需要在代码后进行一次修改。 每次单击复选框列表时，所选值都将添加到文本框控件中。 因此，在选定索引更改事件中，您将放置此代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    
    }
  
    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string name = "";
        for (int i = 0; i < CheckBoxList1.Items.Count; i++)
        {
            if (CheckBoxList1.Items[i].Selected)
            {
                name += CheckBoxList1.Items[i].Text + ",";
            }
        }
        TextBox1.Text = name;
    }
}

就是这样。

© . All rights reserved.