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
。。。。。