2

我很难让 jqgrid 在我的 MVC 4 Web 应用程序视图中显示。我已经在标准 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);
    }

Index的方法如下：

    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 中的创建。

再次，提前感谢。

4

0 回答 0