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>

我的控制器代码：

   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

JavaScript区分大小写，您忘记在网址开头添加斜杠，以便您的代码如下所示：

    <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>

Answer 2

我同意Abdul Hadi。您需要在控制器名称前加上正斜杠，以便您的网址为 - url: '/Employee/Employees',并且列名称需要与Employee对象中的名称相匹配（它们应该是相同的情况）。

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

<强>控制器：

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>

<强>输出：

Answer 3

除了其他答案的评论之外。

请参阅The answer，了解如何为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);
             }

面对JQ网格的问题

3 个答案: