asp.net中下拉多个列表选择

问题描述 投票:0回答:1

这是默认下拉单选无复选框无按钮列表代码(在WebAPP.NET框架中):

<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>"
                                SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;"></asp:SqlDataSource>

                            <td class="required" align="right" style="text-align: right;">
                             <span class="catchment">Catchment Zone:</span>
                            </td>
                            <td>
                                   <asp:DropDownList ID="ddlField1" runat="server" CssClass="textfield" Width="200px" OnSelectedIndexChanged="ddlField1_SelectedIndexChanged" style="width: 182px; margin: 9px;"
                                        DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" AppendDataBoundItems="true">
                                   <asp:ListItem Value="All"></asp:ListItem>
                                    </asp:DropDownList> 
                             </td>
                             </td>

需要将上面的下拉列表代码转换为带按钮的多选复选框下拉列表。

javascript html css asp.net bootstrap-4
1个回答
0
投票

好吧,如果可能的话,使用列表框可以进行多项选择,但当然会占用更多的屏幕空间。

asp.net 中没有内置的多选组合框(DropDownList)。

因此,您可以采用第三方库。一个相当常见的选择是名为 select2 的 jQuery 插件。

下一个问题是 select2 加载项无法与 asp.net DropDownList 很好地配合,但如果您放入 HTML“select”元素,它确实可以正常工作。

事实证明 DropDownList 无论如何都是基于 HTML select 元素的。事实上,如果您使用 runat="server" 标记选择,那么您的功能与下拉列表非常相似。唯一缺少的功能是 autopostback="true"。而且你没有注意到你是否需要这种能力。

让我们构建一个示例,并假设我们需要组合框的自动回发。

为此,我们添加 JavaScript onchange 事件(客户端),然后只需单击表单上的按钮即可。该按钮(最终)应该用 style="display:none" 隐藏。

因此,我们的标记如下所示:

        <div style="float: left">

            <h4>Select Multiple Cites</h4>

            <select id="DropDownList1" runat="server" clientidmode="static"
                datatextfield="City"
                multiple="true"
                style="width: 500px"
                onchange="mychange()">
            </select>

            <script>
                function mychange() {
                    $('#Button1').click()
                }
            </script>
        </div>

        <div style="float: left; margin-left: 35px; margin-top: 40px">

            <asp:Button ID="Button1" runat="server" Text="Show Hotels"
                ClientIDMode="Static"
                CssClass="btn"
                OnClick="Button1_Click" />
        </div>
        <div style="clear: both; height: 20px"></div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID" CssClass="table" Width="40%">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Description" HeaderText="Description" />
            </Columns>
        </asp:GridView>



        <script>

            $(document).ready(function () {

                console.log("on page load select2 combo box setup")
                $('#DropDownList1').select2()

            });

        </script>

我们背后的代码是这样的:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()
    End If

End Sub

Sub LoadData()
    Dim rstHotels As DataTable
    rstHotels = MyRst("SELECT City FROM tblHotels
                       WHERE City is not null
                       GROUP BY City")

    DropDownList1.DataSource = rstHotels
    DropDownList1.DataBind()

End Sub

Protected Sub Button1_Click(sender As Object, e As EventArgs)

    LoadGrid()

End Sub

Sub LoadGrid()

    Dim strSQL As String =
        "SELECT * FROM tblHotelsA"

    Dim strWhere As String = ""

    Dim cmdSQL As New SqlCommand()

    Dim ParamCount As Integer = 0
    Dim sP As String = ""

    For Each MyPick As ListItem In DropDownList1.Items
        Debug.Print($"Item = {MyPick.Text} selected = {MyPick.Selected}")
        If MyPick.Selected Then
            If strWhere <> "" Then strWhere &= ","
            ParamCount += 1
            sP = $"@P{ParamCount}"
            strWhere &= sP
            cmdSQL.Parameters.Add($"@P{ParamCount}", SqlDbType.NVarChar).Value = MyPick.Text
        End If
    Next

    If strWhere <> "" Then
        strSQL &= $" WHERE City IN ({strWhere}) "
    End If

    strSQL &= " ORDER BY HotelName"

    cmdSQL.CommandText = strSQL

    Dim dt As DataTable = MyRstP(cmdSQL)
    GridView1.DataSource = dt
    GridView1.DataBind()


End Sub

请注意,在上面,我们仍然使用 SQL 参数,因此代码不会受到潜在的 SQL 注入的影响。

enter image description here

当然,如果您不需要也不希望自动回发,那么您可以删除按钮以及附加到 select 元素的 onchange JavaScript 代码。

© www.soinside.com 2019 - 2024. All rights reserved.