MVC4 で EasyUI がページを部分的に更新する必要がある場合、load() の後にページが変形します。 _html/css_WEB-ITnose

最近、MVC4 と EasUI を使用しているときに、インターフェイスの変形を引き起こしやすいいくつかの問題に遭遇しました。しかし、問題がどこにあるのかを知ったとき、私はよくわからないと感じました。最後に、MVC4 の概念を示します。この例では、Contact ページのラベル「loadAbout」ページの一部を示します。

1. まず、後で問題に遭遇する友人もいると思います。 JSとCSSを読み込みます。

App_Start ファイル配下の BundleConfig.cs

1  bundles.Add(new ScriptBundle("~/bundles/jquery-easyui").Include(2                         "~/Content/jquery-easyui-1.3.4/jquery-easyui-min.js"));3 4  bundles.Add(new StyleBundle("~/Content/jquery-easyui-1.3.4/themes/default/css").Include("~/Content/jquery-easyui-1.3.4/themes/default/easyui.css"));

設定する際は上記内容に注意する必要があり、デフォルトでダウンロードされる jquery.easyui.min.js の名前を jquery-easyui-min に変更する必要があります。 js である場合、読み込みは成功しません。次に、スタイルバンドルの仮想パスに特に注意してください。これは CSS ディレクトリに到達する必要がありますが、名前はカスタマイズできます。 XXX/Default、申し訳ありませんが、対応する CSS が認識できません。

2. _Layout.cshtml ページに対応する参照を読み込みます。

1   @Scripts.Render("~/bundles/jquery-easyui")<br />2　 @Styles.Render("~/Content/css")

link タグを使用して、スタイル シートをドキュメントのヘッド内および script タグの前に配置します。

その理由は、さらに、スタイルを下部に配置する場合の読み込み状況は、ページが徐々に読み込まれると、最初にテキストが表示され、次に画像が表示されます。最後に、スタイルシートが正しくダウンロードされると、レンダリングされたテキストと画像が新しいスタイルを使用して再描画されます。それは、グリッドショップのようなもので、すべてが順番に配置されていますが、上司は、これをあっちに配置しなければならない、あっちに配置しなければならないと言い、1つずつ並べ替えなければなりません。

スクリプトを一番下に配置します

その理由は、スクリプトをページの一番上に配置すると、ページのブロックも発生し、ページが徐々にレンダリングされなくなります。

http プロトコル 1.1 の仕様では、ブラウザが各ホストから 2 つのコンポーネントを並行してダウンロードすることが推奨されています。並行ダウンロードの数は帯域幅と CPU に依存します。過剰な並行ダウンロードもパフォーマンスを低下させます。並列ダウンロードの利点は明らかですが、コンポーネントを並列でダウンロードできますが、スクリプトを正しい順序で実行できるように、スクリプトをダウンロードするときは並列ダウンロードが無効になります。スクリプトは並行してダウンロードできないため、コンポーネントのダウンロードの遅延を避けるために、スクリプトをページの下部に配置することをお勧めします。

3. コントローラー コードはページを呼び出し、PartialView を使用します。そのため、フレームワークはマスター ページのスタイルとスクリプトを自動的にフィルターし、クリーンなパーシャルになります。

1   public PartialViewResult About()2         {3             ViewBag.Message = "Your app description page.";5             return PartialView();6         }

4. お問い合わせページ

 1 <section class="contact"> 2     <h2 id="日历-Calendar">日历 - Calendar</h2>   3     <div id="contantDiv" class="demo-info" style="margin-bottom: 10px">   4         <div class="demo-tip icon-tip"></div>   5         <div>单击选择日期</div>   6     </div>   7 </section> 8  9 <script type="text/javascript">10     function loadit() {11         $("#contantDiv").load("About");}12 </script>

5. ページについて

1  <div id="nihao" class="easyui-calendar" style="width: 180px; height: 180px;"></div>2  @* @Scripts.Render("~/bundles/jquery")*@ //此处是主要问题点,一不小心，就会让人很捉鸡。3  @Scripts.Render("~/bundles/jquery-easyui")

赤でマークされた jquery 参照を追加しない場合はすべて正常です

追加すると、次のようにどこかに重複した問題があるようです。 :

この問題、その理由は実際には非常に単純です。easyui のコントロールは動的に描画される必要があり、マスター ページにロードされた easyui.js は Load() メソッドが呼び出された後は再度実行されません。一度はマスター ページに読み込まれていますが、今回は Ajax を使用したページの再描画の一部でしたので、もちろんこれ以上気にすることはできません。不安や不調和を感じていると、振り返ってみると問題の解決策がずっと前から待っていたことに気づくことがあります。