Mit JQ Grid konfrontiert

Question

Ich versuche JqGrid für unsere Anwendung mit asp.Net MVC. Ich bin nicht in der Lage, die Daten anzuzeigen. Ich bin mir nicht sicher, was das Problem ist.

Hier ist mein Code anzeigen:

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

Mein Controller-Code:

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

Das Problem ist, wenn ich versuchte Mitarbeiterliste zu erhalten angezeigt werden soll. In IE, als ich versuchte, die Anwendung zu starten, wurde aufgefordert, die JSON-Datei herunterzuladen.

Bitte lassen Sie mich wissen, was das Problem ist.

Ich habe mit dem Quellcode von untenstehenden Link versucht: http://www.techstrikers.com/Articles/jqgrid-in-mvc5-with-razor-view-and-entity-framework6.php

Answer 1

Ich stimme mit Abdul Hadi überein. Sie müssen einen Schrägstrich vor dem Namen des Controllers einfügen, damit Ihre URL lautet: url: '/Employee/Employees', Und die Spaltennamen müssen mit denen im Employee-Objekt übereinstimmen (sie sollten den gleichen Fall haben).

Zusätzlich zu diesen zwei Änderungen haben Sie eine ganze Reihe von Spalten definiert, die keine entsprechende Eigenschaft in der Employee Klasse haben, so dass sie entfernt werden können. Und seien Sie vorsichtig, wenn Sie eine _Layout.cshtml Seite in Ihrem MVC-Anwendung, manchmal diese Seite hat Skriptverweise, die Sie verwenden, verhindern jqGrid.To dies zu verhindern happenening Versuchen Sie, Layout = null; in Ihrem view.Here ist ein komplettes Arbeitsbeispiel:

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

Ausblick:

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

Ausgang:

Answer 2

JavaScript Gross- und Sie vergessen, Schrägstrich am Anfang URL hinzuzufügen, so wird Ihr Code wie unten sein:

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

Neben den Kommentaren der anderen Antworten.

Siehe The answer für, wie Sie Ihre Json für jqGrid

den Inhaltstyp Zeile auszuzukommenformatieren sollten

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