Introduction:

This code-sample includes two ListView controls that the user can sort and move items and drag items from one control to another. This sample can be used for many puroses. For example, you can create an application of online shopping and the customer will have better feelings about your application.

Here is the code

  1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010 or Visual Web Developer 2010
  2. Add a web form named "Default.aspx" to the root directory.
  3. Create a "XmlFile" folder and add two XML files in it, "ListView1.xml" and "ListView2.xml".
  4. Filling in some elements in the XML file, like code sample and the data will bind to the ListView controls.
  1. <root>
  2. <data open="0">element 1</data>
  3. <data open="1">element 2</data>
  4. <data open="1">element 3</data>
  5. <data open="1">element 4</data>
  6. <data open="1">element 5</data>
  7. <data open="1">element 6</data>
  8. <data open="1">element 7</data>
  9. </root>
Import some jQuery JavaScript library in <head> tag like this:
  1. <link href="JQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
  2. <script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
  3. <script src="JQuery/jquery-ui.min.js" type="text/javascript"></script>
Add jQuery functions in the Default.aspx page, these two jQuery functions are for dragging and dropping items to a ListView control:
  1. <script type="text/javascript">
  2. $(function ()
  3. {
  4. $("#sortable1, #sortable2").sortable
  5. ({
  6. connectWith: ".connectedSortable"
  7. }).disableSelection();
  8. });
  9. $(document).ready(function ()
  10. {
  11. $("li").dblclick(function ()
  12. {
  13. $(this).closest('li').remove();
  14. });
  15. });
  16. </script>
Wirte C# code in the Default.aspx.cs page to bind XML files data:
  1. // Bind two xml data file to ListView control, actually you can change the "open" property to "0",
  2. // In that way, it will not display in ListView control.
  3. XmlDocument xmlDocument = new XmlDocument();
  5. using (DataTable tabListView1 = new DataTable())
  6. {
  7. tabListView1.Columns.Add("value", Type.GetType("System.String"));
  8. xmlDocument.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListView1.xml");
  9. XmlNodeList xmlNodeList = xmlDocument.SelectNodes("root/data[@open='1']");
  10. foreach (XmlNode xmlNode in xmlNodeList)
  11. {
  12. DataRow dr = tabListView1.NewRow();
  13. dr["value"] = xmlNode.InnerText;
  14. tabListView1.Rows.Add(dr);
  15. }
  16. ListView1.DataSource = tabListView1;
  17. ListView1.DataBind();
  18. }
Build the application and you can debug it.

Please drag items from a ListView control to another, you can also sort items by dragging items to the right position.

Double-click one item to drop it from the ListView control.