Metronic 与 VS2013/2015 合作开发

Metronic 与 VS2013/2015 合作开发 

去年购买了一个：METRONIC  （http://www.keenthemes.com/） ，最近下了最新的版本：V3.7 ，解压缩后，目录如下：（没有列出RTL 部分）

- _documentation - Contains of admin and frontend themes general documentation files.

- _resources - Contains of commercially licensed and free stock photos and the theme's PSD files.

- theme - Metronic HTML theme's main folder(Default version).
     - assets - Contains of theme related files(css, js, images, etc).
         - admin - Contains of admin theme related files(css, js, images, etc).
         - frontend - Contains of admin theme related files(css, js, images, etc).
         - global - Contains of global Metronic framework components, customized 3rd party plugins.
                      All the features under global folder can be used both in frontend theme and admin theme.

- sass - Contains of SASS(sass-lang.com) files for the admin theme(only the admin default version fully supports SASS).
     - templates - Contains of admin and frontend theme template pages.
        - admin - Contains of admin theme templates pages.
        - frontend - Contains of frontend theme template pages.

1、建立一个 VS 2013 的解决方案，在方案中，创建一个顶级文件夹（Metronic）,与 Models、Controllers 等平列，将：解压缩的 METRONIC软件 下的 theme 文件夹下的内容 COPY 过来到：文件夹（metronic）下。 可以只保留有关的管理主题Admin，对 frontend 文件夹（前端主题）可以删除，而且对ADMIN 主题下的四个，可以仅保留一个。

运行VS，通过游览器本地地址：http://localhost:XXXX/metronic/templates/admin/index.html    HTML 版本；

http://localhost:9087/metronic/templates/admin/angularjs/#/dashboard.html        angularjs 版本；

2、对于 VS2015 的解决方案 ，由于静态文件放置于：WWWROOT 文件夹下，因此在其中创建一个文件夹（Metronic），复制 METRONIC软件下 theme 文件夹下的内容，类似 VS2013 的操作。

运行VS，同样通过游览器本地地址 http://localhost:XXXX/metronic/templates/admin/index.html  访问 HTML 版本。

3、本人只关注：Metronic 的 angularjs 版本。  （服务目录：E：/ZXL_CDREPORT）

4、将解决方案 Views\Home 目录的 Index.cshtml 的内容，全部置换为 metronic 软件 admin 主题下 angularjs 版本的 index.html 文件的内容。

（注意：如果直接修改 metronic 的文件，需要保存为 UTF8 格式，原文件不是UTF8。）

A、  修改 CSS 文件的相对引用路径为直接引用。即： href="../../../   修改为  href="/metronic/  .

B、  修改JAVASCRIPT (JS) 文件的引用   src="js/app.js"  及 src="js/directives.js"  为：

src="~/metronic/templates/admin/angularjs/js/app.js"

src="~/metronic/templates/admin/angularjs/js/directives.js"

C、 将 data-ng-include="'tpl/XXXX.html'"  几个 包含引入的文件，涉及：METRONIC\templates\admin\angularjs\tpl 下的几个文件。

使用 ASPNET 5 的 WEBCOMPONENT 技术实现。需要 增加控制器。 在 Controllers下增加 ViewComponents 文件夹，设计一个类：

public class LayoutTplViewComponent : ViewComponent

{
                             private readonly ApplicationDbContext db;

public LayoutTplViewComponent(ApplicationDbContext context)
                             {
                                 db = context;
                             }

public async Task<IViewComponentResult> InvokeAsync(string tpl)
                              {

return View(tpl);
                              }

}

将 INDEX 文件中 <div data-ng-include="'tpl/XXX.html'" data-ng-controller="XXXController" class="XXX hidden-xs hidden-sm">
                    </div>

更换为：

<div data-ng-controller="XXXController" class="XXX hidden-xs hidden-sm">
                            @await Component.InvokeAsync("LayoutTpl", "XXX")    //异步调用上述类的方法。
                    </div>

主题 theme-panel.html  可以不用处理，否则，好像按钮没有了作用。

实际 Footer.html 也可以不用处理。否则回到顶部的按钮不见。可能是JS脚本没有执行。

重点处理：Header 及 sidebar 菜单，SIDEBAR 的菜单希望从数据获取后使用 RAZOR 语法生成。

5、修改 app.js 文件 的路由配置。MetronicApp.config() 方法

1）$urlRouterProvider.otherwise("XXXX");  是默认的路由，系统初始打开的内容页面，由其确定。

2）将各个路由配置的资源路径，修改为绝对引用路径。

3） 为了自动配置，此处配置可以考虑使用 单独的JS 文件。！！！

     6、修改 app.js 文件 的控制器的初始化 MetronicApp.controller()

在此方法中，在一段备注：Init entire layout(header, footer, sidebar, etc) on page load if the partials included in server side instead of loading with ng-include directive ，意思是：如果主页（INDEX）的一部分内容（比如 header，sidebar 等）不是用：ng-include 标注引入，而且通过服务器端写入，则在页面载入时，需要初始化全部 或者 部分。 取决于 通过服务器插入的部分。

全部通过服务端插入，使用 Layout.init();

（推荐：本人只是考虑  header，sidebar）部分通过服务端插入，写入相应部分，Layout.initHeader();  Layout.initSidebar();

/* Setup App Main Controller */

MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) {
                 $scope.$on('$viewContentLoaded', function() {
                      Metronic.initComponents(); // init core components
                     //Layout.init();     // Init entire layout(header, footer, sidebar, etc) on page load

if the partials included in server side instead of loading with ng-include directive

Layout.initHeader();    // init header   初始化移动到此处。
                       Layout.initSidebar();                         初始化移动到此处。
                  });
            }]);

           同时，取消 各自控制器的初始化。如：

/* Setup Layout Part - Header */
              MetronicApp.controller('HeaderController', ['$scope', function($scope) {
                   $scope.$on('$includeContentLoaded', function() {
                      // Layout.initHeader(); // init header    取消此部分。
                   });
               }]);

/* Setup Layout Part - Sidebar */
              MetronicApp.controller('SidebarController', ['$scope', function($scope) {
                  $scope.$on('$includeContentLoaded', function() {
                     // Layout.initSidebar();   // init sidebar   取消此部分。
                  });
              }]);

7、控制器的修改，使用“点击展开菜单”出现立即关闭（缩回）的问题，实际是：引发了两次动作。

问题解决方法是：修改此“点击”引发的JS方法，只处理一次动作。

修改文件：/metronic/assets/admin/layout/scripts/layout.js  文件，此文件是返回一个对象，

return {} 中 initSidebar: function ()  就是前面谈到的 初始化方法。

1）在文件的开始处（layout 函数外），定义一个变量

var zxl = 0;

2）在 initSidebar 函数的开始，判断处理的次数，第二次，直接返回。

              initSidebar: function () {

                  zxl = zxl + 1;
                  if (zxl % 2 === 0) {
                     zxl = 1;
                    return;
                 }

//layout handlers
                。。。。。