EasyUI在MVC4中需要部分刷新页面时load()后页面变形问题!_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:34:25
Original
1137 Leute haben es durchsucht

  最近在使用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"));
Nach dem Login kopieren

  以上内容在配置时需要注意:默认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")<br />2  @Styles.Render("~/Content/css")
Nach dem Login kopieren

  使用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         }
Nach dem Login kopieren

  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>
Nach dem Login kopieren

  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")
Nach dem Login kopieren

 

 如果不增加标红的jquery引用,则一切正常;

如果加上后,某处似乎会出现重复的问题,如下:

此问题,原因其实很简单,easyui 的控件是需要动态画上去的,而之前母版页加载的easyui.js 在Load()方法调用后,是不会再执行了,因为那货已经在母版页加载过一次了,此次本来就是使用了Ajax的部分页面重画,当然不能再麻烦人家了。有时心不平气不和就会费神费力浪费青春,回过头来,原来解决问题的方案早都在哪里等Cao了。

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage