Question

（我对网络编程比较陌生，所以这可能是一个容易被忽视的问题）

我正在使用ASP.NET MVC4构建一个包含显示jqGrid的剃刀视图的应用程序。它使用ajax动态获取列元数据，并且数据似乎都返回正常。当我运行应用程序并显示视图时，会显示数据，但网格的标题和正文都会在网格上流动（参见图像）。

Rendered Grid

我注意到数据下面似乎有一条警告，上面写着“请选择行”。我的怀疑是问题是CSS还是与警告有关。我试过更改ui.jqgrid.css，site.css等中的各种属性无济于事。

这是渲染的html：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Feed List Preview</title>
    <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="/Content/site.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-1.8.2.js" type="text/javascript"></script>



    <script src="/Content/themes/redmond/jquery-ui-1.9.0.custom.min.css" type="text/javascript"></script>
<script src="/Content/jquery.jqGrid/ui.jqgrid.css" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>


    <script type="text/javascript">
        var jqDataUrl = "LoadData";
        var jqMetaUrl = "GetColumnData";

        $(document).ready(function () {
            $.ajax(
                {
                    type: "POST",
                    url: jqMetaUrl,
                    data: "",
                    dataType: "json",
                    success: function (result) {
                        col_names = result.colNames;
                        col_model = result.colModel;

                        $("#jqTable").jqGrid({
                            url: jqDataUrl,
                            datatype: "json",
                            mtype: "POST",

                            //Specify the column names
                            colNames: col_names,

                            //Configure the columns
                            colModel: col_model,

                            //Grid total width and height
                            width: 800,
                            shrinkToFit:false,
                            height: 400,

                            //Paging
                            toppager: true,
                            pager: $('#jqTablePager'),
                            rowNum: 25,
                            rowList: [25, 50, 100],
                            viewrecords: true, //Specify if total number of records is displayed

                            //Formatting
                            altRows: true

                            //Default Sorting (ignored)

                            //Grid Caption
                            //caption: "Feed List Preview"
                        }).navGrid("#jqTablePager",
                        { refresh: true, add: false, edit: false, del: false },
                        {}, //settings for edit
                        {}, //settings for add
                        {}, //settings for delete
                        { sopt: ["cn"] } //search options, Some options can be set on column level
                    )
                    },
                    error: function (x, e) {
                        alert("ReadyState: " + x.readyState + "; Status:" + x.status + "; Message:" + e.msg + ";");
                    }
                });
        });

    </script>

</head>
<body>
    <div id="header">
        <h1>
            Header
        </h1>
    </div>




<h2>Feed List Preview</h2>

<div>
    <table id="jqTable" class="scroll"></table>
    <div id="jqTablePager" />
</div>





    <script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>


</body>
</html>

Answer 1

好的，在同事的帮助下，我们确定了ui.jqgrid.css并且在呈现页面时没有加载jquery-ui * .css（主题）。这可以在IE中的开发人员工具中看到。

此问题的原因似乎是Razor视图未正确处理java脚本。将内容和脚本移动到纯HTML页面后，所有内容都正确呈现。

因此，仍然存在一个问题，即为什么javascript没有呈现，但我现在有足够的解决方法。

jqGrid结果流过网格和“请，选择行”消息

1 个答案: