[英]Facing issue with JQ grid
我正在尝试使用asp.Net MVC为我们的应用程序使用JqGrid。 我无法显示数据。我不确定是什么问题。
这是我的查看代码:
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
@{
ViewBag.Title = "SearchEmployee";
}
<h2>SearchEmployee</h2>
<table id="list2"></table>
<div id="pager2"></div>
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: 'Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EMPLOYEEID', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FIRSTNAME', index: 'FIRSTNAME', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'AGE', index: 'AGE', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'ADDRESS1', index: 'ADDRESS1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'STATE', index: 'STATE', width: 80 },
{ name: 'CITYNAME', index: 'CITYNAME', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
//sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
我的控制器代码:
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
问题是当我尝试显示Employee列表时。 在IE中,当我尝试运行该应用程序时,它提示下载Json文件。
请让我知道是什么问题。
我已经尝试了以下链接中的源代码: http : //www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php
JavaScript是区分大小写的,您忘记在url的开头添加斜杠,因此您的代码将如下所示:
<script language="javascript">
$(document).ready(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'LASTNAME',
'DOB', 'AGE', 'SSN', 'GENDER', 'STATUS', 'ADDRESS1', 'ADDRESS2', 'COUNTRYNAME', 'STATE', 'CITYNAME', 'PINCODE'],
colModel: [
{ name: 'EmployeeId', index: 'EmployeeId', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FirstName', width: 90 },
{ name: 'LASTNAME', index: 'LASTNAME', width: 100 },
{ name: 'DOB', index: 'DOB', width: 100 },
{ name: 'Age', index: 'Age', width: 100 },
{ name: 'SSN', index: 'SSN', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'STATUS', index: 'STATUS', width: 80, align: "right"},
{ name: 'Address1', index: 'Address1', width: 80 },
{ name: 'ADDRESS2', index: 'ADDRESS2', width: 150 },
{ name: 'COUNTRYNAME', index: 'COUNTRYNAME', width: 150 },
{ name: 'Status', index: 'Status', width: 80 },
{ name: 'CityName', index: 'CityName', width: 80 },
{ name: 'PINCODE', index: 'PINCODE', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'EmployeeId',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
我同意阿卜杜勒·哈迪(Abdul Hadi)的观点,您需要在控制器名称之前加一个斜杠,以便您的网址是- url: '/Employee/Employees',
并且列名称必须与Employee对象中的名称匹配(它们应该相同案件)。
除了这两个更改外,您还定义了一堆在Employee
类中没有相应属性的列,因此可以将其删除。 并且要小心,如果您的MVC应用程序中有_Layout.cshtml
页面,有时此页面中包含脚本引用,这将阻止您使用jqGrid。为防止这种情况发生,请尝试将Layout = null;
设置Layout = null;
在您看来,这是一个完整的工作示例:
控制器:
public class EmployeeController
{
public ActionResult Index()
{
//This will return your Employee page.This should be set as the default action
return View();
}
public ActionResult Employees()
{
//This will return the data to bind to jqGrid
//DON'T CALL THIS DIRECTLY - otherwise you will get a situation where IE prompts you to download the .json file
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
return Json(employeeList, JsonRequestBehavior.AllowGet);
}
}
视图:
@{
ViewBag.Title = "Index";
Layout = null;
}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
<link href="https://cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list2").jqGrid({
url: '/Employee/Employees',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['EMPLOYEEID', 'FIRSTNAME', 'AGE', 'GENDER', 'STATUS', 'ADDRESS1', 'CITYNAME'],
colModel: [
{ name: 'EmployeeId', index: 'EMPLOYEEID', width: 55, sorttype: "int" },
{ name: 'FirstName', index: 'FIRSTNAME', width: 90 },
{ name: 'Age', index: 'AGE', width: 100 },
{ name: 'Gender', index: 'Gender', width: 80 },
{ name: 'Status', index: 'STATUS', width: 80, align: "right" },
{ name: 'Address1', index: 'ADDRESS1', width: 80 },
{ name: 'CityName', index: 'CITYNAME', width: 80 },
],
rowNum: 5,
rowList: [5, 10, 15],
pager: '#pager2',
viewrecords: true,
sortorder: "asc",
caption: "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
{ edit: false, add: false, del: false });
});
</script>
<table id="list2" border="1"></table>
<div id="pager2"></div>
输出:
在其他答案的评论之上。
请参阅答案 ,了解如何为jqgrid格式化json
public ActionResult Employees()
{
var employeeList = new List<Employee>
{
new Employee{Address1="Addr1",FirstName="Fname1",EmployeeId=100,Gender="Male",CityId=1,CityName="Chennai",Age=25,Status="Single"},
new Employee{Address1="Addr2",FirstName="Fname2",EmployeeId=101,Gender="Female",CityId=2,CityName="Benagluru",Age=28,Status="Single"},
new Employee{Address1="Addr3",FirstName="Fname3",EmployeeId=102,Gender="Male",CityId=3,CityName="Hydreabad",Age=29,Status="Single"}
};
var jsonData = new
{
total = employeeList.Count,
page = 1,
records = 10,
rows = employeeList.ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.