歡迎光臨
每天分享高質量文章

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,加解密,拼音等等;

赞(0)

分享創造快樂