jQuery reorder list & saving in to database from Asp.Net C#

I have faced lot of challenges while using Ajax Toolkit control for re-ordering a list and saving to database.. After doing some R&D I’ve  found some nice samples which uses jQuery which is very light weight.The good part of jQuery is we can control the rendering marking.. with CSS and from the backed we don’t need any ViewState or any kind of mechanism..

You can Download the complete source code from here

To begin with reorder stuff add jQuery scripts to your aspx page.

<link rel="stylesheet" type="text/css" href="list-reorder.css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.disable.text.select.pack.js">
</script>
<script type="text/javascript" src="json2.js"></script>
<script type="text/javascript" src="jquery.listreorder.js"></script>

The sample code uses Unordered list and list view control.. Add a List view control in to asp.net page..inside UL markup use class name as “lists“.

Next is adding a attribute to <li> tag which help to identify the exact element you are ordering,  so I am adding attribute name as id and setting value as ItemId which fetching from DB column identity value.

<li id='<%# DataBinder.Eval(Container.DataItem, “ItemId“)%>’>

<ul class="lists">
<asp:ListView ID="lvNews" runat="server">
<LayoutTemplate>
<asp:Panel ID="itemPlaceHolder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<li id='<%# DataBinder.Eval(Container.DataItem, "ItemId")%>'>
<%# DataBinder.Eval(Container.DataItem, "Title")%></li>
</ItemTemplate>
<ItemSeparatorTemplate>
</ItemSeparatorTemplate>
</asp:ListView>
</ul>

Add following code in codebehind class for binding the data to list view control

using System;
using System.Collections.Generic;

public class News
{

public int ItemId { get; set; }
public string Title { get; set; }

internal static IList<News> GetNews()  //replace this method call with your db logic
{
return new List<News>
{
new News{ItemId=1,Title="News Title 1"},
new News{ItemId=2,Title="News Title 2"},
};
}

internal static void SaveReorderList(List<string> items) //replace this method call with your db logic
{
int order = 1;
string sql = string.Empty;
foreach (string item in items)
{
//replace with your sql statement.
sql = "update news set display_order = " + order + " where news_id = '" + item + "'";
order += 1;
sql = string.Empty;
}
}
}

public partial class jQueryReorder_Net_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindNews();
}
}

private void BindNews()
{
var news = News.GetNews();
lvNews.DataSource = news;
lvNews.DataBind();
}

[System.Web.Services.WebMethod]
public static string SaveReOrder(List<String> items)
{
try
{
News.SaveReorderList(items);
return string.Empty;
}
catch (Exception exp)
{
return exp.ToString();
}
}
}

Finally I am adding jQuery re-order script in to the page.

<script type="text/javascript">
$(document).ready(function() {
var options = {
itemHoverClass: 'itemHover',
dragTargetClass: 'dragTarget',
dropTargetClass: 'dropTarget',
useDefaultDragHandle: true
};

var lists = $('.lists').ListReorder(options);
var items = [];
lists.bind('listorderchanged', function(evt, jqList, listOrder) {
for (var i = 0; i < listOrder.length; i++) {
items[i] = $("ul li:eq(" + i + ")").attr('id');
}
});

$('#btnSave').click(function() {
if (items.length > 0) {
var jsonText = JSON.stringify({ items: items });
$.ajax({
type: "POST",
url: '<%=ResolveUrl("~/jQueryReorder.Net/")%>Default.aspx/SaveReOrder',
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function() { $("#result").html("Reorder items saved successfully"); },
failure: function(msg) { alert(msg); }
});
}
else {
alert("Sorry you have not reorder any items");
}
});
});
</script>

When ever the list order changed the event get fired and loop through the entire list items and sets the attribute id value in to a array which will be converted later to JSON format and pass it to a web method for saving into database. Don’t forget to add method attribute as System.Web.Services.WebMethod in the reorder save method.

You can Download the complete source code from here

Hope this helps and If you have any comments, please feel free to write your feedback.

Thanks
Deepu