How to Bind XML Data to Ajax Reorder List Control

Hellow, I will explain how to bind XML Data to Ajax Reorder List Control in asp.net using c#.

1. Open Visual Studio
2. Create a new Empty Web Site
3.  Add new item>Web Form
4.  Add new item>XML File >name it(User_Account.xml)

After adding XML file write some data about User Account Deatail.

Below I have write some data into XML file.

User_Account.xml

<?xml version="1.0" encoding="utf-8" ?>
<Party_Account>
  <field>
    <Column Name="Account_Code"></Column>
    <Column Description="Account Code"></Column>
  </field>
  <field>
    <Column Name="Account_Name"></Column>
    <Column Description="Account Name"></Column>
  </field>
  <field>
    <Column Name="Account_Type"></Column>
    <Column Description="Account Type"></Column>
  </field>
  <field>
    <Column Name="Company_Name"></Column>
    <Column Description="Company Name"></Column>
  </field>
  <field>
    <Column Name="Co_Address1"></Column>
    <Column Description="Company Address1"></Column>
  </field>
  <field>
    <Column Name="Co_Address2"></Column>
    <Column Description="Company Address2"></Column>
  </field>
  <field>
    <Column Name="Co_Address3"></Column>
    <Column Description="Company Address3"></Column>
  </field>
  <field>
    <Column Name="Co_City"></Column>
    <Column Description="Company City"></Column>
  </field>
  <field>
    <Column Name="Co_PinCode"></Column>
    <Column Description="Company Pincode"></Column>
  </field>
  <field>
    <Column Name="Co_Phone_No"></Column>
    <Column Description="Company PhoneNo"></Column>
  </field>
  <field>
    <Column Name="Co_MobileNo"></Column>
    <Column Description="Company MobileNo"></Column>
  </field>
  <field>
    <Column Name="Co_FaxNo"></Column>
    <Column Description="Company FaxNo"></Column>
  </field>
  <field>
    <Column Name="Co_CountryID"></Column>
    <Column Description="Company CountryID"></Column>
  </field>
  <field>
    <Column Name="Co_SateID"></Column>
    <Column Description="Company StateID"></Column>
  </field>
  <field>
    <Column Name="Co_EmailID"></Column>
    <Column Description="Company EmailID"></Column>
  </field>
  <field>
    <Column Name="URl"></Column>
    <Column Description="Company URL"></Column>
  </field>
  <field>
    <Column Name="ContactPerson_Name"></Column>
    <Column Description="Contact Person Name"></Column>
  </field>
  <field>
    <Column Name="Address1"></Column>
    <Column Description="Address1"></Column>
  </field>
  <field>
    <Column Name="Address2"></Column>
    <Column Description="Address2"></Column>
  </field>
  <field>
    <Column Name="Address3"></Column>
    <Column Description="Address3"></Column>
  </field>
  <field>
    <Column Name="City"></Column>
    <Column Description="city"></Column>
  </field>
  <field>
    <Column Name="Country_ID"></Column>
    <Column Description="CountryID"></Column>
  </field>
  <field>
    <Column Name="State_ID"></Column>
    <Column Description="StateID"></Column>
  </field>
  <field>
    <Column Name="EmailID"></Column>
    <Column Description="EmailID"></Column>
  </field>
  <field>
    <Column Name="Phone_No"></Column>
    <Column Description="Phoneno"></Column>
  </field>
  <field>
    <Column Name="Mobile_No"></Column>
    <Column Description="MobileNo"></Column>
  </field>
  <field>
    <Column Name="PinCode"></Column>
    <Column Description="Pincode"></Column>
  </field>
  <field>
    <Column Name="CST_No"></Column>
    <Column Description="cstno"></Column>
  </field>
  <field>
    <Column Name="TIN_No"></Column>
    <Column Description="Tin Number"></Column>
  </field>
  <field>
    <Column Name="PAN_No"></Column>
    <Column Description="PAN Card Number"></Column>
  </field>
  <field>
    <Column Name="PF_No"></Column>
    <Column Description="PF Number"></Column>
  </field>
  <field>
    <Column Name="ServiceTax_No"></Column>
    <Column Description="Service tax number"></Column>
  </field>
  <field>
    <Column Name="TAN_No"></Column>
    <Column Description="TAN Number"></Column>
  </field>
  <field>
    <Column Name="VAT_No"></Column>
    <Column Description="VAT Number"></Column>
  </field>
  <field>
    <Column Name="Credit_Period"></Column>
    <Column Description="Credit period"></Column>
  </field>
  <field>
    <Column Name="Credit_Limit"></Column>
    <Column Description="Credit Limit"></Column>
  </field>
  <field>
    <Column Name="Company_ID"></Column>
    <Column Description="Company ID"></Column>
  </field>
  <field>
    <Column Name="ChequePath"></Column>
    <Column Description="ChequePath"></Column>
  </field>
  <field>
    <Column Name="User_Id"></Column>
    <Column Description="User ID"></Column>
  </field>
</Party_Account>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" style="background-color: #CCCCCC" >
    <div>
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </asp:ToolkitScriptManager>
        </div>
        <div>
            <asp:ReorderList ID="ReOrList" runat="server" AllowReorder="True" PostBackOnReorder="False"
                ClientIDMode="AutoID">
                <DragHandleTemplate>
                    <div class="ClsDragHandle">
                        <asp:Image ID="Image1" runat="server" ImageUrl="drag1.png" />
                    </div>
                </DragHandleTemplate>
                <ItemTemplate>
                    <asp:Label ID="lbldescription" runat="server" Text='<%#Eval("Description") %>'></asp:Label>
                </ItemTemplate>
            </asp:ReorderList>
        </div>
    </div>
    </form>
</body>
</html>

The code scrap provided below is used to perform to Bind XML Data to Ajax reorder list control.

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
            ReOrList.DataSource = BindData();
            ReOrList.DataBind();
        }
    }
    public System.Data.DataTable BindData()
    {
        System.Data.DataTable dt = new System.Data.DataTable("DTbl_Description");
        try
        {
            System.Xml.XmlDocument xmldoc = new System.Xml.XmlDocument();
            xmldoc.Load(Server.MapPath("User_Account.xml"));
            System.Xml.XmlNodeList xnlist = xmldoc.GetElementsByTagName("Column");
            dt.Columns.Add("Description", typeof(string));
            for (int i = 0; i < xnlist.Count; i++)
            {
                if (xnlist[i].Attributes[0].Name.ToString() == "Description")
                {
                    dt.Rows.Add(xnlist[i].Attributes[0].Value.ToString());
                }
            }
        }
        catch (Exception)
        {
            throw;
        }
        return dt;
    }
}

Run the application and see the output as below.

Below Figure show that after drag item (Address3) in the Reorder list.

Download