0

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

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

渲染网格

我确实注意到数据下方似乎有一条警告，说明“请选择行”。我怀疑问题是 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>
4

1 回答 1

0

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

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

所以仍然有一个关于为什么 javascript 没有被渲染的问题，但我现在有一个足够的解决方法。

于 2012-10-15T03:11:30.747 回答