1、AdminLTE

一个基于 bootstrap 的轻量级后台模板

2、AdminLTE 文档

在线中文Demo：http://adminlte.la998.com/

在线中文文档：http://adminlte.la998.com/documentation/index.html

Github：https://github.com/almasaeed2010/AdminLTE/releases

3、AdminLTE 布局

AdminLTE依赖于两个主要框架：JQ和Bootstrap，其他插件可以按需增加。

从文档可以知道，使用AdminLTE主要有四个部分：

• 包装.wrapper。包裹整个网站的div。

• 主标题.main-header。包含徽标和导航栏。

• 边栏.sidebar-wrapper。包含用户面板和侧边栏菜单。

• 内容.content-wrapper。包含页眉和内容。

在文档中，可以找到下载地址，本文示例是使用最新的版本V2.4.5。

4、Asp.Net Core Razor

新建项目Asp.net Core Web应用程序，默认就是Razor Pages，然后添加相应的模块，

如图：本文使用的SDK版本为：dotNet Core 2.1。

5、First

在Asp.Net Core项目中，引用AdminLTE，在wwwroot仅添加如图三个文件夹即可：

• bower_components  基本组件。

• dist  adminlte的主要文件。

• plugins 其他插件。

6、Second

在_Layout.cshtml文件中添加引入相关文件：

在body中，添加js：

sidebarskins.js是个人汉化的侧边栏皮肤，框架包里不存在

7、Third

开始使用AdminLTE

最后就可以运行项目来预览一下效果了：

移动端的效果：

需要注意的是，点击这个小图标可以实现左侧边栏收缩展开的功能，当只有侧边栏可以正常收缩展开但Logo无动于衷的时候，

你可能是少了【sidebar-mini】样式和【logo-mini】logo小图的引用

8、添加一个登陆

登录界面写得比较简约，在Pages文件夹中，添加一个Razor界面

在Startup中引入Authentication身份验证：

Configure方法内调用

在Login.cshtml.cs中增加一个OnPostAsync的方法：

userService和CookieService都是在业务层定义的，gayhub会在文章末尾。

在.Net Core Razor中，xx.cshtml.cs中默认触发的是Get和Post方法，

• OnGet

• OnPost

• OnGetAsync

• OnPostAsync

如果是需要自定义的，举个栗子，定义为：OnPostLoginAsync，然后在Form表单提交的【按钮】增加asp-page-handler="Login"，

详细的推荐大家阅读这篇文章：ASP.NET Core - Razor页面之Handlers处理方法。

接着，然后再Index和需要身份验证的地方都加上Authorize特性即可：

9、踩坑

一、Ajax Post请求， 400 Bad Request

折腾许久，原因是Razor被设计为可以自动防止跨站请求伪造（CSRF / XSRF）攻击。你不必编写任何其他代码。Razor页面中自动包含防伪令牌生成和验证。

这里请求失败，是因为POST没有提交AntiForgeryToken。

解决方法：

1.增加"XSRF-TOKEN"标识到框架中

//增加了"XSRF-TOKEN"标识,值为表单自动生成的防伪标记
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

2.页面*.cshtml头部加上 

3.ajax引入

然后既可以正常访问Handler

二、DataTables参数实例加说明

10、Banana

Demo中会使用到这两个个人封装的组件：

Banana.Uow是基于Dapper封装的工作单元和仓储；

Banana.Utility是常用的工具类，有Redis，加解密，拼音等等；

原文地址：https://www.cnblogs.com/zyg316/p/10953831.html

.NET社区新闻，深度好文，欢迎访问公众号文章汇总 http://www.csharpkit.com