JQGrid - 无法调用 ASP.NET WebMethod,但可以使用 Ajax
我是 jqGrid 的新手,我发现很难遵循文档 jqGrid 文档
我不知道如何在设置 JQGrid 时调用 WebMethod。我已成功进行 Ajax 调用来获取数据,然后使用本地数据设置 JQGrid。我认为这是设置过程中的一个额外步骤,我应该能够使用 url 属性提供 webmethod 的路径。
editurl 属性也是同样的方法。我实际上从未收到服务器的帖子。
原始代码
尝试 JQGrid 设置
function GetData()
{
$('#list').jqGrid({
type: "POST",
url: "Default.aspx/GetUsersJSON",
datatype: "json",
height: 250,
colName: ['Username', 'Email'],
colModel: [
...
}).jqGrid(
'navGrid',
'#pager',
{
edit: true,
add: true,
del: true
});
}
WebMethod
[WebMethod]
public static string GetUsersJSON()
{
var users = new List();
using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
{
users = uasd.GetUserList();
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(users);
}
当前代码
我现在可以正常工作了,但我还有最后一个问题。为什么我必须设置“repeatims: false”才能显示内容?
使其正常工作的一些注意事项包括设置 ajax 请求的不同方法。
(Ajax:类型)是(jqgrid:mtype) (Ajax: contentType) 是 (jqgrid : ajaxGridOptions: { contentType: })
最后从文档中了解如何设置 JSONReader。
希望这对其他人有帮助,并感谢奥列格的所有帮助。
JS
function GetUserDataFromServer()
{
$('#list').jqGrid({
url: "Default.aspx/GetUsersJSON",
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
datatype: "json",
serializeGridData: function (postData)
{
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
id:'0',
cell:'',
repeatitems: false
},
datatype: "json",
height: 250,
colName: ['Username', 'Email'],
colModel: [
{
name: 'Username',
index: 'Username',
width: 100,
editable: true
},
{
name: 'Email',
index: 'Email',
width: 220,
editable: true
},
{
name: 'IsLockedOut',
index: 'IsLockedOut',
width: 100,
editable: true,
edittype: 'checkbox'
}
],
caption: "Users"
})
}
Web 方法
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List GetUsersJSON()
{
using (UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
{
return uasd.GetUserList();
}
}
列表中的一个 JSON 对象
{"__type":"UserAdministrationSandbox.UserData","PKID":"00000000-0000-0000-0000-000000000001","Username":"TestUser","ApplicationName":"Test","Email":"[email protected]","Comment":"TestUser","Password":"D41D8CD98F00B204E9800998ECF8427E","PasswordQuestion":"Is this a blank Password?","PasswordAnswer":null,"IsApproved":true,"LastActivityDate":"\/Date(1298869200000)\/","LastLoginDate":"\/Date(1298869200000)\/","LastPasswordChangedDate":"\/Date(1298869200000)\/","CreationDate":"\/Date(1298869200000)\/","IsOnLine":false,"IsLockedOut":false,"LastLockedOutDate":"\/Date(1298869200000)\/","FailedPasswordAttemptCount":0,"FailedPasswordAttemptWindowStart":null,"FailedPasswordAnswerAttemptCount":null,"FailedPasswordAnswerAttemptWindowStart":null}
I am new to jqGrid and I have found it difficult to follow the documentation jqGrid Documentation
I cannot figure out how to call a WebMethod when setting up the JQGrid. I have been successful in making an Ajax call to get the data and then setting up the JQGrid with local data. I think its an extra step in the setup process and that I should be able to provide the path to the webmethod using the url property.
The editurl property is the same way. I am never actually receiving the post to the server.
Original Code
Attempted JQGrid Setup
function GetData()
{
$('#list').jqGrid({
type: "POST",
url: "Default.aspx/GetUsersJSON",
datatype: "json",
height: 250,
colName: ['Username', 'Email'],
colModel: [
...
}).jqGrid(
'navGrid',
'#pager',
{
edit: true,
add: true,
del: true
});
}
WebMethod
[WebMethod]
public static string GetUsersJSON()
{
var users = new List();
using(UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
{
users = uasd.GetUserList();
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
return serializer.Serialize(users);
}
Current Code
I got it working correctly now, but I still have one final question. Why did I have to set the 'repeatitems: false' in order to display the content?
Some of the caveats to get this to work include the different ways to setup the ajax request.
(Ajax: type) is (jqgrid : mtype)
(Ajax: contentType) is (jqgrid : ajaxGridOptions: { contentType: })
And finally understanding the documentation from the documentation on how to setup the JSONReader.
Hope this helps others and thanks Oleg for all your help.
JS
function GetUserDataFromServer()
{
$('#list').jqGrid({
url: "Default.aspx/GetUsersJSON",
mtype: 'POST',
ajaxGridOptions: { contentType: "application/json" },
datatype: "json",
serializeGridData: function (postData)
{
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
id:'0',
cell:'',
repeatitems: false
},
datatype: "json",
height: 250,
colName: ['Username', 'Email'],
colModel: [
{
name: 'Username',
index: 'Username',
width: 100,
editable: true
},
{
name: 'Email',
index: 'Email',
width: 220,
editable: true
},
{
name: 'IsLockedOut',
index: 'IsLockedOut',
width: 100,
editable: true,
edittype: 'checkbox'
}
],
caption: "Users"
})
}
Web Method
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List GetUsersJSON()
{
using (UserAdministrationSandboxDataContext uasd = new UserAdministrationSandboxDataContext())
{
return uasd.GetUserList();
}
}
One JSON Object from the List
{"__type":"UserAdministrationSandbox.UserData","PKID":"00000000-0000-0000-0000-000000000001","Username":"TestUser","ApplicationName":"Test","Email":"[email protected]","Comment":"TestUser","Password":"D41D8CD98F00B204E9800998ECF8427E","PasswordQuestion":"Is this a blank Password?","PasswordAnswer":null,"IsApproved":true,"LastActivityDate":"\/Date(1298869200000)\/","LastLoginDate":"\/Date(1298869200000)\/","LastPasswordChangedDate":"\/Date(1298869200000)\/","CreationDate":"\/Date(1298869200000)\/","IsOnLine":false,"IsLockedOut":false,"LastLockedOutDate":"\/Date(1298869200000)\/","FailedPasswordAttemptCount":0,"FailedPasswordAttemptWindowStart":null,"FailedPasswordAnswerAttemptCount":null,"FailedPasswordAnswerAttemptWindowStart":null}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
为了让 jqGrid 与 WebMethod 一起工作,我也付出了很多努力。下面给出的是最终的效果。
ASPX
代码隐藏
I also struggled a lot to get jqGrid working with WebMethod. Given below is what worked at the end.
ASPX
Code Behind
首先,我希望答案中的代码示例可以对您有帮助(另请参阅这个答案< /a>)。主要思想是,
如果服务器未设置
rows
、page
、total
和records 参数,只返回数据列表,就像您的情况一样,您可以使用以下
jsonReader
(请参阅 此处 和 此处)。如果您不想实现服务器端数据分页、排序和过滤,我建议您使用
loadonce:true
。而且你的代码有一些问题。第一个是您在 Web 方法中手动调用
JavaScriptSerializer.Serialize
。如果您使用dataType: "json"
,JSON 响应将通过$.ajax
转换为对象。你的情况也是如此。因此,success
处理程序的msg
参数具有d
属性。但msg.d
不是对象,而是又一个 JSON 字符串,您可以使用eval(msg.d)
将其转换为对象。原因是你的方法的结果将再次转换为 JSON。要解决此问题,您应该将 Web 方法
GetUsersJSON
更改为以下内容:然后您可以将前面示例中的
data: eval(msg.d)
更改为data :msg.d
。通常,我们会为 Web 方法使用附加的
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
或[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
属性,但是在很多情况下(似乎也在你的情况下)它是不需要的。使用
ajaxGridOptions
、serializeGridData
和jsonReader
后,jqGrid就可以读取页面数据,但数据必须是JSON格式,而不是JSON格式。两次编码的 JSON 格式。更新:您要求我评论为什么您需要在
jsonReader
中使用repeatitems:false
设置才能读取您的数据。对于理解 jsonReader 的工作原理来说,这是一个很重要的问题,但答案会占据一点位置。一般来说,jqGrid 的 JSON 数据格式化有两种主要方式。它应该是网格行的数据数组。数组的每个项目代表网格中的行,并且该行应该是以下两种主要形式之一:
1)作为具有命名属性的对象,例如
或 2)字符串数组
,例如
jqGrid 映射“true”和“1”在
edittype:'checkbox'
设置的情况下,值为布尔值“true”。您如何理解如果网格有许多复选框列,则使用“1”/“0”格式可以减少传输数据的大小。repeatitems:false
选项意味着 jqGrid 应该扫描 JSON 数据以获取数据的第一个(对象样式)表示形式。repeatitems:true
表示第二个(数组样式)表示形式。顺便说一句,如果您使用对象样式 (
repeatitems:false
),jsonReader
的cell
设置将不使用 并且您可以删除您使用的cell:''
设置。如果网格中有一列具有唯一值,则数字形式的
jsonReader
的id
选项非常实用。选项id:'0'
表示“用户名”列的值将用作行 id。如果您使用 IE 或 Chrome 的开发者工具的 Firebug 检查网格,您将看到相应的元素具有属性
id="TestUser"
(在您的数据)。由于在一个 HTML 页面上不允许出现重复的 id,因此您可以理解,使用正确的唯一 id 定义网格非常重要。如果 jqGrid 在数据中找不到 id 列,它将使用 ids“1”、“2”... 因此,如果您看到网格具有值,您应该在id
中搜索错误jsonReader
的属性。接下来重要的是两种数据表示方式的优缺点:对象样式 (
repeatitems:false
) 和数组样式 (repeatitems:true
)对象样式有在两种主要情况下,
在所有其他情况下,数组样式 (
repeatitems:true
) 与对象样式相比具有优势。主要从那里因此,如果您想减少传输数据的大小并且可以在服务器端进行更改,我建议您使用数组样式(
repeatitems:true
)来表示数据。在这种情况下,可以很好地使用jsonReader
的cell:''
属性。我建议您查看 jqGrid 文档的部分
jsonReader
、xmlReader
和localReader
。First of all I hope the code examples from the answer could help you (see also this answer). The main idea, that you should use following additional jqGrid parameters
If the server not set
rows
,page
,total
andrecords
parameter in the response and just return the list of data like in your case you can use the followingjsonReader
(see here and here). In the case if you don't want implement server side data paging, sorting and filtering I recommend you to use
loadonce:true
.Moreover your code have some problems. The first one is that you call
JavaScriptSerializer.Serialize
manually in your web method. If you usedataType: "json"
the JSON response will be converted to object by$.ajax
. It is so in your case also. Because of that themsg
parameter of thesuccess
handler hasd
property. Butmsg.d
is not the object, but one more JSON string which you convert to object witheval(msg.d)
. The reason is that the results of your method will be converted to JSON one more time.To fix the problem you should change the web method
GetUsersJSON
to the following:then you can place
data: eval(msg.d)
in your previous example todata: msg.d
.Typically one use additional
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
or[ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
attribute for the web method, but in many cases (it seems also in your case) it is not needed.After the usage of
ajaxGridOptions
,serializeGridData
andjsonReader
jqGrid will able to read the page of data, but the data should be in JSON format and not twice encoded JSON format.UPDATED: You ask me to comment why you need to use
repeatitems:false
setting in thejsonReader
to be able to read your data. It is important question for understanding howjsonReader
work, but the answer will take a little place.In general there are two main styles how the JSON data can be formatted for jqGrid. It should be array of data for grid rows. Every item of the array represent the row in grid and the row should be in one from the two main form
1) as an object with named properties like
or 2) an array of strings like
or
jqGrid map both "true" and "1" values to the boolean value "true" in case of
edittype:'checkbox'
setting. How you can understand if the grid has many checkbox-columns the usage of "1"/"0" format can reduce the size of transfered data.The
repeatitems:false
option means that jqGrid should scan JSON data for the first (object style) representation of data. Therepeatitems:true
means the second (array style) representation.By the way if you use the object style (
repeatitems:false
) thecell
setting of thejsonReader
will be not used and you can removecell:''
setting which you use.The
id
option of thejsonReader
in numeric form is practical if you have one column in the grid with unique values. The optionid:'0'
means that the value of the column "Username" will be used as the row id. If you examine the grid with Firebug of Developer tools of IE or Chrome you will see that the corresponding<tr>
element has attributeid="TestUser"
(used in your data). Because duplicate in ids are not allowed on one HTML page, you can understand that it is very important to define grid with correct unique ids. If jqGrid not find id column in the data it will use ids "1", "2", ... So if you see that your grid has the values you should search for the error in theid
property of thejsonReader
.The next important thing is the advantages and disadvantages of two ways of the data representation: object style (
repeatitems:false
) and array style (repeatitems:true
)The object style has advantage in two main cases
In all other situations the array style (
repeatitems:true
) has advantages compared with the object style. The main from thereSo if you want to reduce the size of transfered data and you can make changes on the server side I would recommend you to use array style (
repeatitems:true
) of representation of data. In the case thecell:''
property of thejsonReader
can be good used.I recommend you to look though the part of jqGrid documentation about
jsonReader
,xmlReader
andlocalReader
.