ASP.Net Core Razor 部署AdminLTE框架

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-essay-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，加解密，拼音等等；