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?

總結

以上是生活随笔為你收集整理的ASP.Net Core Razor 部署AdminLTE框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。