When EasyUI needs to partially refresh the page in MVC4, the page deforms after load()! _html/css_WEB-ITnose

Recently, when using MVC4 and EasUI, I encountered some problems that easily lead to interface deformation, and I struggled with them for a long time. However, when I found out where the problem was, I felt that in the end I had no idea about the concept of MVC4. Seize it, OK, show time. Part of the label loadAbout page of the Contact page in this example.

1. First, let’s restore the problem. I believe some friends will encounter it later. Load JS and CSS.

BundleConfig.cs under the App_Start file

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"));

You need to pay attention to the above content when configuring: the name of jquery.easyui.min.js downloaded by default needs to be changed It is jquery-easyui-min.js, otherwise the loading will not be successful; secondly, pay special attention to the virtual path of the stylebundle, which must be XXX/Default/XXX. You need to reach the CSS directory, but the name can be customized; if it is XXX/Default If so, sorry, I can’t recognize the corresponding CSS.

2. Load the corresponding reference in the _Layout.cshtml page;

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

Use the link tag to place the style sheet in the document head, and in the script tag forward.

The reason is: In addition, the loading situation of placing the style at the bottom is: when the page loads gradually, the text is displayed first, followed by the picture. Finally, when the style sheet has been downloaded correctly, the rendered text and images will be redrawn with the new style. It's like in a grid shop, everything is laid out in order, but the boss says that this thing has to be placed this way, that way, and has to be rearranged one by one.

Place the script at the bottom

The reason is: placing the script at the top of the page will also cause page blocking and prevent the page from gradually rendering.

HTTP protocol 1.1 specification recommends that the browser download two components in parallel from each host. The number of parallel downloads depends on bandwidth and CPU. Excessive parallel downloads will also reduce performance. The advantages of parallel downloading are obvious. Components can be downloaded in parallel, but parallel downloading is disabled when downloading scripts to ensure that the scripts can be executed in the correct order. Because scripts cannot be downloaded in parallel, to avoid delays in downloading components, it is best to place the script at the bottom of the page.

3. The Controller code calls the page and uses PartialView, so that the framework will automatically filter out the styles and scripts of the master page and become a clean partial.

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

4. Contact page

 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. About page

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

If you don’t add the tag If the red jquery reference is added, everything is normal;

If added, there seems to be a duplicate problem somewhere, as follows:

The reason for this problem is actually very simple. The controls of easyui need to be dynamically drawn, and the easyui.js loaded by the master page before will not be executed again after the Load() method is called, because that The product has been loaded once on the master page. This time, part of the page was redrawn using Ajax. Of course, I can't trouble anyone anymore. Sometimes if you feel uneasy and discordant, you will waste your time and effort. Looking back, you will find that the solution to the problem has long been waiting somewhere.