ارسال آیتم ها از یک ListBox به ListBox دیگر با استفاده از جی کوئری

در این مقاله قصد داریم روش انتقال آیتم ها ی یک ListBox به ListBox دیگر را با استفاده از چهار کنترل button , جی کوئری ،به شما آموزش دهیم.و مراحل آن را گام به گام پیش ببریم.

در اینجا نشان میدهیم که چطور میتوانید آیتم های یک ListBox را در ListBox دوم و بالعکس با استفاده از چهار کنترل دکمه ،انتقال دهید.

اولین دکمه برای ارسال یک آیتم از listbox گروه اول ، به listbox گروه دوم است

دکمه دوم برای برای ارسال تمامی آیتم های موجود به listbox گروه دوم است.

دکمه سوم برای ارسال یک آیتم از listbox گروه دوم به گروه اول است .

دکمه چهارم برای ارسال تمامی آیتم های موجود در گروه دوم به listbox گروه اول است.

در شکل بالا دکمه دیگری نیز وجود داد که پس از فشردن آن اعضای گروهها در یک برچسب نمایش داده میشود.

پیاده سازی :

ابتدا صفحه ای به نام index.aspx ایجاد میکنیم و کد های زیردر آن را وارد میکنیم.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Move_item.index" %>

<!DOCTYPE html>

<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 dir="rtl">
    <form id="form1" runat="server">
    <div>
    <fieldset style="width:400px;">
                <legend>ارسال آیتم های لیست با استفاده از  JQery </legend>
                <table style="width: 400px">
                    <tr>
                        <td style="width: 40%">گروه اول</td>
                        <td style="width: 20%"></td>
                        <td style="width: 40%">گروه دوم</td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top; width: 40%">
                            <asp:ListBox ID="lbTeamA" runat="server" SelectionMode="Multiple" Style="width: 100%">
                                <asp:ListItem Text="سحر"></asp:ListItem>
                                <asp:ListItem Text="سارا"></asp:ListItem>
                                <asp:ListItem Text="ستایش"></asp:ListItem>
                                <asp:ListItem Text="سمانه"></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="ارسال" />
                        </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>

کدهای #C زیر را در صفحه index.aspx.cs وارد میکنیم.

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 = "اعضای گروه اول:" + teamASelectedMembers;
            ltrlTeamB.Text = "اعضای گروه دوم:" + teamBSelectedMembers;
        }

خروجی

فایل های ضمیمه

4828_Move item.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ارسال آیتم ها از یک ListBox به ListBox دیگر با استفاده از جی کوئری

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید