0
在MVC中使用JQGrid将Json格式文本显示为View。 MVC和Razor的新手请详细协助。在下面找到我的代码。MVC View仅返回使用jqGrid的json格式化数据
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>
和URL我用的是http://localhost:52326/home/GetJqGridData 请找，结果我得到 