ASP.Net Example: Read XML

 In this example two things are covered.

1. List View Drag and Drop Control using Jquery

2. How to read data from XML ?

 dragNdrop.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dragNdrop.aspx.cs"

Inherits="DragItemInListViewASPNET.dragNdrop" %>

<!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="JQuery/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="JQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="JQuery/jquery-ui.min.js" type="text/javascript"></script>
    <style type="text/css">
        #DragableTable1, #DragableTable2
        {
            list-style-type: none;
            border-right: #669999 2px solid;
            padding-right: 5px;
            border-top: #669999 2px solid;
            padding-left: 5px;
            float: left;
            padding-bottom: 0px;
            margin: 3px;
            border-left: #669999 2px solid;
            width: 160px;
            padding-top: 5px;
            border-bottom: #669999 2px solid;
        }
        #DragableTable1 li, #DragableTable2 li
        {
            border-right: #000 1px solid;
            padding-right: 2px;
            border-top: #000 1px solid;
            padding-left: 2px;
            font-size: 15px;
            margin-bottom: 5px;
            padding-bottom: 2px;
            border-left: #000 1px solid;
            width: 156px;
            cursor: pointer;
            padding-top: 2px;
            border-bottom: #000 1px solid;
            background-color: #eee;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#DragableTable1, #DragableTable2").sortable({
                connectWith: ".connectedDragableTable"
            }).disableSelection();
        });

        $(document).ready(function () {
            $("li").dblclick(function () {
                $(this).closest('li').remove();
            });
        });   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>
        <b>List view Drag and Drop Example</b></h1>
    <br />
    <div>
        <asp:ListView ID="ListView1" runat="server">
            <LayoutTemplate>
                <ul id="DragableTable1" class="connectedDragableTable">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder">

</asp:PlaceHolder>
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li class="ui-state-default">
                    <%# Eval("Dragvalue1") %></li>
            </ItemTemplate>
        </asp:ListView>
        <asp:ListView ID="ListView2" runat="server">
            <LayoutTemplate>
                <ul id="DragableTable2" class="connectedDragableTable">
                    <asp:PlaceHolder runat="server" ID="itemPlaceholder">

</asp:PlaceHolder>
                </ul>
            </LayoutTemplate>
            <ItemTemplate>
                <li class="ui-state-highlight">
                    <%# Eval("Dragvalue2") %></li>
            </ItemTemplate>
        </asp:ListView>
    </div>
    </form>
</body>
</html>

dragNdrop.aspx.cs

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
using System.Data;
namespace DragItemInListViewASPNET
{
    public partial class dragNdrop : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            XmlDocument xmlDocument = new XmlDocument();
            using (DataTable objListView1 = new DataTable())
            {
                objListView1.Columns.Add("Dragvalue1", Type.GetType("System.String"));
 xmlDocument.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListViewData1.xml");
 XmlNodeList xmlNodeList = xmlDocument.SelectNodes("root/data[@open='1']");
                foreach (XmlNode xmlNode in xmlNodeList)
                {
                    DataRow dr = objListView1.NewRow();
                    dr["Dragvalue1"] = xmlNode.InnerText;
                    objListView1.Rows.Add(dr);
                }
                ListView1.DataSource = objListView1;
                ListView1.DataBind();
            }

            XmlDocument xmlDocument2 = new XmlDocument();
            using (DataTable objListView2 = new DataTable())
            {
                objListView2.Columns.Add("Dragvalue2", Type.GetType("System.String"));

xmlDocument2.Load(AppDomain.CurrentDomain.BaseDirectory + "/XmlFile/ListViewData2.xml");
 XmlNodeList xmlNodeList2 = xmlDocument2.SelectNodes("root/data[@open='1']");
                foreach (XmlNode xmlNode in xmlNodeList2)
                {
                    DataRow dr = objListView2.NewRow();
                    dr["Dragvalue2"] = xmlNode.InnerText;
                    objListView2.Rows.Add(dr);
                }
                ListView2.DataSource = objListView2;
                ListView2.DataBind();
            }
        }
    }
}

ListViewData1.xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <data open="1">drag and drop element 1</data>
  <data open="1">drag and drop element 2</data>
  <data open="1">drag and drop element 3</data>
  <data open="1">drag and drop element 4</data>
  <data open="1">drag and drop element 5</data>
  <data open="1">drag and drop element 6</data>
  <data open="1">drag and drop element 7</data>
</root>

ASP.Net Example

Pages

Monday, February 6, 2012

List View Drag and Drop Control using Jquery

Followers