JQUERY 在 ASP.NET C#,VB 中将项目从一个列表框移动到另一个列表框

一个普普通通的搬运工

于 2023-04-25 10:03:13 发布

阅读量413

点赞数

文章标签： asp.net c# jquery

本文链接：https://blog.csdn.net/m0_50971283/article/details/130358327

版权

JQUERY 在 ASP.NET C#,VB 中将项目从一个列表框移动到另一个列表框

在本文中，将通过一个示例展示在 Asp.Net 中使用 jQuery 以及 C# 和 VB 在两个列表框控件之间移动单个或多个选定项目。

在处理 Asp.Net 项目时，得到了将项目从一个列表框移动到另一个列表框的要求，如上面的演示图像所示，这可以很容易地在服务器端和客户端完成。在此示例中，我使用 jQuery 使其在客户端工作。
在这里插入图片描述

我已经演示了通过使用四个按钮控件可以轻松地将项目从第一个列表框移动到第二个列表框，反之亦然。第一个按钮用于将所选项目从第一个列表框移动到第二个列表框，第二个按钮用于将所有项目（无论是否选中）移动到第二个列表框，第三个按钮用于将所选项目移回第一个列表框，第四个按钮用于将所有项目移回第一个列表框。

实例：创建一个用于演示目的的网页

HTML source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnMoveRight").on("click", function () {
                var selectedOptions = $('#lbTeamA > option:selected');
                if (selectedOptions.length == 0) {
                    alert("Select at least one item to move");
                    return false;
                }

                $('#lbTeamA > option:selected').appendTo('#lbTeamB');
                e.preventDefault();
            });

            $("#btnMoveAllRight").on("click", function () {
                $('#lbTeamA > option').appendTo('#lbTeamB');
                e.preventDefault();
            });

            $("#btnMoveLeft").on("click", function () {
                var selectedOptions = $('#lbTeamB > option:selected');
                if (selectedOptions.length == 0) {
                    alert("Select at least one item to move");
                    return false;
                }

                $('#lbTeamB > option:selected').appendTo('#lbTeamA');
                e.preventDefault();
            });

            $("#btnMoveAllLeft").on("click", function () {             
                $('#lbTeamB > option').appendTo('#lbTeamA');
                e.preventDefault();
            }); 
        });

        function selectAll() {
            $("#lbTeamA option").attr("selected", "selected");
            $("#lbTeamB option").attr("selected", "selected");
        }
    </script> 
</head>
<body>
      <form id="form1" runat="server">
        <div>
            <fieldset style="width:400px;">
                <legend>Move Items from one ListBox to other using jQuery</legend>
                <table style="width: 400px">
                    <tr>
                        <td style="width: 40%">Team A</td>
                        <td style="width: 20%"></td>
                        <td style="width: 40%">Team B</td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 40%">
                            <asp:ListBox ID="lbTeamA" runat="server" SelectionMode="Multiple" Style="width: 100%">
                                <asp:ListItem Text="Jatin"></asp:ListItem>
                                <asp:ListItem Text="Ranveer"></asp:ListItem>
                                <asp:ListItem Text="Sohail"></asp:ListItem>
                                <asp:ListItem Text="Arjun"></asp:ListItem>
                            </asp:ListBox>
                        </td>
                        <td style="text-align: center; width: 20%">
                            <input type="button" id="btnMoveRight" value=">" style="width: 50px;" /><br />
                            <input type="button" id="btnMoveAllRight" value=">>" style="width: 50px;" /><br />

                            <input type="button" id="btnMoveLeft" value="<" style="width: 50px;" /><br />

                            <input type="button" id="btnMoveAllLeft" value="<<" style="width: 50px;" /><br />
                            <br />
                            <asp:Button ID="btnSubmit" runat="server" ClientIDMode="Static" OnClientClick="selectAll();"
                                OnClick="btnSubmit_Click" Text="Submit" />
                        </td>
                        <td style="vertical-align: top; width: 40%">
                            <asp:ListBox ID="lbTeamB" runat="server" SelectionMode="Multiple" Style="width: 100%"></asp:ListBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <br />
                            <asp:Literal ID="ltrlTeamA" runat="server"></asp:Literal>
                            <br />
                            <asp:Literal ID="ltrlTeamB" runat="server"></asp:Literal></td>
                    </tr>
                </table>
            </fieldset>
        </div>
    </form>
</body>
</html>

Asp.Net C# Code

protected void btnSubmit_Click(object sender, EventArgs e)
    {
        string teamASelectedMembers = Request.Form[lbTeamA.UniqueID];
        lbTeamA.Items.Clear();
        if (!string.IsNullOrEmpty(teamASelectedMembers))
        {
            foreach (string item in teamASelectedMembers.Split(','))
            {
                lbTeamA.Items.Add(item);
            }
        }

        string teamBSelectedMembers = Request.Form[lbTeamB.UniqueID];
        lbTeamB.Items.Clear();
        if (!string.IsNullOrEmpty(teamBSelectedMembers))
        {
            foreach (string item in teamBSelectedMembers.Split(','))
            {
                lbTeamB.Items.Add(item);
            }
        }

        ltrlTeamA.Text = "Team A members:" + teamASelectedMembers;
        ltrlTeamB.Text = "Team B members:" + teamBSelectedMembers;
    }

Asp.Net VB Code

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
        Dim teamASelectedMembers As String = Request.Form(lbTeamA.UniqueID)
        lbTeamA.Items.Clear()
        If Not String.IsNullOrEmpty(teamASelectedMembers) Then
            For Each item As String In teamASelectedMembers.Split(","c)
                lbTeamA.Items.Add(item)
            Next
        End If

        Dim teamBSelectedMembers As String = Request.Form(lbTeamB.UniqueID)
        lbTeamB.Items.Clear()
        If Not String.IsNullOrEmpty(teamBSelectedMembers) Then
            For Each item As String In teamBSelectedMembers.Split(","c)
                lbTeamB.Items.Add(item)
            Next
        End If

        ltrlTeamA.Text = Convert.ToString("Team A members:") & teamASelectedMembers
        ltrlTeamB.Text = Convert.ToString("Team B members:") & teamBSelectedMembers
    End Sub

注意：要在 ListBox 中选择多个项目，请按住控制键，然后用鼠标选择多个项目。

一个普普通通的搬运工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY 在 ASP.NET C#,VB 中将项目从一个列表框移动到另一个列表框

第一个按钮用于将所选项目从第一个列表框移动到第二个列表框，第二个按钮用于将所有项目（无论是否选中）移动到第二个列表框，第三个按钮用于将所选项目移回第一个列表框，第四个按钮用于将所有项目移回第一个列表框。在处理 Asp.Net 项目时，得到了将项目从一个列表框移动到另一个列表框的要求，如上面的演示图像所示，这可以很容易地在服务器端和客户端完成。在本文中，将通过一个示例展示在 Asp.Net 中使用 jQuery 以及 C# 和 VB 在两个列表框控件之间移动单个或多个选定项目。
复制链接

扫一扫