• 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=" 180px; height: 180px;"></div>
    2  @* @Scripts.Render("~/bundles/jquery")*@ //此处是主要问题点,一不小心,就会让人很捉鸡。
    3  @Scripts.Render("~/bundles/jquery-easyui")

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

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

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

  • 相关阅读:
    Pulp之四:其它应用样例(1)-一般的整数规划问题 (设置目标约束函数)
    Pulp之三:官网上的应用样例(4)-Blending Problem (混合问题)
    Pulp之三:官网上的应用样例(3)-Sudoku Problem by LP (数独问题)
    Pulp之三:官网上的应用样例(2)-A Set Partitioning Problem (集合划分问题)
    list转换dict的方式以及zip的用法
    Pulp之三:官网上的应用样例(1)-The_Whiskas_Problem (猫粮配料比例问题)
    Pulp之二:Pulp中几个重要的概念
    一个简单有趣的题(4个变量找出取走的数)
    Java之父 James Gosling 发表博文 《Too Soon》纪念乔布斯。
    第01课 OpenGL窗口(1)
  • 原文地址:https://www.cnblogs.com/mqgh/p/RogerZ.html
Copyright © 2020-2023  润新知