[转载]EasyUI在MVC4中需要部分刷新页面时load()后页面变形问题! - 政政糖 - 博客园

[转载]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了。

 

世界是你们的,也是我们的,但归根结底是他们的。
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏