代码之家 › 专栏 › 技术社区 › wprl

如何将jqgrid与c/asp.net和json.net结合使用(不使用ajax.net内容)?

json.net jqgrid jquery-plugins asp.net c#

wprl · 技术社区 · 15 年前

好吧,我已经研究了几天了,不太确定我做错了什么。如果有人有使用jqgrid和c/asp.net以及开源工具的工作示例,请告诉我在哪里可以找到它们。对于找到可以用来调试它的合适文档或工具的任何提示,我也非常感激(我对JS/jQuery还很陌生)。基本上,我只需要就地编辑功能,所以如果我忽略了另一个明显的解决方案,那么了解…我希望尽可能避免使用Ajax.net。

我觉得我只是忽略了一些非常明显的事情。

在下面的示例中,我确实得到了要显示的jqgrid,但它没有显示任何数据。

以下是相关的javascript:

jQuery(document).ready(function(){ 
    jQuery("#role_assignment_table").jqGrid({ 
        url:'http://localhost:4034/WebSite2/PageItemHandler.asmx/GetPageItemRolesJson?id=3',
        mtype: 'GET',
        contentType: "application/json; charset=utf-8",
        datatype: "jsonstring",
        colModel:[
            {name:'Id', label:'ID', jsonmap:'Id'},
            {name:'Title', jsonmap:'Title'},
            {name:'AssignedTo', label:'Assigned To', jsonmap:'AssignedTo'},
            {name:'Assigned', jsonmap:'Assigned'},
            {name:'Due', jsonmap:'Due'},
            {name:'Completed', jsonmap:'Completed'}
        ],
        jsonReader: {
            page: "Page",
            total: "Total",
            records: "Records",
            root: "Rows",
            repeatitems: false,
            id: "Id"
        },
        rowNum:10,
        rowList:[10,20,30],
        imgpath: 'js/themes/basic/images',
        viewrecords: false,
        caption: "Role Assignments" 
    });  
});

HTML:

<table id="role_assignment_table" class="scroll" cellpadding="0" cellspacing="0" />

生成的JSON: 我不确定它是否到达了jqgrid,或者jqgrid是否不喜欢我的json或webmethod,但是当我找到合适的URL并获得json结果字符串时,我可以自己调用它。

{"Page":"1","Total":1.0,"Records":"4",
"Rows":[
{"Id":1,"Item":null,"Title":"Story Manager","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":2,"Item":null,"Title":"Analysis","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":3,"Item":null,"Title":"Narrative","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"},
{"Id":4,"Item":null,"Title":"Graphic","AssignedTo":null,"Assigned":"\/Date(1245186733940-0500)\/","Due":"\/Date(1248383533940-0500)\/","Completed":"\/Date(1247087533940-0500)\/"}
]
}

干杯, 威廉·莱利·兰德

5 回复 | 直到 12 年前

Daniel Earwicker 15 年前

在执行任何其他操作之前,请下载并安装:

http://www.fiddler2.com/fiddler2/

它将让您准确地看到jqgrid请求所请求和发送的内容,以获取JSON数据。

我有一些用于工作的jqgrid的代码,这里有一些不同的地方:

datatype: "json"

而不是你的:

datatype: "jsonstring"

我还有一个叫 colNames 它是包含列名的字符串数组。

最后,我有一个 pager 字段,标识将存储分页控件的元素,它是一个DIV。

dev 15 年前

在ASP.NET中,日期被序列化为JSON "/Date(ticks)/" 无法用jqgrid解释。可能的解决方案( post ):

为网格编写自定义格式化程序
更改我们发送到网格的数据(通过将格式化的日期作为字符串发送)

请说明如何使用jqgrid实现日期显示?

谢谢您。

Darryl Hebbes 14 年前

注意区分大小写的属性 数据类型 命中注定 数据库类型 大写字母 T .

takrl cck 13 年前

我也有同样的问题!我提出的解决方案是创建一个自定义的javascript格式化程序:

$(this).jqGrid({  
   ...
   colModel: [
      {
      name: 'SomeDate', index: 'SomeDate', width: 100, formatter: ndateFormatter }
      }],
   ...
});


// Convert C# json Date.
function ndateFormatter(cellval, opts, rwdat, _act) {
    var time = cellval.replace(/\/Date\(([0-9]*)\)\//, '$1');
    var date = new Date();
    date.setTime(time);
    return date.toDateString();
}

Community Lee Campbell 7 年前

如果您在让jqgrid使用ASP.NET时遇到问题,请查看 here . 这会节省你很多时间。