EasyUI在MVC4中需要部分刷新頁面時load()后頁面變形問題!


  最近在使用MVC4與EasUI過程中遇到些容易導致界面變形的問題,糾結了很久,但其實當發現問題在哪里時,倒覺得最終還是自己對MVC4的概念沒把握好,OK,show time.  本示例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"));

    以上內容在配置時需要注意:默認download下來的jquery.easyui.min.js 名稱要改為jquery-easyui-min.js,否則加載不成功;其次尤其要注意stylebundle的virtualpath問題,必須是XXX/Default/XXX 才可以,要到達CSS的目錄,但名稱可以自定義;如果為XXX/Default的話,不好意思,認不到相應的CSS。

  2. 在_Layout.cshtml 頁加載相應的引用;  

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

  使用link標簽將樣式表放在文檔head中,且在script標簽前。

  原因是:另外樣式放在底部的加載情況是:當頁面逐步加載時,文字首先顯示,接着是圖片。最后,當樣式表正確下載了之后,已經呈現的文字  和圖片就要用新的樣式重繪。就好像格子鋪里,東西都按順序擺好了,但是老板說,這個東西得這樣、那樣擺,又得挨個重新擺了。

  將script腳本放在底部

  原因是:腳本放在頁面頂部同樣會引起頁面阻塞,阻止頁面逐漸呈現。

  http協議1.1規范,建議瀏覽器從每個主機並行下載兩個組件,並行下載的數量的優劣取決於帶寬和CPU,過多的並行下載也會降低性能。並行  下載的優點很明顯,組件可以並行下載,但是下載腳本時並行下載是禁用的,是為了保證腳本能夠按照正確的順序執行。因為腳本不能並行下  載,為避免組件的下載延遲,最好將腳本放在頁面底部。

  3. Controller代碼調用頁面,使用PartialView,如此框架便會自動過濾掉母版頁的樣式與腳本,成為一個干凈的partial.

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

  4. Contact頁面

 1 <section class="contact">
 2     <h2>日歷 - 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. About頁面

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的部分頁面重畫,當然不能再麻煩人家了。有時心不平氣不和就會費神費力浪費青春,回過頭來,原來解決問題的方案早都在哪里等Cao了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM