Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Feb 08, 2011 05:48 AM by asteranup
Participant
1581 Points
437 Posts
Feb 07, 2011 06:45 PM|LINK
Hi there,
The AjaxToolkit has a ReorderList. I'm searching for a jQuery solution that does the same and found this page.
I would like to change the order of divs (vertically) and upload the new order to the database (ajax).
Do you have a simple solution or suggestion?
Thanks!
All-Star
32835 Points
5563 Posts
MVP
Feb 07, 2011 07:38 PM|LINK
Few days back I wrote the same with complete solution with jQuery http://codeasp.net/articles/asp-net/228/reorder-list-using-jquery-and-asp-net Demo: http://www.codeasp.net/assets/demos/articles/reorder-list-using-jquery-and-asp-net/sample.aspx
30184 Points
4906 Posts
Feb 08, 2011 05:48 AM|LINK
Hi,
See the code below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> <style> .item { width: 300px; padding: 10px 10px 10px 10px; margin: 5px 0px 5px 0px; background-color:Gray; color:White; } </style> <script type="text/javascript"> $(document).ready(function() { $(".container").sortable(); $(".container").disableSelection(); $("#orderDiv").click(function() { var divs = $.map($("div.container div.item"), function(item, index) { var divDetail = new Object(); divDetail.DivID = $(item).attr("id"); divDetail.Order = index + 1; return divDetail; }); var jsonDivs = JSON.stringify(divs); $.ajax({ type: "POST", contentType: "application/json", data: "{'divs':" + jsonDivs + "}", url: "ServiceCompas.asmx/DivsDetail", dataType: "json", success: function(data) { alert(data.d); }, error: function(XMLHttpRequest, textStatus, errorThrown) { debugger; } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <div class="container"> <div class="item" id="itemPlaceholder" runat="server"></div> </div> </LayoutTemplate> <ItemTemplate> <div id='<%#Eval("Id")%>' class="item"><%#Eval("Id")%></div> </ItemTemplate> </asp:ListView> <input type="button" id="orderDiv" value="Save change" /> </form> </body> </html>
Web Service-
[WebMethod] public bool DivsDetail(List<DivsDetail> divs) { //update to database return true; }
Data Class-
public class DivsDetail { public int DivID { get; set; } public int Order { get; set; } }
Code behind-
protected void Page_Load(object sender, EventArgs e) { var objData = (new[] { new { Id = 1} }).ToList(); objData.Add(new { Id = 2}); objData.Add(new { Id = 3}); objData.Add(new { Id = 4}); objData.Add(new { Id = 5}); objData.Add(new { Id = 6}); objData.Add(new { Id = 7}); objData.Add(new { Id = 8}); objData.Add(new { Id = 9}); objData.Add(new { Id = 10 }); objData.Add(new { Id = 11}); objData.Add(new { Id = 12}); objData.Add(new { Id = 13 }); objData.Add(new { Id = 14}); ListView1.DataSource = objData; ListView1.DataBind(); }
ShadowDanser
Participant
1581 Points
437 Posts
Reorder list with jQuery
Feb 07, 2011 06:45 PM|LINK
Hi there,
The AjaxToolkit has a ReorderList. I'm searching for a jQuery solution that does the same and found this page.
I would like to change the order of divs (vertically) and upload the new order to the database (ajax).
Do you have a simple solution or suggestion?
Thanks!
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: Reorder list with jQuery
Feb 07, 2011 07:38 PM|LINK
Few days back I wrote the same with complete solution with jQuery
http://codeasp.net/articles/asp-net/228/reorder-list-using-jquery-and-asp-net
Demo: http://www.codeasp.net/assets/demos/articles/reorder-list-using-jquery-and-asp-net/sample.aspx
asteranup
All-Star
30184 Points
4906 Posts
Re: Reorder list with jQuery
Feb 08, 2011 05:48 AM|LINK
Hi,
See the code below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> <style> .item { width: 300px; padding: 10px 10px 10px 10px; margin: 5px 0px 5px 0px; background-color:Gray; color:White; } </style> <script type="text/javascript"> $(document).ready(function() { $(".container").sortable(); $(".container").disableSelection(); $("#orderDiv").click(function() { var divs = $.map($("div.container div.item"), function(item, index) { var divDetail = new Object(); divDetail.DivID = $(item).attr("id"); divDetail.Order = index + 1; return divDetail; }); var jsonDivs = JSON.stringify(divs); $.ajax({ type: "POST", contentType: "application/json", data: "{'divs':" + jsonDivs + "}", url: "ServiceCompas.asmx/DivsDetail", dataType: "json", success: function(data) { alert(data.d); }, error: function(XMLHttpRequest, textStatus, errorThrown) { debugger; } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <div class="container"> <div class="item" id="itemPlaceholder" runat="server"></div> </div> </LayoutTemplate> <ItemTemplate> <div id='<%#Eval("Id")%>' class="item"><%#Eval("Id")%></div> </ItemTemplate> </asp:ListView> <input type="button" id="orderDiv" value="Save change" /> </form> </body> </html>Web Service-
[WebMethod] public bool DivsDetail(List<DivsDetail> divs) { //update to database return true; }Data Class-
public class DivsDetail { public int DivID { get; set; } public int Order { get; set; } }Code behind-
protected void Page_Load(object sender, EventArgs e) { var objData = (new[] { new { Id = 1} }).ToList(); objData.Add(new { Id = 2}); objData.Add(new { Id = 3}); objData.Add(new { Id = 4}); objData.Add(new { Id = 5}); objData.Add(new { Id = 6}); objData.Add(new { Id = 7}); objData.Add(new { Id = 8}); objData.Add(new { Id = 9}); objData.Add(new { Id = 10 }); objData.Add(new { Id = 11}); objData.Add(new { Id = 12}); objData.Add(new { Id = 13 }); objData.Add(new { Id = 14}); ListView1.DataSource = objData; ListView1.DataBind(); }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog