JqGrid无法正常工作，在UI上返回json数据 [英] JqGrid not working,return json data on UI
本文介绍了JqGrid无法正常工作，在UI上返回json数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的扩展控制器
This is my Extension Controller
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult LoadData()
{
MvcBasicSiteEntities1 _db = new MvcBasicSiteEntities1();
{
var users = new List<User>();
var userList = _db.Users.ToList();
var data = userList.ToArray();
var result = new
{
rows=(from item in data
select new
{
ID = item.ID,
Username = item.Username,
Password = item.Password,
Role = item.Role,
Email = item.Email
}).ToArray()
};
return Json(result, JsonRequestBehavior.AllowGet);
}
}
这是我的索引视图
This is my index view
<head>
<link href="~/Cont/dd.css" rel="stylesheet" />
<link href="~/Cont/Site.css" rel="stylesheet" />
<link href="~/Cont/ui.jqgrid.css" rel="stylesheet" />
</head>
<table id="_extensionLogGrid" cellpadding="0" cellspacing="0">
</table>
<div id="_extensionLogPager" style="text-align: center;">
</div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("_extensionLogGrid").jqGrid({
onload: location.href = '@Url.Action("LoadData", "Extension")',
datatype: 'json',
colNames: ['Id', 'UserName', 'Password', 'Email', 'Role', 'AddressId'],
colModel: [
{ name: '_id', index: '_id', width: 300 },
{ name: 'UserName', index: 'Username', width: 300 },
{ name: 'Password', index: 'Password', width: 150 },
{ name: 'Email', index: 'Email', width: 150 },
{ name: 'Role', index: 'Role', width: 120 },
{ name: 'AddressId', index: 'AddressId', width: 70 }
],
pager: jQuery('#_extensionLogPager'),
sortname: 'ID',
rowNum: 10,
rowList: [10, 20, 50, 100],
sortorder: "desc",
width: 790,
height: 464,
caption: 'Users',
viewrecords: true,
mtype: 'GET',
loadonce: true
});
})
</script>
我在Bundle.config文件中添加了jqGrid脚本文件。
运行后显示如下
I added jqGrid script file in Bundle.config file.
After run it displayed like this
{"rows":[{"ID":1,"Username":"Administrator","Password":"tm77dac","Role":1,"Email":"admin@yahoo.com"},{"ID":3,"Username":"Ana","Password":"ana","Role":2,"Email":"ana@yahoo.com"},{"ID":4,"Username":"Ion","Password":"ion","Role":2,"Email":"ion@yahoo.com"},{"ID":5,"Username":"Vasile","Password":"vasile","Role":2,"Email":"vasile@basicsite.ro"},{"ID":6,"Username":"vanmala","Password":"vanmala","Role":1,"Email":"vanmala@basicsite.com"}]}
这有什么问题。
what is wrong with this.
推荐答案
（document）.ready（function（）{
debugger;
(document).ready(function () { debugger;
（ _ extensionLogGrid）。jqGrid（{
onload：location.href = ' @ Url.Action（LoadData，Extension）'，
数据类型：' json'，
colNames：[' Id'，' UserName'，' 密码'，' 电子邮件'，' Role'，' AddressId']，
colModel：[
{name：' _ id' ，index：' _ id' ，width： 300 }，
{name：' UserName'，index：' 用户名'，宽度： 300 }，
{名称：' 密码' ，index：' 密码'，宽度： 150 }，
{name：' Email'，index：' 电子邮件'，宽度： 150 }，
{name：' Role'，index：' 角色'，宽度： 120 }，
{名称：' AddressId'，索引：' AddressId'，width： 70 }
]，
pager：jQuery（' #_ extensionLogPager'），
sortname：' ID'，
rowNum： 10 ，
rowList：[ 10 ， 20 ， 50 ， 100 ]，
sortorder： desc，
宽度： 790 ，
height ： 464 ，
标题：' 用户，
viewrecords： true ，
mtype：' GET'，
loadonce： true
}）;
}）
< / script >
("_extensionLogGrid").jqGrid({ onload: location.href = '@Url.Action("LoadData", "Extension")', datatype: 'json', colNames: ['Id', 'UserName', 'Password', 'Email', 'Role', 'AddressId'], colModel: [ { name: '_id', index: '_id', width: 300 }, { name: 'UserName', index: 'Username', width: 300 }, { name: 'Password', index: 'Password', width: 150 }, { name: 'Email', index: 'Email', width: 150 }, { name: 'Role', index: 'Role', width: 120 }, { name: 'AddressId', index: 'AddressId', width: 70 } ], pager: jQuery('#_extensionLogPager'), sortname: 'ID', rowNum: 10, rowList: [10, 20, 50, 100], sortorder: "desc", width: 790, height: 464, caption: 'Users', viewrecords: true, mtype: 'GET', loadonce: true }); }) </script>
我在Bundle.config文件中添加了jqGrid脚本文件。
运行后显示如下
I added jqGrid script file in Bundle.config file.
After run it displayed like this
{"rows":[{"ID":1,"Username":"Administrator","Password":"tm77dac","Role":1,"Email":"admin@yahoo.com"},{"ID":3,"Username":"Ana","Password":"ana","Role":2,"Email":"ana@yahoo.com"},{"ID":4,"Username":"Ion","Password":"ion","Role":2,"Email":"ion@yahoo.com"},{"ID":5,"Username":"Vasile","Password":"vasile","Role":2,"Email":"vasile@basicsite.ro"},{"ID":6,"Username":"vanmala","Password":"vanmala","Role":1,"Email":"vanmala@basicsite.com"}]}
这有什么问题。
what is wrong with this.
1.我在下一篇文章中看到你正在使用我的部分代码： MVC基本站点：第4步 - 使用AJAX，JSON，jQuery，LINQ和序列化的MVC 4.0中的jqGrid集成 [ ^ ]但你没有休息我文章中指出的步骤。
2.你的问题是你忘了包含jqGrid库（它正在渲染JSON数据），所以你错过了下一个js file：jquery.jqGrid.min.js
1.I see that you are using part of my code from my next article: MVC Basic Site: Step 4 – jqGrid Integration in MVC 4.0 using AJAX, JSON, jQuery, LINQ, and Serialization[^] but you did not fallow the steps indicated in my article.
2.Your problem is that you forgot to include thejqGridlibrary (and it is doing the rendering of the JSON data), so you are missing the next js file:jquery.jqGrid.min.js
这篇关于JqGrid无法正常工作，在UI上返回json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
