Asmx web service returning xml instead of json, Trying to remove <string xmlns="http://tempuri.org/"> from service output
Clicking on the Invoke button returns XML because the request don't specify the contentType: 'application/json; charset=utf-8'
. So the experiment with clicking on Invoke button help not really.
The main problem in your code is that you convert the data to string inside of web method. The line
json = Lib.ToJSON(obj);
are not needed. What one typically do is returning the object. The GetJsonServerProcess
should be changed to something like
[ScriptService]
public class SampleService : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Process> GetJsonServerProcess()
{
int memory = 1;
return System.Diagnostics.Process.GetProcesses()
.Where(r => r.WorkingSet64 > memory)
.Select(p => new { p.ProcessName, p.WorkingSet64 })
.ToList();
}
}
The next problem is that the default input format which wait jqGrid is another (see here). So you cave to specify jsonReader
which describe the data format. In your case it will be something like
jsonReader: {
repeatitems: false,
id: "ProcessName",
root: function (obj) { return obj; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; }
}
Additionally you should never use http://localhost:1092/
prefix in Ajax url
because you cal only get data from the same site because of security reasons. The data
parameter in jqGrid has another meaning as in jQuery so you should remove data: "{}"
and move type: "POST"
from ajaxGridOptions
to mtype: "POST"
. As the result you will have something like
$(document).ready(function () {
$("#jqgajax").jqGrid({
mtype: "POST",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: '/SampleService.asmx/GetJsonServerProcess',
postData: "{}", // remove all parameters which jqGrid send typically
datatype: "json",
colNames: ['ProcessName', 'WorkingSet64'],
colModel: [
{ name: 'ProcessName', index: 'ProcessName', width: 155 },
{ name: 'WorkingSet64', index: 'WorkingSet64', width: 190 }
],
jsonReader: {
repeatitems: false,
id: "ProcessName",
root: function (obj) { return obj; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; }
},
rowNum: 10,
loadonce: true,
gridview: true,
height: 'auto',
rowList: [10, 20, 30],
viewrecords: true,
sortorder: "desc",
caption: "New API Example"
});
});
I don't tested the code, but it should be more close to what you need.
UPDATED: You should fix the code by changing jsonReader
. You can download the working demo here. It display the grid
I used on the server side the code
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Web.Services;
namespace jqGridWebASMX
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class SampleService : WebService
{
[WebMethod]
public List<Demo> GetJsonServerProcess()
{
const int memory = 1;
return Process.GetProcesses()
.Where (r => r.WorkingSet64 > memory)
.Select(p => new Demo {
Id = p.Id,
ProcessName = p.ProcessName,
WorkingSet64 = p.WorkingSet64
})
.ToList();
}
}
public class Demo
{
public int Id { get; set; }
public string ProcessName { get; set; }
public long WorkingSet64 { get; set; }
}
}
and on the client side
$("#list").jqGrid({
mtype: "POST",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
url: '/SampleService.asmx/GetJsonServerProcess',
postData: "{}", // remove all parameters which jqGrid send typically
datatype: "json",
colNames: ['ProcessName', 'WorkingSet64'],
colModel: [
{ name: 'ProcessName', index: 'ProcessName', width: 200 },
{ name: 'WorkingSet64', index: 'WorkingSet64', width: 120,
formatter: 'integer', sorttype: 'int', align: 'right' }
],
jsonReader: {
repeatitems: false,
id: "Id",
root: function (obj) { return obj.d; },
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.d.length; }
},
rowNum: 10,
loadonce: true,
gridview: true,
height: 'auto',
pager: '#pager',
rowList: [10, 20, 30],
rownumbers: true,
viewrecords: true,
sortorder: "desc",
caption: "New API Example"
});
$("#pager_left").hide(); // hide unused part of the pager to have more space