Post
Ask Question

Creating a Sortable List in Web API Using jQuery

Introduction

This article shows how to create a sortable item list. Under this you can change the position of the items in the list, drag items and replace other list items.

The following is the procedure for creating the application.

Step 1

First create a Web API application.

  • Start Visual Studio 2012.
  • From the start window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web".
  • Select "ASP.NET MVC4 Web Application" and click the "OK" button.

    sort.jpg

  • From the "MVC4 Project" window select "Web API".

    sort1.jpg

  • Click the "OK" button.

Step 2

Now we write some code in the "_Layout.cshtml" file. This file exists:

  • In the "Solution Explorer".
  • Expand the "Views" folder.
  • Select "Shared" -> "_Layout.cshtml".

    sort2.jpg

Add the following code:

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>@ViewBag.Title</title>  
  5.     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
  6.     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
  7.     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
  8. </head>  
  9. <body>  
  10.     @RenderBody()  
  11. </body>  
  12. </html>  

 

Step 3

Now use the "index.cshtml" file. This file exists:

  • In the "Solution Explorer".
  • Expand "View" folder.
  • Select "Home" -> "index.cshtml".

    sort3.jpg

Add the following code:

 

  1. @{  
  2.     ViewBag.Title = "This code for creating sortable list in Web API";  
  3. }  
  4. <h3>Sortable values</h3>  
  5. <style type="text/css">  
  6. #Value { list-style-type:square; margin:auto; padding: 0; width: 40%; }  
  7. #Value li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.0em; height: 15px; }  
  8. #Value li span { position:absolute; margin-left: -1.3em; }  
  9. </style>  
  10. <script type="text/javascript">  
  11.     $(function () {  
  12.         $("#Value").sortable();  
  13.         $("#Value").disableSelection();  
  14.     });  
  15. </script>  
  16. <ul id="Value">  
  17. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 1</li>  
  18. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 2</li>  
  19. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 3</li>  
  20. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 4</li>  
  21. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 5</li>  
  22. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 6</li>  
  23. <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Value 7</li>  
  24. </ul>  

 

Step 4

Now execute the application by pressing "F5". The output looks like this:

sort4.jpg

Now move the item from one location to another.

sort7.jpg

After moving the item the list looks like this:

sort5.jpg

After refreshing the page, the changes that you made in the list are lost.

sort6.jpg


Similar Articles