使用 ASP.Net 和 JSON 格式实现 jQuery 的 jgGrid
Posted
技术标签:
【中文标题】使用 ASP.Net 和 JSON 格式实现 jQuery 的 jgGrid【英文标题】：Implementing jQuery's jgGrid with ASP.Net and JSON formatting 【发布时间】：2010-09-15 21:54:16 【问题描述】：有没有人能够实现 JQuery 网格插件 jqGrid？我正在尝试实现 JSON 分页，我觉得我已经接近了，但我也被无关紧要的细节所淹没。如果有人可以发布一些示例代码，我将不胜感激。
【问题讨论】：
【参考方案1】：在我尝试为我的项目执行此操作时发现了您的帖子。我让它工作了。对于将来需要它的任何人，jqGrid 将无法使用 JSON 和 ASP.NET 开箱即用。您需要对 grid.base.js 进行一些小修改。在第 829 行附近，将 json case 部分替换为以下内容：
case "json":
gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
$.ajax( url: ts.p.url,
type: ts.p.mtype,
dataType: "json",
contentType: "application/json; charset=utf-8", //required by ASP.NET
data: gdata,
complete: function(JSON, st) if (st == "success") addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) loadComplete(); ,
error: function(xhr, st, err) if (loadError) loadError(xhr, st, err); endReq(); ,
beforeSend: function(xhr) if (loadBeforeSend) loadBeforeSend(xhr); );
if (ts.p.loadonce || ts.p.treeGrid) ts.p.datatype = "local";
break;
然后添加如下函数：
function cleanUp(responseText)
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
您还需要包含JSON parser and stringifier。除了使用 ASP.NET，修改后的代码也是 more secure，因为 eval 语句已经消失了。
编辑：我还应该注意到，您可能需要对 grid.celledit.js、grid.formedit.js、grid.inlinedit.js 和 grid.subgrid.js 进行类似的编辑.
【讨论】：
从 jqGrid 3.4 开始，这些 hack 还需要吗？【参考方案2】：我刚刚使用 jTemplates 使用 jQuery 和 ASP.NET 进行客户端分页。我写了一篇关于它的博文，你可以在这里找到：http://www.aaron-powell.com/blog.aspx?id=1209
它着眼于如何创建模板化数据位置，从 ASP.NET 返回数据，然后实现分页解决方案。
【讨论】：
【参考方案3】：您可以使用 ASP.Net MVC JsonResult 来填充网格。
人物类
public class Person
public int ID get; set;
public string Name get; set;
public DateTime Birthday get; set;
public static IEnumerable<Person> GetABunchOfPeople()
// Get a bunch of People.
在您的控制器中，您将拥有：
public JsonResult GetABunchOfPeopleAsJson()
var rows = (Person.GetABunchOfPeople()
.Select(c => new
id = c.ID,
cell = new[]
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
)).ToArray();
return new JsonResult
Data = new
page = 1,
records = rows.Length,
rows,
total = 1
;
而 url 的 jqGrid 配置将是：
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
【讨论】：
【参考方案4】：我只是挣扎着试图把所有东西放在一起。我首先关心的是生成正确的 JSON 响应。我返回的类似乎被序列化为名为“d”的属性 - 这是 JQuery 的事情，还是 ASP.Net Web 方法约定？恐怕 jqGrid 会寻找***数据，而 asp.net 会将它放在一个名为“d”的属性中：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetData()
TestClass tc = new TestClass() One = "Hello", Two = "World" ;
return tc;
$("#divResults").click(function()
$.ajax(
type: "POST",
url: "GridData_bak.aspx/GetData",
data: "",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(test)
// Replace the div's content with the page method's return.
$("#divResults").text(test.d.One);
,
error: function(msg)
$("#divResults").text(msg);
);
);
【讨论】：
【参考方案5】：flexgrid 插件在文档上非常稀疏，但是在演示页面的一小部分中，有一个关于创建 json 序列化对象的 tut，这有点误导，因为网格需要特定格式，我已经移植了 php 代码对于带有一点猴子油脂的 xml 选项，您可以对 json 格式执行相同的操作
这是我的 xml 端口
the setup for the grid
$("#tableToFlex").flexigrid(
url: 'WebService.asmx/getData'
... *other configs* ...);
请考虑 webservice.asmx 类中的以下代码
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
ByVal qtype As String, _
ByVal Query As String, _
ByVal rp As Integer, _
ByVal sortname As String, _
ByVal sortorder As String) As System.Xml.XmlDocument
'note these parameters are inputted to determine paging and constrains for the resultant rows
'Sample list to send to the grid
Dim list = New List(Of ApplicationStateInformation)
'Sample row object that holds name , surname , address, idnumber ...
list.Add(New RowObjects( "test1", "test1", "test1", "12345"))
list.Add(New RowObjects( "test2", "test2", "test2", "12345"))
list.Add(New RowObjects( "test3", "test3", "test3", "12345"))
list.Add(New RowObjects( "test4", "test4", "test4", "12345"))
'retun a xml doc, as we are using the xml format on the flexgrid
Dim returnDoc = New System.Xml.XmlDocument()
returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
Return returnDoc
End Function
Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
'this is the xml document format the grid understands
Dim result As String = "<?xml version=""1.0"" encoding=""utf-8""?>" & vbCrLf
result += "<rows>" & vbCrLf
result += String.Format("<page>0</page>" & vbCrLf, "1")
result += String.Format("<total>0</total>" & vbCrLf, "10")
For Each item In list
result += ConvertRowData(item)
Next
result += "</rows>" & vbCrLf
Return result
End Function
Private Function ConvertRowData(ByVal row As RowObjects) As String
Dim result As String = String.Format("<row id='0'>" & vbCrLf, row.IdNumber.ToString)
'THESE SHOULD BE html ENCODED (the format arg) but I left it out
result += String.Format("<cell><![CDATA[0]]></cell>" & vbCrLf, row.Name)
result += String.Format("<cell><![CDATA[0]]></cell>" & vbCrLf, row.Surname)
result += String.Format("<cell><![CDATA[0]]></cell>" & vbCrLf, row.IdNumber)
result += "</row>" & vbCrLf
Return result
End Function
【讨论】：
【参考方案6】：json 中的 d 是针对潜在漏洞的内置防御
example我发现用了mvc
完整信息here
【讨论】：
【参考方案7】：我认为你可以让 jqgrid 与 json & asp.net 一起工作，而无需修改 grid.base.js 和其他 jqgrid 文件，你必须使用 datatype 属性来定义你自己的自定义 ajax 调用并定义一个 json 阅读器，jqgrid 将然后在每次重新加载网格时使用您的自定义 ajax 调用和阅读器。
xml 的过程与此类似，您只需定义一个 xmlreader 而不是 jsonreader。
jsonreader的所有属性都定义在online documentation中
有关自定义数据类型的示例，请参阅 live demo page 中“3.3 中的新功能”下的“作为数据类型的函数”
【讨论】：
好点。如果您只是检索数据，那是可行的。不幸的是，jqGrid 中的编辑功能不允许自定义 Ajax，除非您在 jqGrid 代码中进行更改，至少据我所知。【参考方案8】：我的工具：
数据："'page':'" + gdata.page + "','rows':'" + gdata.rows + "','sidx':'" + gdata.sidx + "',' sord':'" + gdata.sord + "','nd':'" + gdata.nd + "','_search':'" + gdata._search + "','searchField':'" + ts. p.searchdata.searchField + "','searchString':'" + ts.p.searchdata.searchString + "','searchOper':'" + ts.p.searchdata.searchOper + "'",
成功：函数（JSON，st） if (st == "success") addJSONData(JSON.d, ts.grid.bDiv);如果（加载完成）加载完成（）；
Insted 使用完整的 ajax 事件使用成功事件。这样可以防止双重json序列化。
我在单元格编辑中没有意识到的一件事： 假设我想编辑具有相同数据类型（int）的多个单元格。 我只有一种网络方法！而且我不能使用具有不同名称的相同数据类型超载！ 有人解决这种问题吗？
【讨论】：
以上是关于使用 ASP.Net 和 JSON 格式实现 jQuery 的 jgGrid的主要内容，如果未能解决你的问题，请参考以下文章
在 ASP.Net (Visual Studio 2013) 中以结构格式解析 Json 数据
ASP.NET 使用 System.Web.Script.Serialization 解析 JSON （转）