如何使用 JQGrid 解析来自 Controller 的数据以查看？答案

【问题标题】：How to parse data from Controller to view using JQGrid?如何使用 JQGrid 解析来自 Controller 的数据以查看？
【发布时间】：2021-08-17 04:39:13
【问题描述】：

我正在尝试将数据从控制器传递到 GQ 网格。我已经完成了 SQL 操作 - 在另一个文件中选择一行并将列表类型 List<Models.ViewModel.Itegration> 的对象返回给控制器。我实现了JsonResult 类型的控制器，它以json 格式返回数据。控制器使用[HttpGet] Attritute。我附上了我的控制器代码、html、js 文件和问题的屏幕截图。 Google 控制台 没有显示任何问题。表格正在准备中，但表格数据正在显示。我想正确地“传递数据”存在问题。如果有人能检查我的代码并让我知道我哪里出错了，那对我很有帮助。

此外，是否有任何软件，我可以在连接到服务器时检查问题出在哪里，因为在这种情况下，Google 检查工具根本没有帮助。

在我的控制器中，通过使用断点，我在 Integrations value = db.GetIntegrationRow(); 中检查了value 中的正确值。控制器：

#region Namespace

using MCNIDev.DBAccess;
using MCNIDev.Models.ViewModel;
using MCNIDev.Processor.Services;

using System.Web.Mvc;

#endregion

namespace MCNIDev.Content
{
    /// <summary>
    /// This controller class is responsible for all action in  Integration view
    /// </summary>
    public class IntegrationsController : Controller
    {
        public ActionResult Details()
        {
            return PartialView();
        }

        /// <summary>
        /// To get the data for JQGrid
        /// </summary>
        [HttpGet]
        public JsonResult Detail()
        {

            IntegrationsProcessor db = new IntegrationsProcessor(new MCNIDbContext());
            Integrations value = db.GetIntegrationRow();

            return new JsonResult()
            {
                               Data = value,
                               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
           
        }

    }
}

HTML 文件

@using MCNIDev.CustomControls
@model MCNIDev.Models.ViewModel.Integrations


@{
    ViewBag.Title = "Details";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=devicexb c-width" />
    <title>Integrations</title>
</head>
@Styles.Render("~/Content/toasterCss")
@Styles.Render("~/Content/dataPickerCss")
<style type="text/css">
    .btn {
        min-width: 80px !important;
    }
</style>
<body>
    @using (Html.BeginForm("", "Integrations", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", id = "frmManifestOrders" }))
    {
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Integrations</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div><!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <div class="card card-block">
                    <div class="row table-responsive">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <table id="tblSelectIntegrations"></table>
                                    <div id="divSelect"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    <hr />
                                    <input type="button" class="btn btn-secondary" onclick="document.location.href='/Dashboard/Dashboard';" value="Cancel" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    }
</body>
</html>
@*Bundle file includes the path to single JavaScript file Integration that does GQGrid operation *@
@Scripts.Render("~/bundles/integrations")
<script>
$(document).ready(function(){
    Integrate.GetValue();
});
</script>

JavaScript 文件：

var Integrate = function() {
function GetValue() {
    $("#tblSelectIntegrations").jqGrid({
        mtype: "GET",
        url: "/Integrations/Detail",
        datatype: "json",
        async: false,
        colNames: [
            "First Name", "Email Address",""
        ],
        colModel: [
            //{
            //    name: '',
            //    key: false,
            //    width: 30,
            //    editable: true,
            //    formatter: function () {
            //        return "<input type='checkbox' value='Select' class='fm-button ui-state-default ui-corner-all fm-button-icon-left noPrint'\>";
            //    }
            //},
            { key: false, name: 'IntegrationName', index: 'IntegrationName', editable: false, width: 200 },
            { key: false, name: 'CompanyEmail', index: 'CompanyEmail', editable: false, width: 200 },
         { key: false, name: 'Blank', index: 'Blank', editable: false, width: 200 }
        ],
        pager: jQuery("#divSelect"),
        rowNum: 1,
        scroll: 0,
        height: $(window).innerHeight() - 450,
        width: "100%",
        viewrecords: true,
        caption: "Product",
        emptyrecords: "No records to display",
        jsonReader: {
            root: "",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },
        autowidth: true,
        multiselect: false,
        loadonce: false,
        ajaxGridOptions: { cache: false },
              
    }).navGrid("tblSelectIntegrations", { edit: false, add: false, del: false, search: false, refresh: false });
}
return {
        GetValue: GetValue
    };
}();

【问题讨论】：

标签： asp.net asp.net-mvc jqgrid jqgrid-asp.net mvcjqgrid

【解决方案1】：

问题在于控制器。我试图在不告诉 JQGrid 在哪里插入数据的情况下发送数据。

var jsonData = new
            {
                rows = value
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);

用上面的代码替换下面的代码

return new JsonResult()
            {
                               Data = value,
                               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };

在我的第一个代码中，我提到了将数据添加到行中。

【讨论】：

【解决方案2】：

return new JsonResult()
            {
                               Data = value,
                               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };

用下面的代码替换上面的代码。

int totalRecords = value.Count();
   var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
    var JsonData = new
                        {
                            total = totalPages,
                            page,
                            records = totalRecords,
                            rows = value 
                        };
                        return Json(JsonData, JsonRequestBehavior.AllowGet);

【讨论】：