无法在 jqgrid ASP.NET MVC 中呈现数据

Question

我正在尝试将数据（json 对象）从控制器发送到视图并在 jqgrid 中显示数据，但我无法将数据与 jqgrid 绑定。数据以 JSON 格式在浏览器中打印。我无法弄清楚代码哪里出了问题。 here is the output what i get

控制器

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Prism.Models;
    using System.Web.Script.Serialization;


    namespace Prism.Controllers
    {
        public class SakilaController : Controller
        {
            // GET: Sakila
            public JsonResult Index()
            {
                List<ActorModel> actormodel = new List<ActorModel>();
                using (var context = new sakilaEntities())  
                {

                    List<actor> b = context.actors.ToList();
                    actormodel.Add(new ActorModel()
                    {id = 1,
                     f_name = "MS",
                     l_name = "Vivek",
                     last_update = DateTime.Now});
                 }
        return Json(actormodel.ToList(), JsonRequestBehavior.AllowGet);

       }
     }
   }

Index.cshtml

    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>
    <script src="~/Scripts/MyGrid.js"></script>


 test
<script>
$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'Index/Sakila',
        datatype: "json",
        contentType: "application/json",
        colNames: ['actor_id', 'f_name', 'l_name'],
        colModel: [
        { name: 'id', index: 'id', width: 20 },
        { name: 'f_name', index: 'f_name', width: 150 },
        { name: 'l_name', index: 'l_name', width: 150 }
        ],
        rowNum: 10,
        mtype: "POST",
        rowList: [10, 20, 30],
        pager: '#pager',
        loadonce: false,
        viewrecords: true,
        sortorder: "desc",
        autoencode: true,
        caption: "Company approval"
    });
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });
});

</script>
  
    
 <table id="grid" ></table>
<div id="pager"></div>

布局

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@ViewBag.Title - My ASP.NET Application</title>
  @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")

</head>

<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>@Html.ActionLink("Home", "Index", "Home")</li>
          <li>@Html.ActionLink("About", "About", "Home")</li>
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
        @Html.Partial("_LoginPartial")
      </div>
    </div>
  </div>
  <div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
  </div>

  @RenderSection("scripts", required: false)
</body>

</html>

Answer 1

我发现您的浏览器正在点击 'shakila/index'，这是返回 JsonResult 的方法 a。所以你确实应该通过浏览器获得一个 JSON 对象。

在你的 Jqgrid 代码中，你使用 url 作为'Index/Sakila'，这是你在这个问题中没有提到的方法。（我不知道它是否存在）

基于以上我想建议你，为每个请求使用适当的 urls。浏览器 url 应该点击返回视图的控制器方法，以便在浏览器中查看您的页面，Jqgrid 应该调用正确的 JsonResult 方法来正确填充。（根据问题 'shakila/index'）

代码示例

JS

$("#grid").jqGrid({
        url: 'Sakila/GetData',
        datatype: "json",
        contentType: "application/json",
        colNames: ['actor_id', 'f_name', 'l_name'],
        colModel: [
        { name: 'id', index: 'id', width: 20 },
        { name: 'f_name', index: 'f_name', width: 150 },
        { name: 'l_name', index: 'l_name', width: 150 }
        ],
        rowNum: 10,
        mtype: "POST",
        rowList: [10, 20, 30],
        pager: '#pager',
        loadonce: false,
        viewrecords: true,
        sortorder: "desc",
        autoencode: true,
        caption: "Company approval"
    });
    jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false });

C#

 public class SakilaController : Controller
        {

            public JsonResult Index()
            {
              return view();
            }
            public JsonResult GetData()
            {
                List<ActorModel> actormodel = new List<ActorModel>();
                using (var context = new sakilaEntities())  
                {

                    List<actor> b = context.actors.ToList();
                    actormodel.Add(new ActorModel()
                    {id = 1,
                     f_name = "MS",
                     l_name = "Vivek",
                     last_update = DateTime.Now});
                 }
        return Json(actormodel.ToList(), JsonRequestBehavior.AllowGet);

       }
     }

浏览器正在调用 Sakila/Index 并且 Jqgrid 正在调用 Sakila/GetData 请注意，MVC url 模式的工作方式为 ControllerName/MethodName

无法在 jqgrid ASP.NET MVC 中呈现数据

Unable to present the data in jqgrid ASP.NET MVC

c#

asp.net

asp.net-mvc

jquery

jqgrid-asp.net