ASP.Net Example: jQuery

Showing posts with label jQuery. Show all posts

Monday, February 6, 2012

List View Drag and Drop Control using Jquery

 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>

gridview reorder row drag and drop

Drag and Drop GridView Row with jQuery.
Save Display Order in DataBase with WebMethod.
nodrag and nodrop for row that you are not want to drag and drop

GridViewReOrderDragandDrop.aspx

<%@ Page Language="C#" CodeFile="GridViewReOrderDragandDrop.aspx.cs"
 AutoEventWireup="true" Inherits="GridViewReOrderDragandDrop" %>

<!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">
    <script src="jquery-1.6.1.js" type="text/javascript"></script>
    <script src="jquery.tablednd_0_5.js" type="text/javascript"></script>
    <style>
        .noselect
        {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            cursor: move;
        }
        .tDnD_whileDrag
        {
            background-color: Lime;
        }
    </style>
    <title>ASPdotNET-Example.blogspot.com</title>

<script type="text/javascript">
var strorder;
$(document).ready(function() {
$('#GridViewReorder').tableDnD(
{
    onDrop: function(table, row) {
    reorder();
    $.ajax({
             type: "POST",
             url: "GridViewReOrderDragandDrop.aspx/GridViewReorders",
             data: '{"Reorder":"'+strorder+'"}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             async: true,
             cache: false,
             success: function (msg) {
             alert("Successfully Save ReOrder");
             }

           })
     }
}
);
});
function  reorder()
{ 
    strorder="";
    var totalid=$('#GridViewReorder tr td input').length;
    for(var i=0;i<totalid;i++)
    {
     strorder=strorder+$('#GridViewReorder tr td input')[i].getAttribute("value")+"|";
    }
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <h1>GridView Reorder Drag And Drop</h1>
 <div>
 <asp:GridView ID="GridViewReorder" runat="server" HeaderStyle-CssClass="nodrag nodrop"
AutoGenerateColumns="False">
 <Columns>
    <asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="ID">
      <ItemTemplate>
        <asp:Label ID="lblID" runat="server" Text='<%# Bind("id") %>'></asp:Label>
       <asp:HiddenField ID="hdnid" runat="server" Visible="true" Value='<%# Bind("id") %>' />
      </ItemTemplate>
     </asp:TemplateField>
        <asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="Name">
       <ItemTemplate>
         <asp:Label ID="lblName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
         </ItemTemplate>
        </asp:TemplateField>
     <asp:TemplateField HeaderText="Display Order" ItemStyle-CssClass="noselect">
        <ItemTemplate>
          <asp:Label ID="lblOrder" runat="server" Text='<%# Bind("displayorder") %>'>
</asp:Label>
          </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</div>
    <h1> ASPdotNet-Example.blogspot.com</h1>
    </center>
    </form>
</body>
</html>

GridViewReOrderDragandDrop.aspx.cs

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.Services;
public partial class GridViewReOrderDragandDrop : System.Web.UI.Page 
{
    SqlConnection strCon;
    string sql;
    SqlDataAdapter objAd;
    DataSet objDs;
    protected void Page_Load(object sender, EventArgs e)
    {
        GridViewReorder.DataSource = Con();
        GridViewReorder.DataBind();
    }
    protected DataSet Con()
    {
strCon = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
        objAd = new SqlDataAdapter("ListGrid", strCon);
        objDs = new DataSet();
        objAd.Fill(objDs);
        return objDs;
    }
    [WebMethod]

    public static void GridViewReorders(string Reorder)
    {
        string[] ListID = Reorder.Split('|');
        for (int i = 0; i < ListID.Length; i++)
        {
            if (ListID[i] != "" && ListID[i] !=null)
            {
                updateGridViewReorder(Convert.ToInt16(ListID[i]), i+1);
            }
        }

    }


    public static void updateGridViewReorder(int id, int DisplayOrder)
    {SqlConnection con ;
con= new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
        SqlCommand cmd = new SqlCommand("UpdateOrder");
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Connection = con;
        cmd.Parameters.AddWithValue("@id", id);
        cmd.Parameters.AddWithValue("@DisplayOrder",DisplayOrder);
        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();
    
    }
}

Database Script

calling asp.net method from jquery

ASP.NET Code Behind Method is Call by jQuery Function and AJAX.

Let's See How

jQuery.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery.aspx.cs"

Inherits="jQuery" %>

<!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>Untitled Page</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"

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

      <script type ="text/javascript">

          $(document).ready(function () {

              $('#<%=btnjQuery.ClientID %>').click(function () {

                  $.ajax({

                      type: "POST",

                      url: "jQuery.aspx/CodeBehindMethod",

                      data: "{}",

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

                     dataType: "json",

                     async: true,

                     cache: false,

                     success: function (msg) {

                         $('#result').text(msg.d); 

                     }

                 })

                 return false;

             });

         });

     </script>
    
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button ID="btnjQuery" runat="server" Text="call jQuery Function" />

    <br /><br />

    <div id="result"></div>
    </div>
    </form>
</body>
</html>

well do not forget System.Web.Services NameSpace and

Method Must be Static and it's Variable also Static.
jQUery.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;

public partial class jQuery: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]

    public static string CodeBehindMethod()

       {

           return "Message from code behind Method.";

       }
}

ASP.Net Example

Pages

Monday, February 6, 2012

List View Drag and Drop Control using Jquery

Sunday, October 2, 2011

gridview reorder row drag and drop

Sunday, July 17, 2011

calling asp.net method from jquery

Followers