实现jQuery'；带有ASP.Net和JSON格式的jgGrid

有人能够实现JQuery网格插件jqGrid吗？我正在尝试实现JSON分页，我觉得我已经接近了，但是我也被一些无关紧要的细节淹没了。如果有人能发布一些示例代码，我将不胜感激。

我正挣扎着试图将所有内容整合起来。我首先关心的是生成正确的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);
                }
            });
        });

---

flexgrid插件在dourement上非常稀少，但是在演示页面的一小部分中，有一个关于创建json序列化对象的tut，这有点误导，因为网格需要特定的格式，我已经移植了php代码for 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

_
_
公共函数getData（ByVal页为整数_
ByVal qtype作为字符串_
ByVal查询作为字符串_
ByVal rp作为整数_
ByVal sortname作为字符串_
ByVal排序器（作为字符串）作为System.Xml.XmlDocument
'注意，输入这些参数是为了确定结果行的分页和约束
'要发送到网格的示例列表
Dim list=新列表（应用程序状态信息）
'保存名称、姓氏、地址、idnumber的示例行对象。。。
添加（新的行对象（“test1”、“test1”、“test1”、“12345”））
添加（新的行对象（“test2”、“test2”、“test2”、“12345”））
添加（新的行对象（“test3”、“test3”、“test3”、“12345”））
添加（新的行对象（“test4”、“test4”、“test4”、“12345”））
'重新运行xml文档，因为我们在flexgrid上使用xml格式
Dim returnDoc=New System.Xml.XmlDocument（）
returnDoc.Load（新IO.StringReader（ToXmlResult（列表）））
退货单
端函数
私有函数ToXmlResult（ByVal list As list（RowObjects的列表））作为字符串
'这是网格理解的xml文档格式
将结果变暗为字符串=”“&vbCrLf
结果+=“”&vbCrLf
result+=String.Format（“{0}”和vbCrLf，“1”）
result+=String.Format（“{0}”和vbCrLf，“10”）
对于列表中的每个项目
结果+=ConvertRowData（项目）
下一个
结果+=“”&vbCrLf
返回结果
端函数
私有函数ConvertRowData（ByVal行作为RowObjects）作为字符串
Dim结果为String=String.Format（“&vbCrLf，row.IdNumber.ToString）
'这些应该是HTML编码的（格式为arg），但我忽略了它
结果+=String.Format（“&vbCrLf，row.Name）
结果+=String.Format（“&vbCrLf，行.姓氏）
结果+=String.Format（“&vbCrLf，row.IdNumber）
结果+=“”&vbCrLf
返回结果
端函数

json中的d是针对潜在漏洞的内置防御

我发现它使用mvc

---

完整信息

在我尝试为我的项目执行此操作时找到了您的帖子。我让它工作了。对于任何将来需要它的人来说，jqGrid不会与JSON和ASP.NET一起开箱即用。您需要对grid.base.js进行一些小的修改。在第829行附近，将json案例部分替换为以下内容：

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
}

您还需要包括。除了使用ASP.NET之外，这段修改后的代码也是因为eval语句不存在了

---

编辑：我还应该注意到，您可能需要对grid.celledit.js、grid.formedit.js、grid.inlinedit.js和grid.subgrid.js进行类似的编辑。

我刚刚找到了使用jQuery和ASP.NET进行客户端分页的模板。我写了一篇博客文章，你可以在这里找到：

---

它介绍了如何创建模板数据位置，从ASP.NET返回数据，然后实现分页解决方案。

我认为您可以使用json和ASP.NET使jqgrid工作，而无需修改grid.base.js和其他jqgrid文件，您必须使用datatype属性定义您自己的自定义ajax调用并定义json读取器，然后，jqgrid将在每次重新加载网格时使用自定义ajax调用和读卡器

这个过程与xml类似，您只需定义一个xmlreader而不是jsonreader

jsonreader的所有属性都在

有关自定义数据类型的示例，请参见“新版本3.3”下的“函数作为数据类型”：

数据：“{'page'：'“+gdata.page+”，'rows'：'“+gdata.rows+”，'sidx'：'“+gdata.sidx+”，'sord'：'“+gdata.sord+”，'nd'：“+gdata.nd+”，'u search'：“+gdata.\u search+”，'searchField'：“+ts.p.searchdata.searchField+”，'searchString:“+ts.p.searchdata.searchString+”，'searchOper'，'searchOper:“+searchdata”

成功：函数（JSON，st）{ if（st==“success”）{addJSONData（JSON.d，ts.grid.bDiv）；if（loadComplete）{loadComplete（）；}

使用完整的ajax事件代替使用成功事件。这种方法是防止双重json序列化

只有一件事我在单元格编辑中没有意识到： 假设我想要编辑具有相同数据类型（int）的多个单元格。 我只有一个web方法！我不能用不同的名称加载相同的数据类型！

---

有人解决了这种问题吗？

您可以使用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.
    }
}

url的jqGrid配置为：

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',

url:“”，

这一点很好。如果您只是在检索数据，那就行了。不幸的是，jqGrid中的编辑功能不允许自定义Ajax，除非您在jqGrid代码中进行了更改，至少据我所知。从jqGrid 3.4开始，这些黑客攻击仍然是必要的吗？

url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',