0

(私は Web プログラミングに比較的慣れていないため、見過ごされやすい問題かもしれません)

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 に答える