jqgridをMVC4Webアプリケーションビューに表示するのに問題があります。標準のhtmlドキュメントとグリッド表示でまったく同じビューコードをテストしましたが、インデックスビューに表示されるのはh2タグのみです。モデル情報をHTMLドキュメントに表示することさえできたので、グリッドがMVCビューに読み込まれない理由について本当に混乱しています。
グリッドデータのコントローラーコードは次のとおりです。
public ActionResult GridData()
{
var query = (from u in db.Users
join ur in db.User_Relationship on u.User_ID equals ur.Child_ID
join lu in db.Lookups on u.First_LanguageID equals lu.LookupID
join ut in db.User_Tests on u.User_ID equals ut.User_ID into ps
from ut in ps.DefaultIfEmpty()
where ur.Parent_ID == 45875
group new { u, lu } by new
{
u.User_ID, u.Forename, u.Surname, u.Client_Code,
u.User_Name, u.Password, u.Email, u.Gender,
u.Report_date, u.EmailDate, u.Job_Function,
lu.LookupValue
} into g
select new UserViewModel
{
User_ID = g.Key.User_ID,
Forename = g.Key.Forename,
Surname = g.Key.Surname,
Client_Code = g.Key.Client_Code,
User_Name = g.Key.User_Name,
Password = g.Key.Password,
Email = g.Key.Email,
Gender = g.Key.Gender,
Report_Date = g.Key.Report_date,
Email_Date = g.Key.EmailDate,
Job_Function = g.Key.Job_Function,
Lookup_Value = g.Key.LookupValue
});
var jsonData = new
{
total = 10,
page = 1,
records = 50,
rows = query.Select(x => new
{
x.User_ID, x.Forename, x.Surname, x.Client_Code, x.User_Name,
x.Password, x.Email, x.Gender, x.Report_Date, x.Email_Date,
x.Job_Function, x.Lookup_Value
}).ToList().Select(x => new
{
id = x.User_ID,
cell = new string[]
{
x.User_ID.ToString(),
x.Forename,
x.Surname,
x.Client_Code.ToString(),
x.User_Name,
x.Password,
x.Email,
x.Gender,
x.Report_Date.ToString(),
x.Email_Date.ToString(),
x.Job_Function,
x.Lookup_Value
}}).ToArray(),
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
インデックスの方法は次のとおりです。
public ActionResult Index()
{
return View();
}
Index.cshtmlのビューコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ()
{
jQuery("#list").jqGrid(
{
url: '/WebFormUserList/GridData',
datatype: 'json',
mtype: 'GET',
colNames:
[
'User_ID', 'Forename', 'Surname', 'Client_Code', 'User_Name',
'Password', 'Email', 'Gender', 'Report_Date', 'Email_Date',
'Job_Function', 'Lookup_Value'
],
colModel:
[
{ name: 'User_ID', index: 'User_ID', width: '50', align: 'centre' },
{ name: 'Forename', index: 'Forename', width: '50', align: 'centre' },
{ name: 'Surname', index: 'Surname', width: '50', align: 'centre' },
{ name: 'Client_Code', index: 'Client_Code', width: '50', align: 'centre' },
{ name: 'User_Name', index: 'User_Name', width: '50', align: 'centre' },
{ name: 'Password', index: 'Password', width: '50', align: 'centre' },
{ name: 'Email', index: 'Email', width: '50', align: 'centre' },
{ name: 'Gender', index: 'Gender', width: '50', align: 'centre' },
{ name: 'Report_Date', index: 'Report_Date', width: '50', align: 'centre' },
{ name: 'Email_Date', index: 'Email_Date', width: '50', align: 'centre' },
//{ name: 'Test_Count', index: 'Test_Count', width: '50', align: 'centre' },
//{ name: 'Test_Completed', index: 'Test_Completed', width: '50', align: 'centre' },
{ name: 'Job_Function', index: 'Job_Function', width: '50', align: 'centre' },
{ name: 'Lookup_Value', index: 'Lookup_Value', width: '50', align: 'centre' },
],
pager: jQuery('#pager'),
height: 'auto',
width: '1000',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/css/ui-lightness/images',
caption: 'My first grid'
});
});
</script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
何が悪いのか正確にはわからないので、どんな助けでも大歓迎です。返されるjsonは、htmlドキュメントで受け入れられるため、正しい形式であると確信しています。
私の唯一の考えは、グリッドがロードされないため、MVC4の_layout.html内でグリッドの作成を中断する何かが起こっているということです。
繰り返しになりますが、よろしくお願いします。