Question

在MVC中使用JQGrid显示Json将文本格式化为视图。 MVC和Razor的新手请详细帮助。在下面找到我的代码。

using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Reflection;


namespace jGridSample.Controllers
{
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
    [HttpGet]
    public ActionResult GetJqGridData(string page, string rows, string sidx, string sord)
    {
        var jqGridData = new JqGridObject()
        {
            Data = GetLoggingDetails(),
            Page = page,
            PageSize = 3, 
            SortColumn = sidx,
            SortOrder = sord
        };
        return Json(jqGridData, JsonRequestBehavior.AllowGet);
    }

    public List<GOALogging> GetLoggingDetails()
    {
        string connString = "server=6.15.265.23;database=ACT2_OL_IGP;uid=s_user;pwd=password;Pooling=true;Connection Lifetime=86400;Min Pool Size=50;Max Pool Size=2000";
        SqlConnection conn = new SqlConnection(connString);
        SqlCommand cmd = new SqlCommand();
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.CommandText = "GET_SAMPLEDETAILS";
        cmd.Connection = conn;
        conn.Open();
        DataTable dataTable = new DataTable();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        da.Fill(dataTable);
        conn.Close();
        da.Dispose();

        List<GOALogging> items = new List<GOALogging>();
        foreach (DataRow row in dataTable.Rows)
        {
            items.Add(new GOALogging { CRT_DT = Convert.ToDateTime(row["CRT_DT"]), 
                                        PROCESS_FLG = row["PROCESS_FLG"].ToString(),
                                        STATUS_CODE = row["STATUS_CODE"].ToString(),
                                        STATUS_MESSAGE = row["STATUS_MESSAGE"].ToString(),
                                        SERV_TRANS_ID = row["SERV_TRANS_ID"].ToString()
                                        });
        }
        return items;
    }

    public class JqGridObject
    {
        public string Page { get; set; }
        public int PageSize { get; set; }
        public string SortColumn { get; set; }
        public string SortOrder { get; set; }
        public List<GOALogging> Data { get; set; }
    }

    public class GOALogging
    {
        public string SERV_TRANS_ID { get; set; }
        public string STATUS_CODE { get; set; }
        public string STATUS_MESSAGE { get; set; }
        public string PROCESS_FLG { get; set; }
        public DateTime CRT_DT { get; set; }
    }

    }
}

查看代码：

@{
   Layout = null;
}
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/jquery-ui-1.10.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.0.js"></script>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#myGrid").jqGrid({
            url: '/home/GetJqGridData',
            datatype: 'json',
            myType: 'GET',
            colNames: ['SERV_TRANS_ID', 'STATUS_CODE', 'STATUS_MESSAGE', 'PROCESS_FLG', 'CRT_DT'],
            colModel: [
            { name: 'SERV_TRANS_ID', index: 'SERV_TRANS_ID' },
            { name: 'STATUS_CODE', index: 'STATUS_CODE' },
            { name: 'STATUS_MESSAGE', index: 'STATUS_MESSAGE' },
            { name: 'PROCESS_FLG', index: 'PROCESS_FLG' },
            { name: 'CRT_DT', index: 'CRT_DT' }
            ],
            pager: $('#myPager'),
            rowNum: 5,
            width: 600,
            viewrecords: true,
            caption: 'Grid View'
        });
    });
 </script>
</head>
<body>
<table id="myGrid"></table>

<div id="myPager"></div>
</body>
</html>

我使用的网址是http://localhost:52326/home/GetJqGridData 请找到我得到的结果

Answer 1

这主要是因为你在控制器中调用了JsonResult而不是ActionResult。

Reference Example

Answer 2

我想问题是如何构造JqGridObject ，签名看起来错误，也使用int作为页面和行。

首先来自 Here 中的链接JqGrid期望它的json采用以下格式，你不能发送jqgrid任何json而不覆盖读者

jQuery("#gridid").jqGrid({
...
   jsonReader : { 
      root: "rows", 
      page: "page", 
      total: "total", 
      records: "records", 
      repeatitems: true, 
      cell: "cell", 
      id: "id",
      userdata: "userdata",
      subgrid: { 
         root:"rows", 
         repeatitems: true, 
         cell:"cell" 
      } 
   },
...
});

这意味着你的数据应该在行字段中，就像我一样。

避免使用JqGridObject并使用对象初始化程序。你也不需要SortColumn，SortOrder，你必须在客户端指定那些。

    [HttpGet]
    public ActionResult GetJqGridData(int page, int rows, string sidx, string sord)
    {

       var data = GetLoggingDetails();

        var jqGridData = new
        {
            total = data.Count,
            rows = GetLoggingDetails(),
            page = page,
            records = rows, 
        };

        return Json(jqGridData, JsonRequestBehavior.AllowGet);
    }

在客户端代码中改变

myType: 'GET' to  mtype: 'GET'

仅供参考：所有jqgrid方法都具有案例敏感性，所以要小心。

其他解决方案是覆盖json阅读器并将其添加到jqgrid

....
mType: 'GET',
jsonReader : { 
          root: "Data", 
          page: "Page"
},
....

MVC View使用jqGrid仅返回json格式化数据

2 个答案: