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>  

我的控制器代碼：

   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

Answer 1

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>

Answer 2

我同意阿卜杜勒·哈迪（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>

輸出：

Answer 3

在其他答案的評論之上。

請參閱答案 ，了解如何為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);
             }