如何在后端使用ASP.NET + JSON使jqGrid工作？

好的，我回来了。 我完全将我的问题简化为三个简单的字段，并且仍然使用addJSONData方法停留在同一行。 我已经坚持了几天，无论我如何重写ajax调用，json字符串，等等等等……我无法让它工作！ 在手动添加一行数据时，我甚至无法将其作为函数工作。 任何人都可以发布一个与ASP.NET和JSON一起使用的jqGrid的工作示例吗？ 请你包含2-3个字段（字符串，整数和日期最好？）我很乐意看到jqGrid的工作示例，只是使用addJSONData方法手动添加JSON对象。 非常感谢！！ 如果我得到了这个工作，我将发布一个完整的代码示例，用于所有其他发布以获得ASP.NET的帮助，JSON用户也坚持这一点。 再次。 谢谢！！

tbl.addJSONData（objGridData）; //错误：tbl.addJSONData不是函数!!

以下是Firebug在收到此消息时显示的内容：

•objGridData对象总数= 1页= 1条记录= 5行= [5]
○页面“1”
记录“5”
总计“1”
行[对象ID = 1 PartnerID = BCN，对象ID = 2 PartnerID = BCN，对象ID = 3 PartnerID = BCN，2更多… 0 =对象1 =对象2 =对象3 =对象4 =对象]
（索引）0
（prop）ID（值）1（prop）PartnerID（值）“BCN”（prop）DateTimeInserted（value）2008年5月29日星期二12:08:45 GMT-0700（太平洋夏令时）
*还有三行

这是变量tbl（value）’Table.scroll’的值

 
ID 
 
PartnerID 
 
DateTimeInserted  

这是完整的function：

  $('table.scroll').jqGrid({ datatype: function(postdata) { mtype: "POST", $.ajax({ url: 'EDI.asmx/GetTestJSONString', type: "POST", contentType: "application/json; charset=utf-8", data: "{}", dataType: "text", //not json . let me try to parse success: function(msg, st) { if (st == "success") { var gridData; //strip of "d:" notation var result = JSON.parse(msg); for (var property in result) { gridData = result[property]; break; } var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure var tbl = jQuery('table.scroll')[0]; alert(objGridData.rows[0].PartnerID); //displays the correct data //tbl.addJSONData(objGridData); //error received: addJSONData not a function //error received: addJSONData not a function (This uses eval as shown in the documentation) //tbl.addJSONData(eval("(" + objGridData + ")")); //the line below evaluates fine, creating an object and visible data and structure //var objGridData = eval("(" + gridData + ")"); //BUT, the same thing will not work here //tbl.addJSONData(eval("(" + gridData + ")")); //FIREBUG SHOWS THIS AS THE VALUE OF gridData: // "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}" } } }); }, jsonReader: { root: "rows", //arry containing actual data page: "page", //current page total: "total", //total pages for the query records: "records", //total number of records repeatitems: false, id: "ID" //index of the column with the PK in it }, colNames: [ 'ID', 'PartnerID', 'DateTimeInserted' ], colModel: [ { name: 'ID', index: 'ID', width: 55 }, { name: 'PartnerID', index: 'PartnerID', width: 90 }, { name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}], rowNum: 10, rowList: [10, 20, 30], imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images', pager: jQuery('#pager'), sortname: 'ID', viewrecords: true, sortorder: "desc", caption: "TEST Example")}; 

Answer 1

这是一个简单的例子……

您需要https://github.com/douglascrockford/JSON-js/blob/master/json2.js才能使用…

当然还有通常的jquery文件。

将其粘贴到Web服务

 // The lower case properties here are required to be lower case // I cant find a way to rename them when they are serialized to JSON // XmlElement("yournamehere") does not work for JSON :( public class JQGrid { public class Row { public int id { get; set; } public List cell { get; set; } public Row() { cell = new List(); } } public int page { get; set; } public int total { get; set; } public int records { get; set; } public List rows { get; set; } public JQGrid() { rows = new List(); } } [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] public class MyWebService : System.Web.Services.WebService { [WebMethod(EnableSession = true)] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection) { DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize); if (ds == null || ds.Tables.Count < 1) throw new Exception("Unable to retrieve data."); JQGrid jqGrid = new JQGrid(); int i = 1; foreach (DataRow dataRow in ds.Tables[0].Rows) { JQGrid.Row row = new JQGrid.Row(); row.id = Convert.ToInt32(dataRow["MyIdColumn"]); row.cell.Add(dataRow["MyIdColumn"].ToString()); row.cell.Add(dataRow["MyColumn"].ToString()); projectGrid.rows.Add(row); } jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample jqGrid.records = jqGrid.rows.Count; jqGrid.total = jqGrid.rows.Count; // Set this to total pages in your result... return jqGrid; } } 

将其粘贴到您的aspx页面

Answer 2

通常当你用jqGrid得到’blah not a function’错误时，因为没有加载正确的模块。 addJSONData函数在grid.base.js文件中定义。 你能检查jquery.jqGrid.js文件中的jqGridInclude（）函数，并确保grid.base.js作为模块变量初始化的一部分包含在内吗？

Answer 3

你validation了tbl变量是否正在引用你的jqgrid实例？

尝试向表元素添加一个id并获取对jqgrid的引用，如：

 var thegrid = jQuery("#mytableid")[0]; 

Answer 4

好吧，我在这里看到一件事：

 var tbl = jQuery('table.scroll')[0]; //tbl.addJSONData(objGridData); //error received: addJSONData not a function 

如果您确实想知道为什么会出现此错误，那是因为tbl没有该function。

编辑：我很好奇，并检查jqGrid是否将这些方法添加到DOM引用对象。 他们做到了。 （我在这里使用firebug进行了检查： http ： //trirand.com/jqgrid/jqgrid.html ）。

这里可能发生的一件事是你有多个类’scroll’的表，你的jquery返回错误的表。

Answer 5

也许在这里的代码中有一些帮助发布在堆栈溢出？ jqgrid与asp.net webmethod和json一起使用排序，分页，搜索和LINQ – 但需要动态运算符

Answer 6

由于我们对ASP.NET WebForms和jqGrid提出了很多问题，因此我们决定采用“组件”方式并实现与asp：GridView非常相似的东西。 这样，您可以使用熟悉的ASP.NET页面生命周期，事件，数据源等来控制jqGrid。

您可以在此处在线查看此测试版 – 目前有超过30个样本：

http://www.trirand.net/demo.aspx

如果对此感兴趣，它很可能会成长为商业产品（开源许可证将可用）。 同时，您可以使用Reflector检查参考源（直到我们找到一种在线提供源的方法）。 我们使用SVN for ASP.NET而不是js Core的gitHub，所以我们在这个方向上有一些工作。

我们希望这有助于社区。

Rumen Stankov Trirand

Answer 7

这是一个非常古老的问题，但是，最近我遇到了同样的问题。 我发布了如何在我试图开始的新博客上实现这一目标。

可能有更简洁的方法，但这对我有用。 到目前为止，我已经能够相当容易地从这个例子中扩展。 我的下一个障碍是让loadonce工作。

你可以在这里找到我的例子：

http://programming.webdad3.com/?p=3

Answer 8

WebForm正在消亡，所以我们需要关注像asp.net MVC这样的最新技术。 我在这里找到了一个新的asp.net jQGrid集成http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html