从 jqGrid 调用 WebMethod
Call WebMethod from jqGrid
我正在学习 jqGrid
并关注 this link。但是演示是在 Asp.Net MVC
中构建的,我正在尝试使用 Asp.Net WebForms
。我的调试器没有进入 WebMethod
这是我的代码
$("#tblDemo").jqGrid(
{
url: 'Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
colModel: [
{ name: 'Id', index: 'EmloyeeId', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0
});
问题似乎与 WebMethod
无关,因为如果我使用 $.ajax
就会调用它(只是为了测试 WebMethod
)。还是看看WebMethod
.
这是我引用的文件。
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="js/css/ui.jqgrid.css" rel="stylesheet" />
<script src="js/js/jquery.jqGrid.min.js"></script>
<script src="js/js/i18n/grid.locale-en.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script src="js/js/jquery.json.min.js"></script>
控制台没有错误。请帮我解决这个问题。
更新 1
按照建议更改了我的 jqGrid 代码。现在看起来像这样
$("#tblDemo").jqGrid(
{
url: '/Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
loadonce : true,
colModel: [
{ name: 'Id', width: 20, stype: 'text' },
{ name: 'FirstName', width: 150 },
{ name: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0,
gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
});
我没有包含 GetData
的定义,因为它没有引起问题,因为调试器甚至没有命中我的 WebMethod
的第一行。基本上它是从数据库中获取数据到 DataTable
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetGridData()
{
return JsonConvert.SerializeObject(GetData());
}
public static DataTable GetData()
{
string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();
DataTable dt = new DataTable();
using (var con = new SqlConnection(conStr))
{
using (var cmd = new SqlCommand("Select * From MyTest",con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
return dt;
}
更新 2
根据 Oleg 的建议,我已将代码更改如下
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetGridData()
{
return JsonConvert.SerializeObject(GetData());
}
public static DataTable GetData()
{
string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();
DataTable dt = new DataTable();
using (var con = new SqlConnection(conStr))
{
using (var cmd = new SqlCommand("Select * From MyTest",con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
return dt;
}
$("#tblDemo").jqGrid(
{
url: '/Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
loadonce : true,
colModel: [
{ name: 'Id', key: true, width: 20, stype: 'text' },
{ name: 'FirstName', width: 150 },
{ name: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0,
gridview: true,
postData: "{}",
autoencode: true,
loadError : function(xhr,st,err) {
alert("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
repeatitems: false,
root: function (obj) {
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
}
}
});
更新 3
添加了有关演示如何显示响应正文的屏幕截图
您没有发布服务器端代码,或者至少没有发布 GetGridData
的定义。此外,您应该始终包含有关您使用的 jqGrid 版本的信息。
我想您使用的是 ASMX-WebMethod。在这种情况下,您应该包括以下参数
gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
此外,如果您不打算实施服务器端分页,您应该删除 colModel
的所有 index
属性并考虑使用 loadonce: true
选项。
如果在 jqGrid 中加载数据时遇到任何问题,您应该始终在 jqGrid 中包含 loadError
回调。有关详细信息,请参阅 the answer。
我正在学习 jqGrid
并关注 this link。但是演示是在 Asp.Net MVC
中构建的,我正在尝试使用 Asp.Net WebForms
。我的调试器没有进入 WebMethod
这是我的代码
$("#tblDemo").jqGrid(
{
url: 'Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
colModel: [
{ name: 'Id', index: 'EmloyeeId', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0
});
问题似乎与 WebMethod
无关,因为如果我使用 $.ajax
就会调用它(只是为了测试 WebMethod
)。还是看看WebMethod
.
这是我引用的文件。
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="js/css/ui.jqgrid.css" rel="stylesheet" />
<script src="js/js/jquery.jqGrid.min.js"></script>
<script src="js/js/i18n/grid.locale-en.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" />
<script src="js/js/jquery.json.min.js"></script>
控制台没有错误。请帮我解决这个问题。
更新 1
按照建议更改了我的 jqGrid 代码。现在看起来像这样
$("#tblDemo").jqGrid(
{
url: '/Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
loadonce : true,
colModel: [
{ name: 'Id', width: 20, stype: 'text' },
{ name: 'FirstName', width: 150 },
{ name: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0,
gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
});
我没有包含 GetData
的定义,因为它没有引起问题,因为调试器甚至没有命中我的 WebMethod
的第一行。基本上它是从数据库中获取数据到 DataTable
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetGridData()
{
return JsonConvert.SerializeObject(GetData());
}
public static DataTable GetData()
{
string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();
DataTable dt = new DataTable();
using (var con = new SqlConnection(conStr))
{
using (var cmd = new SqlCommand("Select * From MyTest",con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
return dt;
}
更新 2
根据 Oleg 的建议,我已将代码更改如下
[WebMethod]
//[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string GetGridData()
{
return JsonConvert.SerializeObject(GetData());
}
public static DataTable GetData()
{
string conStr = System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString();
DataTable dt = new DataTable();
using (var con = new SqlConnection(conStr))
{
using (var cmd = new SqlCommand("Select * From MyTest",con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
}
return dt;
}
$("#tblDemo").jqGrid(
{
url: '/Default.aspx/GetGridData',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'First Name', 'Last Name'],
loadonce : true,
colModel: [
{ name: 'Id', key: true, width: 20, stype: 'text' },
{ name: 'FirstName', width: 150 },
{ name: 'LastName', width: 150 }]
, rowNum: 10,
sortname: 'Id',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
scrollOffset: 0,
gridview: true,
postData: "{}",
autoencode: true,
loadError : function(xhr,st,err) {
alert("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
repeatitems: false,
root: function (obj) {
return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
}
}
});
更新 3
添加了有关演示如何显示响应正文的屏幕截图
您没有发布服务器端代码,或者至少没有发布 GetGridData
的定义。此外,您应该始终包含有关您使用的 jqGrid 版本的信息。
我想您使用的是 ASMX-WebMethod。在这种情况下,您应该包括以下参数
gridview: true,
autoencode: true,
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
此外,如果您不打算实施服务器端分页,您应该删除 colModel
的所有 index
属性并考虑使用 loadonce: true
选项。
如果在 jqGrid 中加载数据时遇到任何问题,您应该始终在 jqGrid 中包含 loadError
回调。有关详细信息,请参阅 the answer。