Wednesday, 16 January 2013

MVC:How to Move data between two ListBoxes using JQuery

MVC:How to Move data between two ListBoxes using JQuery

namespace Mvc2.Controllers
{
    public class MovieController : Controller
    {
      

        public ActionResult MoveDateinListBox()
        {
            return View();
        }
    }
}

In View
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    MoveDateinListBox
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h5>
        MVC:How to Move data between two ListBoxes using JQuery</h5>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function () {
            $("#MoveToRight,#MoveToLeft").click(function (event) {
                var id = $(event.target).attr("id");
                var selectFrom = id == "MoveToRight" ? "#SelectLeftItem" : "#SelectRightItem";
                var moveTo = id == "MoveToRight" ? "#SelectRightItem" : "#SelectLeftItem";
                var selectedItems = $(selectFrom + " option:selected").toArray();
                $(moveTo).append(selectedItems);
                selectedItems.remove;
            });
        });
    </script>
    <form method="get" action="" runat="server">
     <select id="SelectLeftItem" multiple="multiple" style="height: 100px">
        <option value="1">ASP.NET</option>
        <option value="2">C#.NET</option>
        <option value="3">SQL Server</option>
        <option value="4">VB.NET</option>
    </select>
    <input id="MoveToRight" type="button" value=" >> " style="font-weight: bold" />
    <input id="MoveToLeft" type="button" value=" << " style="font-weight: bold" />
    <select id="SelectRightItem" multiple="multiple" style="height: 100px">
        <option value="1">MVC</option>
        <option value="2">WCF</option>
        <option value="3">WPF</option>
        <option value="4">Silverlight</option>
    </select>
    </form>
</asp:Content>

output

see live demo

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.