javascript - 面临 JQ 网格问题

Question

我正在为我们使用 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>  

我的 Controller 代码:

   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);
         }

问题是当我试图显示员工列表时。在 IE 中，当我尝试运行该应用程序时，它提示下载 Json 文件。

请让我知道问题是什么。

我尝试使用以下链接中的源代码: http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php

Answer 1

我同意 Abdul Hadi 的观点。您需要在 Controller 名称前加一个正斜杠，以便您的 url 是 - url: '/Employee/Employees', 并且列名称需要与那些相匹配在 Employee 对象中(它们应该是相同的大小写)。

除了这两个更改之外，您还定义了一大堆列，它们在 Employee 类中没有相应的属性，因此可以删除它们。如果您的 MVC 应用程序中有 _Layout.cshtml 页面，请小心，有时此页面包含脚本引用，这将阻止您使用 jqGrid。为防止这种情况发生，请尝试设置 Layout = null ; 在您看来。这是一个完整的工作示例:

Controller :

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>

输出: