Dotnetplace.com

.NET Articles, Web Devploment, ASP.NET, HTML, Sharepoint 2010, Aamir Hasan
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here
Advertise Here

Advertise

Loading...


Posted by Aamir Hasan   on Monday, September 24, 2012 Total Views:  

In this example you will see how to use Sortable multiple lists using jQuery UI in asp.net page. I have used jquery UI Sortable method. I have created three lists, first list will show book name and second and third list will display book name, picture and author name. You can add more information in this example. I have used server side script on book list, you can attached it with database, on page load jquery UI Sortable method will be connected with three lists and after that ajax method will send request to server to fetch book list and append it to three list. Here is a question how will it append with three lists. Well, I have password column name in the Book class to get where list is at append. When user drop the list detail information of book it will be hidden on first list and when it’s dragged to second and third list it will show the detailed list. Let’s see the example.

 

 

Open your Visual Studio. Add new or existing web site. Add new Sortable-List.aspx page.

Add the following jquery, jQuery UI reference inside head section of design page.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"

        type="text/javascript"></script>

    <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"

        type="text/javascript"></script>

Add the following jquery script code at the bottom of head section.

 

    <script type="text/javascript">

        $(function () {

            $("#contentLeft ul, #contentright ul").sortable({

                connectWith: ".connectedSortable",

                placeholder: "ui-state-highlight",

                stop: function (evt, ui) {

                    var id = ui.item.parent().parent().prop("id")

                    tt = ui.item;

                    if (id == "contentLeft") {

                        ui.item.find('p').removeClass('show').addClass('hide');

                    }

                    if (id == "con-r" || id == "con-l") {

                        ui.item.find('p').removeClass('hide').addClass('show');

                    }

                }

            }).disableSelection();

            $("#idsubmit").click(function () {

                var msg = $("#table1 > tbody");

                var list = $("#contentLeft ul li");

                $(msg).html("");

                $(list).each(function (index) {

                    $(msg).append("<tr><td>" + index + "</td><td> " + $(this).closest("li").prop("id") + "</td><td> " + $(this).text() + "</td></tr>");

                });

            });

            fetchList();

         });

        function fetchList() {

            $.ajax({

                type: "POST",

                url: "Sortable-List.aspx/fetchData",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {

                 $.each(response.d, function (index, item) {

                   if (item.Column == "1")

                       $("#contentLeft  ul").append("<li id=" + item.ID + "> <a target='_blank' href='" +

                          item.Link + "'>" + item.Name + "</a> <p class='hide'><img  src='" + item.Img +

                           "'/><span>" + item.Author + "</span></p></li>");

                   if (item.Column == "2")

                      $("#con-l  ul").append("<li id=" + item.ID + "> <a target='_blank' href='"

                          + item.Link + "'>" + item.Name + "</a> <p class='show'><img algin='top' src='" +

                          item.Img + "'/><span>" + item.Author + "</span></p></li>");

                   if (item.Column == "3")

                      $("#con-r  ul").append("<li id=" + item.ID + "> <a target='_blank' href='" + item.Link + "'>" +

                          item.Name + "</a> <p class='show'><img  algin='top' src='" + item.Img + "'/><span>" +

                          item.Author + "</span></p></li>");

                    })

                },

                error: function () {

                    alert("Failed to load data");

                }

            });

        }

    </script>

 

Above script will connect three list items and stop method will append list after drag and drop with respect to lists.

 

The following are HTML tag; please them inside the form tag.

 

    <div id="content">

            <div class="edit-mu-li" id="contentLeft">

                <strong>Book List</strong>

                <ul class="connectedSortable"></ul>

            </div>

            <div class="edit-mu-li" id="contentright">

                <div class="edit-mu-li" id="con-l">

                    <strong>Book Detail</strong>

                    <ul class="connectedSortable ui-sortable"></ul>

                </div>

                <div class="edit-mu-li" id="con-r">

                    <strong>Book Detail</strong>

                    <ul class="connectedSortable ui-sortable"></ul>

                </div>

            </div>

            <div class="clear">&nbsp;</div>

        </div>

 

I have also applied some css on this example; you will find it from attached zip file.

 

On Sortable-List.aspx.cs page add Book class

 

    public class Book

    {

        public int ID { get; set; }

        public string Name { get; set; }

        public string Author { get; set; }

        public string Img { get; set; }

        public string Link { get; set; }

        public int Column { get; set; }

    }

 

The following script will return book list to client side by using ajax method.

 

 

[WebMethod]

    public static List<Book> fetchData()

    {

        return  new    List<Book>() { 

        new Book(){ Column=1, ID=1, Name="Beginning ASP.NET 4.5", Author="Imar Spaanjaars" ,

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-ASP-NET-4-5-in-C-and-VB.productCd-1118311809.html"

            Img="http://media.wiley.com/product_data/coverImage/09/11183118/1118311809.jpg"},


        new Book(){ Column=2, ID=1, Name="Beginning Visual C# 2012", Author="Karli Watson, Christian Nagel, Jacob Hammer Pedersen, Jon Reid, Morgan Skinner"

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-Visual-C-2012.productCd-1118314417.html",

            Img="http://media.wiley.com/product_data/coverImage/17/11183144/1118314417.jpg"},


        new Book(){ Column=3, ID=1, Name="Professional Microsoft IIS 8", Author="Kenneth Schaefer" ,

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-Microsoft-IIS-8.productCd-1118388046.html"

            Img="http://media.wiley.com/product_data/coverImage/46/11183880/1118388046.jpg"},


        new Book(){ Column=1, ID=1, Name="Professional C# 2012 and .NET 4.5", Author="Christian Nagel, Bill Evjen, Jay Glynn, Karli Watson, Morgan Skinner"

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-C-2012-and-NET-4-5.productCd-1118314425.html", Img="http://media.wiley.com/product_data/coverImage/25/11183144/1118314425.jpg"},


        new Book(){ Column=1, ID=1, Name="Professional HTML5 Mobile Game Development", Author="Pascal Rettig"

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Professional-HTML5-Mobile-Game-Development.productCd-1118301323.html"

            Img="http://media.wiley.com/product_data/coverImage/23/11183013/1118301323.jpg"},


        new Book(){ Column=2, ID=1, Name="Beginning SharePoint 2010 Development", Author="Steve Fox" ,

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Beginning-SharePoint-2010-Development.productCd-0470584637.html"

            Img="http://media.wiley.com/product_data/coverImage/37/04705846/0470584637.jpg"},


        new Book(){ Column=3, ID=1, Name="Facebook Application Development", Author="Nick Gerakines" ,

            Link="http://www.wrox.com/WileyCDA/WroxTitle/Facebook-Application-Development.productCd-0470246669.html"

            Img="http://media.wiley.com/product_data/coverImage/69/04702466/0470246669.jpg"}

        };

    } 

 

Note: Ajax method will not fetch data until unless fetchdata function is not static.

 

This example guides you how to sortable multiple list and get book detail on right two list and display only name of book on first list. By using this example you can make dashboard or drag and drop add to credit card with detail information on client side.

 

In my next tutorial, I will demonstrate how to fetch data from server side when list is drop

 Output

Download

Mutiple-sortable-list.rar (3.25 kb)

Demo

See live demo

Protected by Copyscape Online Plagiarism Tool
David
David United States
10/3/2012 9:28:09 PM #

Thank you so much. I have spent a lot of money which you have provided here very easily. Really helpful.

christian
christian United States
10/3/2012 9:29:45 PM #

I truly enjoyed reading it, you may be a great author.I will be sure to bookmark your blog and definitely will come back very soon. I want to encourage one to continue your great writing.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5