菜单功能页面图标使用ajax异步加载，防止由于网速慢导致Menus打开很慢

Bootstrap.Admin/Content/css/fa.css

@@ -105,6 +105,15 @@
         height: inherit;
     }
 
+        .icon-content .modal-body .loadIconView {
+            text-align: center;
+            font-size: 16px;
+        }
+
+            .icon-content .modal-body .loadIconView span {
+                margin-left: 6px;
+            }
+
     .icon-content .modal-footer {
         position: fixed;
         left: 16px;

Bootstrap.Admin/Content/js/Longbow.Common.js

@@ -135,6 +135,7 @@
                     url: data.url + data.Id,
                     data: data.data,
                     type: data.method,
+                    async: true,
                     success: function (result) {
                         success(result);
                     },
@@ -179,6 +180,7 @@
     // Menus
     Menu = {
         url: '../api/Menus/',
+        iconView: '../Admin/IconView',
         title: "授权菜单"
     };
 

Bootstrap.Admin/Controllers/AdminController.cs

@@ -84,6 +84,14 @@ namespace Bootstrap.Admin.Controllers
         /// 
         /// </summary>
         /// <returns></returns>
+        public PartialViewResult IconView()
+        {
+            return PartialView("IconView");
+        }
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
         public ActionResult Profiles()
         {
             var v = new NavigatorBarModel("~/Admin/Profiles");

Bootstrap.Admin/Scripts/Menus.js

@@ -1,7 +1,6 @@
 $(function () {
     var $dialog = $('#dialogNew');
     var $pickIcon = $('#pickIcon');
-    var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
     var $dialogNew = $dialog.find('div.modal-dialog');
     var $dialogIcon = $('#dialogIcon');
     var $dialogMenu = $('#dialogSubMenu').find('.modal-content');
@@ -137,13 +136,6 @@
         }
     });
 
-    $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
-    $iconList.find('div').addClass('col-xs-6');
-    $iconList.on('click', 'div.fa-hover a, ul li', function () {
-        $pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
-        return false;
-    });
-
     $btnPickIcon.on('click', function () {
         $dialogIcon.show();
     });
@@ -233,4 +225,22 @@
     $nestMenu.nestMenu(initNestMenu);
     // select
     $('.btn-select').select();
+
+    $.bc({
+        url: Menu.iconView,
+        swal: false,
+        method: 'GET',
+        callback: function (result) {
+            if (result) {
+                $dialogIcon.find('.modal-body').html(result);
+                var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
+                $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-xs-6');
+                $iconList.find('div').addClass('col-xs-6');
+                $iconList.on('click', 'div.fa-hover a, ul li', function () {
+                    $pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
+                    return false;
+                });
+            }
+        }
+    });
 });

Bootstrap.Admin/Views/Admin/Menus.cshtml

@@ -153,7 +153,7 @@
             <h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
         </div>
         <div class="modal-body" data-spy="scroll" data-target=".fb-timeliner">
-            @Html.Partial("IconView")
+            <div class="loadIconView"><i class="fa fa-spinner fa-pulse"></i><span>正在加载图标...请稍等</span></div>
         </div>
         <div class="modal-footer">
             <span>被选择的图标</span><i id="pickIcon"></i>