Help with Edit in ASP.NET

[DeeCanMember]

Hi All,

I am trying to make an editable grid in ASP.NET using the Northwind DB example. I use the updaterow function to pass json to the webservice,
where it reads the object and updates the DB with new values. However, I get ‘internal server error’ when I run the code. Please help me fix this.

Regards
DeeCan

My javascript file is as follows:

$(document).ready(function () {
//Getting the source data with ajax GET request
var source = {
datatype: “json”,
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CompanyName’ },
{ name: ‘ContactName’ },
{ name: ‘ContactTitle’ },
{ name: ‘City’ },
{ name: ‘Country’ },
{ name: ‘Address’}],
type: ‘GET’,
url: ‘Service.asmx/GetCustomers’,

updaterow: function (rowid, rowdata, commit) {
//process row data
var data = {
CustomerID: rowdata.CustomerID,
CompanyName: rowdata.CompanyName,
ContactName: rowdata.ContactName,
ContactTitle: rowdata.ContactTitle,
City: rowdata.City,
Country: rowdata.Country,
Address: rowdata.Address
};
//make ajax call to server
$.ajax({
type: “POST”,
url: ‘Service.asmx/UpdateCustomers’,
contentType: ‘application/json; charset=utf-8’,
dataType: “json”,
data: data,
formatdata: function (data) {
var sendjson = JSON.stringify(data);
return sendjson;
},
success: function (data, status, xhr) {
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
commit(false);
}
}),

$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
};

var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: ‘application/json; charset=utf-8’,
loadError: function (xhr, status, error) {
alert(error);
},
downloadComplete: function (data) {
var returnData = {};
returnData.records = data.d;
return returnData;
}
});

$(“#jqxgrid”).jqxGrid({
source: dataAdapter,
sortable: true,
groupable: true,
editable: true,
columns: [
{ text: ‘Company Name’, dataField: ‘CompanyName’, columntype: ‘textbox’, width: 250, groupable: false },
{ text: ‘Contact Name’, dataField: ‘ContactName’, columntype: ‘textbox’, width: 150, groupable: false },
{ text: ‘Contact Title’, dataField: ‘ContactTitle’, editable: false, width: 180 },
{ text: ‘Address’, dataField: ‘Address’, editable: false, width: 180 },
{ text: ‘City’, dataField: ‘City’, editable: false, width: 80 },
{ text: ‘Country’, dataField: ‘Country’, editable: false }
]
});
});

My webservice code uses SQL server Tableadapter to update the DB.

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public void UpdateCustomers(string jsonobj)
{

JavaScriptSerializer js = new JavaScriptSerializer();
UpdateData ud = js.Deserialize(jsonobj);

try
{
CustomersTableAdapter tableadapter = new CustomersTableAdapter();
tableadapter.UpdateCustomerQuery(ud.CompanyName, ud.ContactName,
ud.ContactTitle, ud.City, ud.Country, ud.Address, ud.CustomerID);
}
catch(Exception ex)
{
Console.Write(ex.Message + ex.StackTrace);
}
}

[Peter StoevKeymaster]

Hi DeeCan,

To bind a Grid to web service, please take a look at this help topic: asp.net-web-service-grid.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DeeCanMember]

Hi Peter,

I built my code based off on jqwidget examples and documentation. I am able to ‘get’ data from DB and show it in UI, but unable to edit into DB. More specifically, I am able to capture the updated values and stringify them in the script side, but unable to pass them to server side. The server update function works fine – I tested the method by setting the webservice as the start page and passing the json (from script side) as argument. What is the link between script and server code that I am missing ?

Any help will be greatly appreciated.

Regards
DeeCan

Script side :

updaterow: function (rowid, rowdata, commit) {
//process row data
var data = {
CustomerID: rowdata.CustomerID,
CompanyName: rowdata.CompanyName,
ContactName: rowdata.ContactName,
ContactTitle: rowdata.ContactTitle,
City: rowdata.City,
Country: rowdata.Country,
Address: rowdata.Address
};

var sendjson1 = JSON.stringify(data);

//make ajax call to server
$.ajax({
type: ‘POST’,
url: ‘Service.asmx/UpdateCustomers’,
contentType: ‘application/json; charset=utf-8’,
dataType: “json”,
data: sendjson1,
success: function (data, status, xhr) {
alert(xhr);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
alert(textStatus);
alert(jqXHR.toString());
commit(false);
}
}),

$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}

Server side update function :

[WebMethod]
[ScriptMethod(UseHttpGet = false)]
public void UpdateCustomers(string jsonobj)
{
JavaScriptSerializer js = new JavaScriptSerializer();
UpdateData ud = js.Deserialize(jsonobj);

CustomersTableAdapter tableadapter = new CustomersTableAdapter();
tableadapter.UpdateCustomerQuery(ud.CompanyName, ud.ContactName,
ud.ContactTitle, ud.City, ud.Country, ud.Address, ud.CustomerID);
}

[Peter StoevKeymaster]

Hi DeeCan,

As far as I understand, this code

//make ajax call to server
$.ajax({
type: ‘POST’,
url: ‘Service.asmx/UpdateCustomers’,
contentType: ‘application/json; charset=utf-8′,
dataType: “json”,
data: sendjson1,
success: function (data, status, xhr) {
alert(xhr);
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
alert(textStatus);
alert(jqXHR.toString());
commit(false);
}
}),

is not working. My suggestion is to create a simple page with the Ajax call. I also think that .NET will automatically deserialize your JSON and that could be the reason for the failure. You can take a look at this page: http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DeeCanMember]

Hi Peter,

I got my ajax call to work, thanks to your link and a related article below :

http://encosia.com/using-complex-types-to-make-calling-services-less-complex/

Regards,
Deepak

[Author]

Posts