Hướng dẫn nhúng trang template admin vào giao diên asp năm 2024

Để nhanh chóng có được giao diện đẹp mắt, khoa học thì thường sẽ sử dụng và tùy biến từ một thiết kế giao diễn mẫu nào đó, đặc biệt là dành cho trang quản trị admin. Có nhiều mẫu template miễn phí để lựa chọn, dưới đây là vài trường hợp

Gentelella Admin

Mẫu template admin này sử dụng Bootstrap 4 và jQuery .

Start Bootstrap - SB Admin 2

Mẫu template admin này cũng sử dụng Bootstrap 4 và jQuery, phong cách thiết kế Material

Ngoài ra bạn có thể tham khảo các template khác như

• CoreUI Free Bootstrap Admin Template
• Bootflat-Admin
• Free HTML5 Admin Template

Sử dụng tempate SB Admin 2 trong ASP.NET Core

Trong phần này sẽ sủ dụng SB Admin 2 để tích hợp vào các chức năng quản lý của ứng dụng mẫu đã thực hành từ các phần trước , hãy tải mã nguồn ex068-elfinder để tiếp tục phát triển.

SB Admin 2 có sử dụng các thành phần là Bootstrap 4, jQuery,chart.js, fontawesome,jquery-easing. Nên cần đảm bảo có các thành phần này trong dự án.

Với Bootstrap và jQuery mặc định tích hợp trong ASP.NET mẫu đã xây dựng, chart.js ở đây không dùng đến nên chưa cần tích hợp. Còn lại Font Awesome và

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

0 ta tích hợp vào dự án bằng LibMan

Thực hiện lệnh sau:

libman install jquery-easing libman install font-awesome

Với Font Awesome tham khảo Awesome Icons để biết các icon dùng như thế nào

Như vậy các thành phần đã có, hãy truy cập sb-admin-2, bấm vào Free Download để tải về SB Admin 2, giải nén để có mã nguồn, từ đây ta sẽ tích hợp dần nó vào trang.

Bước đầu tiên hãy tạo trong dự án ASP.NET thư mục

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

1, copy hai thư mục

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

2 và

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

3 từ nguồn tải về vào thư mục mới tạo ra trên.

Tích hợp SB Admin cho trang Login

Trang Login, Logout, Quyên mật khẩu, Đăng ký mà ta đã xây dựng từ ví dụ trước sử dụng Identity, đối với SB Admin nó cùng cấu trúc - trang không có phần side bar, menu bar ... nên nhưng trang này ta xây dựng cùng một Layout.

Hình thức của chúng đều có dạng như sau: login.html

HTML để tùy biến - xuất phát từ đây xây dựng Layout có nội dung tại: code login.html

Từ tham khảo code index.html, ta xây dựng một file Layout dùng chung cho các trang đăng nhập, đăng ký, quyên mật khẩu, layout tại file

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

4, có nội dung đầy đủ tại Views/Shared/Admin/_LoginLayout.cshtml

Layout này dựa theo Login.html, có nạp các CSS về Awesome Font, font Nunito từ Google, đồng thời cũng nạp

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

5 từ thư mục thiết lập của dự án.

Cập nhật Areas/Identity/Pages/Account/Login.cshtml

Mở Login.cshtml ra, cập nhật lại cho phù hợp với Layout mới, nội dung cập nhật đầy đủ tại Areas/Identity/Pages/Account/Login.cshtml

Để ý, file này có thiết lập sử dụng layout _LoginLayout.cshtml trên. Kết quả trang Login lúc này sẽ là:

Cập nhật Areas/Identity/Pages/Account/Register.cshtml

Mở Register.cshtml ra, cập nhật lại cho phù hợp với Layout mới, nội dung cập nhật đầy đủ tại Areas/Identity/Pages/Account/Register.cshtml

Kết quả trang Login lúc này sẽ là:

Cập nhật Areas/Identity/Pages/Account/ForgotPassword.cshtml

Trang này xây dụng có hình thức giống forgot-password.html

Mở mã nguồn ForgotPassword.cshtml, cập nhật thành Areas/Identity/Pages/Account/ForgotPassword.cshtml

Tương tự cập nhật cho các trang sử dụng Layout này:

• Views/Shared/Components/MessagePage/Default.cshtml
• AccessDenied.cshtml
• RegisterConfirmation.cshtml
• ConfirmEmail.cshtml
• ...

Tùy biến trang User Manager

Các các phần trước về Identity đã có xây dựng chức năng để một User quản lý và cập nhật tài khoản của mình Quản lý tài khoản cá nhân, chức năng này xây dựng theo Razor Page và đã tích hợp vào ASP.NET MVC ở website mẫu MVCBlog, giờ ta sẽ tùy biến chúng sử dụng template SB Admin

Template những trang này xây dựng có cấu trúc dạng: Blank.html

Mã nguồn để tùy biến tại: code html Blank.html

Phân tích trang này, ta có thể tùy biến nó thành Layout với ba khu vực chính mà ta sẽ chuyển chúng thành các Section gồm phần bên trái SideBar, phần TopBar, còn lại là nội dung.

Tạo ra layout

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

6 với nôi dung đầy đủ: Views/Shared/Admin/_Layout.cshtml

Mở file

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

7 thiết lập nó sẽ sử dụng layout vừa tạo trên, toàn bộ sửa đổi thành: Areas/Identity/Pages/Account/Manage/_Layout.cshtml

TopBar

Phần Section

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

8 được xây dựng tại file

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

9, nội dung đầy đủ tại _TopBar.cshtml. Cở bản phần này hiện thị User đăng nhập và menu thả xuống để đăng xuất.

SideBar

Phần này ta xây dựng để xuất hiện menu chọn đến các chức năng quản lý User, cũng như các tính năng đã xây dựng ở phần trước như quản lý Role, quản lý Category và Post.

Section này nạp file

@{

Layout = "_Layout.cshtml";  

Bằng cách như vậy, ta có được giao diện khi truy cập quản lý tài khoản cá nhân

Tùy biến layout cho trang quản lý Role

Vẫn thiết lập để sử dụng layout

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

6 cho các trang thuộc

@{

Layout = "_Layout.cshtml";  

@{

Layout = "_Layout.cshtml";  

@{

Layout = "/Views/Shared/Admin/_Layout.cshtml";  

@await Html.PartialAsync("/Views/Shared/Admin/_TopBar.cshtml")  

<partial name="/Areas/Admin/Pages/Role/_SideBar.cshtml" />  

@RenderSection("Scripts", required: false)  

Tiếp theo

@{

Layout = "_Layout.cshtml";  

@{

Layout = "_Layout.cshtml";  

@{

Layout = "_Layout.cshtml";  

@{

Layout = "_Layout.cshtml";  

Làm tương tự cho các trang thuộc

@{

Layout = "_Layout.cshtml";  

Tùy biến layout cho trang quản lý Post, Category

Trước tiên tùy biến Layout cho các View thuộc Controller - PostController. Tạo trong thư mục

@{

Layout = "_Layout.cshtml";  

@{

Layout = "_Layout.cshtml";