我正在尝试使用MVC4 WebApi创建一个jqGrid。我查看了各种示例，最后使用此link作为参考。 问题是网格没有填充数据，但它正在达到服务器的GET方法（保留断点在那里进行测试）。我在本地IIS上托管了我的应用程序。下面是jqgrid页面（index.htm）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link href="../Content/jquery.jqGrid/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<style>
html, body {
font-size: 75%;
}
</style>
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
<script src="../Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var API_URL = "/WebApiOne/api/task/";
jQuery("#gridMain").jqGrid({
url: API_URL,
data : API_URL,
datatype: 'json',
contentType: "application/json; charset=UTF-8",
mtype: 'GET',
pager: '#pagernav',
sortable: true,
height: 200,
viewrecords: true,
colNames: ['TaskID', 'ProjectID', 'ProjectName', 'TaskName', 'TaskStatus'],
colModel: [{ name: 'TaskID', index: 'TaskID', width: 40, sorttype: "int" },
{ name: 'ProjectID', index: 'ProjectID', editable: true, edittype: 'int', width: 70 },
{ name: 'ProjectName', index: 'ProjectName', editable: true, edittype: 'text', width: 70 },
{ name: 'TaskName', index: 'TaskName', editable: true, edittype: 'text', width: 50, align: "right" },
{ name: 'TaskStatus', index: 'TaskStatus', editable: true, edittype: 'text', width: 50, align: "right"}
],
caption: "CRUD With ASP.NET Web API",
autowidth: true
});
});
</script>
</head>
<body>
<table id="gridMain">
</table>
<div id="pagernav">
</div>
</body>
</html>
这是我的服务器端代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace WebApiOne.Controllers
{
public class Task
{
public int TaskID { get; set; }
public int ProjectID { get; set; }
public string ProjectName { get; set; }
public string TaskName { get; set; }
public string TaskStatus { get; set; }
}
public class TaskController : ApiController
{
// GET api/task
public IEnumerable<Task> Get()
{
Task[] tasks = new Task[2];
tasks[0] = new Task()
{
TaskID = 1,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "FirstPage Development",
TaskStatus = "InProgress"
};
tasks[1] = new Task()
{
TaskID = 2,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "Second Page Development",
TaskStatus = "Yet To Start"
};
return tasks;
}
// GET api/task/5
public string Get(int id)
{
return "value";
}
// POST api/task
public void Post([FromBody]string value)
{
}
// PUT api/task/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/task/5
public void Delete(int id)
{
}
}
}
但是当我浏览localhost / WebApiOne / api / task /时，我以json格式获取原始数据：[{"TaskID":1,"ProjectID":1,"ProjectName":"ProjectOne","TaskName":"FirstPage Development","TaskStatus":"InProgress"},{"TaskID":2,"ProjectID":1,"ProjectName":"ProjectOne","TaskName":"Second Page Development","TaskStatus":"Yet To Start"}]
它证明服务器功能正常，我在前端缺少一些东西。
答案 0 :(得分：1)
我建议你不要使用旧版本的jqGrid ，就像2.5年前发布的版本4.4.4一样。我建议你使用free jqGrid的当前版本（4.9.2）。如果您使用prefer来使用NuGet，那么您可以使用Install-Package free-jqGrid来安装当前版本的免费jqGrid（请参阅here）。有关其他信息，请参阅the wiki和自述每个已发布的版本。
可以独立于jqGrid版本使用某些更改：
data : API_URL。，则应删除datatype: 'json'
contentType是jQuery.ajax的选项。如果您需要在jqGrid中进行设置，则应使用ajaxGridOptions: {contentType: "application/json; charset=UTF-8"}。jsonReader格式中添加jsonReader: {repeatitems: false, root: function (obj) { return obj; }}。如果您使用免费的jqGrid，那么它将自动检测您当前的JSON响应的结构，并且不需要jsonReader。loadonce: true选项。您应该返回所有数据，然后jqGrid将在客户端进行排序，分页和过滤。gridview: true以提高性能。免费的jqGrid使用默认选项。height: "auto"代替height: 200，但最佳选择取决于您的具体要求。autoencode: true选项。index删除不需要的colModel属性，并使用默认值（edittype: 'text'）删除值。key: true属性添加到TaskID列。输入数据必须包含有关rowid的信息。特别是为了能够编辑数据，您应该使用正确的rowid值。<div id="pagernav"></div>并将pager: '#pagernav'替换为pager: true选项。免费的jqGrid可以自动为寻呼机创建所需的<div>。更新：可以将服务器代码修改为以下内容，例如：
using System.Collections.Generic;
using System.Web.Http;
namespace WebApiOne.Controllers
{
public class Task
{
public int TaskID { get; set; }
public int ProjectID { get; set; }
public string ProjectName { get; set; }
public string TaskName { get; set; }
public string TaskStatus { get; set; }
}
public class TaskController : ApiController
{
// GET api/task
public IEnumerable<Task> Get() {
Task[] tasks = {
new Task {
TaskID = 1,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "FirstPage Development",
TaskStatus = "InProgress"
},
new Task {
TaskID = 2,
ProjectID = 1,
ProjectName = "ProjectOne",
TaskName = "Second Page Development",
TaskStatus = "Yet To Start"
}
};
return tasks;
}
// GET api/task/5
public string Get(int id)
{
return "value";
}
// POST api/task
public void Post ([FromBody]Task task)
{
//perform new Row Add to DB
// task.TaskID will be 0 here
}
// PUT api/task/5
public void Put (int id, [FromBody]Task task)
{
//perform Db Update
// task.TaskID and id are identical
}
// DELETE api/task/5
public void Delete (int id)
{
// Delete row in DB.
}
}
}
客户端代码可以是
$(document).ready(function() {
"use strict";
var apiUrl = "/WebApiOne/api/task/";
jQuery("#gridMain").jqGrid({
url: apiUrl,
editurl: apiUrl,
datatype: "json",
gridview: true,
height: "auto",
iconSet: "fontAwesome",
autoencode: true,
sortable: true,
viewrecords: true,
loadonce: true,
prmNames: { id: "TaskID" },
colNames: ["TaskID", "ProjectID", "ProjectName", "TaskName", "TaskStatus"],
colModel: [
{ name: "TaskID", width: 60, key: true, editable: false, sorttype: "int" },
{ name: "ProjectID", width: 90 },
{ name: "ProjectName", width: 190 },
{ name: "TaskName", width: 170, align: "right" },
{ name: "TaskStatus", width: 170, align: "right" }
],
cmTemplate: { editable: true },
//autowidth: true,
formEditing: {
width: 400,
reloadGridOptions: { fromServer: true },
serializeEditData: function (postdata) {
var copyOfPostdata = $.extend({}, postdata);
if (postdata.TaskID === "_empty") { // ADD operation
postdata.TaskID = 0; // to be easy to deserialize
}
delete copyOfPostdata.oper; // remove unneeded oper parameter
return copyOfPostdata;
}
},
formDeleting: {
mtype: "DELETE",
reloadGridOptions: { fromServer: true },
serializeDelData: function () {
return ""; // don't send and body for the HTTP DELETE
},
onclickSubmit: function (options, postdata) {
//var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
//p.datatype = "json";
options.url = apiUrl + encodeURIComponent(postdata[0]);
}
},
pager: true
}).jqGrid("navGrid", {}, {
mtype: "PUT",
onclickSubmit: function (options, postdata) {
//var p = $(this).jqGrid("getGridParam"); // get reference to internal parameters
//p.datatype = "json"; // reset datatype to reload from the server
options.url = apiUrl + encodeURIComponent(postdata[this.id + "_id"]);
}
}).jqGrid("filterToolbar") // add searching toolbar for local sorting (bacsue of loadonce:true) in the grid
.jqGrid("gridResize");
});
上述代码使用free jqGrid和Font Awesome。您可以从here加载相应的演示项目。您应该在服务器代码中设置断点，并使用Fiddler查看所有请求是否按预期工作。服务器代码应该在原因数据库中实现删除/编辑/添加。重要的是要了解该演示基于您的原始代码，并且它不会修改数据库中的任何数据。编辑完成后，将从服务器重新加载数据，以确保在分配添加后使用最后一个数据和服务器端ID。由于数据不会保存在数据库中或在服务器上修改，因此数据在加载后将在网格中显示不变。这意味着只需要扩展服务器代码以支持数据修改。我只想说明如何配置客户端部分（jqGrid）以向服务器发送正确的请求。
答案 1 :(得分：0)
在jqGrid定义中添加以下代码
boardModel