how i insert into database using jquery when drag and drop

here is the code that is already implemented on another place ,i want to implement in new place how could i do.

CS code

[WebMethod]

public static void SaveKeyItems(Guid reportId, List keyProductIds)

{

ServiceInfo s = new ServiceInfo(ApplicationState.ServiceTransportSecurityMode, ApplicationState.ServiceBindingType, ApplicationState.ServiceUserName, ApplicationState.ServicePassword, ApplicationState.ServiceDomain, ApplicationState.GetServiceEndPointAddress("CustomizedReportKeyProductServiceEndPointAddress"));

ICustomizedReportKeyProductService keyProductService = CustomizedReportKeyProduct.GetService(s);

DataTable predicateDataTable = CustomizedReportKeyProduct.GetPredicateDataTable(keyProductService, " AND customized_report_id = '" + reportId + "'");

if (predicateDataTable.Rows.Count > 0)

{

List keyProductInfos = CustomizedReportKeyProduct.GetObjectListFromDataTable(predicateDataTable);

foreach (CustomizedReportKeyProductInfo keyProductInfo in keyProductInfos)

CustomizedReportKeyProduct.DeleteCustomizedReportKeyProduct(keyProductService, keyProductInfo);

}

foreach (Guid keyProductId in keyProductIds)

{

CustomizedReportKeyProductInfo keyProductInfo = new CustomizedReportKeyProductInfo();

keyProductInfo.CustomizedReportId = reportId;

keyProductInfo.ProductId = keyProductId;

keyProductInfo.Created = DateTime.Now;

keyProductInfo.CreatedBy = LarvolSecurityManager.Instance.LoggedUser.UserID;

keyProductInfo.Modified = DateTime.Now;

keyProductInfo.ModifiedBy = LarvolSecurityManager.Instance.LoggedUser.UserID;

keyProductInfo.IsActive = true;

CustomizedReportKeyProduct.CreateCustomizedReportKeyProduct(keyProductService, keyProductInfo);

}

aspx code

$("#key-products .droppable-area").droppable({

activeClass: "ui-state-default",

hoverClass: "ui-state-hover",

accept: ":not(.ui-sortable-helper)",

drop: function (event, ui) {

var olItemList = $(this).parent().find("ol");

if ($(olItemList).find("li[productid='" + ui.draggable.attr("productid") + "']").length == 0) {

mask(function () { saveItem('keyProductId', ui.draggable.attr("productid"), baseUrl + "Reporting/ReportBuilder/Builder.aspx/SaveKeyProduct", false); }, 0);

}

location.reload(true);

}

});

loadExcludedItems();

loadKeyProducts();

});

function saveItem(paramenterName, paramenterValue, webServiceUrl, reloadTree) {

var jsonString = "{ reportId: '" + reportId + "', " + paramenterName + ": '" + paramenterValue + "'}";

ajaxPost(webServiceUrl, jsonString, function () { if (reloadTree) loadTree(currentOpenSectionId); });

}

function saveItemList(listId, jsonParamenterName, webServiceUrl) {

var parentDiv = $("#" + listId);

var successHandler = function () { updateProductItemList(true, $("#" + listId + " h1")); loadTree(); };

var exludedProductArray = "[";

if ($("li[productid]:visible", parentDiv).length > 0) {

$("li[productid]:visible", parentDiv).each(function (index) { exludedProductArray += "'" + $(this).attr("productid") + "',"; });

exludedProductArray = exludedProductArray.substring(0, exludedProductArray.length - 1);

}

exludedProductArray += "]";

var jsonString = "{ reportId: '" + reportId + "', " + jsonParamenterName + ": " + exludedProductArray + "}";

ajaxPost(webServiceUrl, jsonString, successHandler);

}

function loadExcludedItems() {

debugger;

loadListItems("excluded-products", "GetExcludedProducts", "excluded-product-list-item-remove");

}

function loadKeyProducts() {

loadListItems("key-products", "GetKeyProducts", "key-product-list-item-remove");

}

function loadListItems(listId, webServiceMethodName, itemClassName) {

var successhandler = function (exludedProducts) {

if (exludedProducts.length > 0) {

var olExludedProducts = $("#" + listId + " ol");

$(olExludedProducts).find(".placeholder").hide();

for (var i = 0; i < exludedProducts.length; i++) {

//var innerlst = '

' + exludedProducts[i].Item2 + '

Delete item

$('

').html('

' + exludedProducts[i].Item2 + '

' + 'Delete item')

.attr("productid", exludedProducts[i].Item1)

.appendTo(olExludedProducts);

}

};

ajaxPost(baseUrl + "Reporting/ReportBuilder/Builder.aspx/" + webServiceMethodName, "{ reportId: '" + reportId + "'}", successhandler);

}