jQuery to move items from one ListBox to another in Asp.Net C#,VB ~ Asp.Net,C#.Net,VB.Net,MVC,jQuery,JavaScipt,AJAX,WCF,Sql Server example

Introduction: In this article I will show with an example to move single or multiple selected items between two listbox controls using jQuery in Asp.Net with C# and VB.

Description: While working on Asp.Net project I got the requirement to move items from one listbox to other as shown in demo image above This can be easily done server side and client side. Here in this example I have used jQuery to make it work client side.

I have demonstrated how easily we can move items from first listbox to second listbox and vice versa by using four button controls. First button for moving selected item from first to second listbox, second button for moving all items whether selected or not to second listbox, third button for moving selected items back to first listbox and fourth one is for moving all items back to first listbox.

Implementation: Let’s create a web page for demonstration purpose:

HTML source:

$(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>

<div>

<legend>Move Items from one ListBox to other using jQuery</legend>

<tr>

</tr>

<tr>

<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>

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

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

<br />

<asp:Button ID="btnSubmit" runat="server" ClientIDMode="Static" OnClientClick="selectAll();"

OnClick="btnSubmit_Click" Text="Submit" />

</td>

<asp:ListBox ID="lbTeamB" runat="server" SelectionMode="Multiple" Style="width: 100%"></asp:ListBox>

</td>

</tr>

<tr>

<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)

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)

End If

ltrlTeamA.Text = Convert.ToString("Team A members:") & teamASelectedMembers

ltrlTeamB.Text = Convert.ToString("Team B members:") & teamBSelectedMembers

End Sub

Note: To select multiple items in ListBox, hold the control key and then select multiple items with mouse.

Now over to you:

A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..

jQuery to move items from one ListBox to another in Asp.Net C#,VB

Related Post