BÀI THỰC HÀNH 09+10: PHÁT TRIỂN ỨNG DỤNG WEB

CÁCH TÍCH HỢP TRÌNH QUẢN LÝ TỆP ELFINDER VÀ SUMMERNOTE EDITOR

VÀO NET CORE
Mục đích:
- Thêm trình quản lý tệp elFinder và bô soạn thảo nội dung Sumernote vào asp.net core cho bài viết.
Chuẩn bị:
- Hoàn thành: Thực hành 08
- Làm tương tự bài thực hành số 08 cho bảng Post
A. Nội dung 1 (bài thực hành 09)
- Tạo trang quản lý bài viết (nhập/sửa/xóa thông tin trong bảng Post) tương tự như quản lý menu trong bài thực
hành 08.
- Các trường cần nhập thông tin:
+ Title
+ Abstract
+ Contents
+ Images
+ Link
+ PostOrder
+ MenuID (làm dropdown tương tự bài Menu)
+ IsActive (Làm checkbox tương tự bài Menu)
+ Mặc định cho CreateDate là ngày tháng năm hiện tại.
+ Mặc định cho Category và Status là 1.
Hướng dẫn:
Đoạn sau hướng dẫn thêm bài viết (Create), hiển thị, sửa và xóa tương tự bài thực hành 08 cho Menu
Bước 1: Tạo controller có tên PostController.cs

1
2
Bước 2: Trong tệp Functions.cs ở thư mục Ultilities thêm hàm getCurrentDate() như sau

Bước 3: tạo View cho action Create trong controller PostController.cs

- Nhấp chuột phải vào action Create trong PostController.cs chọn add View, đặt tên Create

3
B. Nội dung 2 (bài thực hành 10)
- Thêm Thêm trình quản lý tệp elFinder và bô soạn thảo nội dung Sumernote vào asp.net core cho bài viết.
Hướng dẫn:
- Tham khảo link phía dưới (tuần sau sẽ có hướng dẫn cụ thể)
https://xuanthulab.net/asp-net-core-mvc-tich-hop-trinh-quan-ly-file-vao-website.html
https://www.c4.edu.vn/posts/cach-tich-hop-trinh-quan-ly-file-elfinder-vao-net-core.html

Bước 1. Tải tệp thư viện cho elFinder và summernote, về giải nén và đưa vào thư mục
wwwroot/admin
+ Link: Tải tệp nén
+ Sau khi giải nén ta có thư mục lib trong admin như sau

4
Có thể xem các bước tiếp theo ở link dưới (cần copy một số thông tin)
https://www.c4.edu.vn/posts/cach-tich-hop-trinh-quan-ly-file-elfinder-vao-net-core.html
Bước 2: Cài đặt elFinder.NetCore phiên bản mới nhất (hiện tại là 1.3.6) trong NuGet

Bước 3: Tạo 1 controller tên là FileSystemController.cs (có thể copy ở link trên rồi
sửa lại cho phù hợp) trong thư mục Controllers của Admin
- Chỉnh sửa lại chỗ đánh dấu đỏ cho phù hợp trong trường hợp copy

5
6
Bước 4: Tạo 1 Controller tên FileManagerController.cs trong thư mục Controllers của
Admin (để ý vùng đánh dấu đỏ nếu copy)

Bước 5: Tạo thư mục files trong thư mục wwwroot để lưu trữ thông tin tệp sau này
upload

7
Bước 6: Tạo View bằng cách Right-Click vào tên Index trong FileManagerController
chọn AddView như hình:

Bước 7. Thêm vào nội dung View như sau:

Chú ý:
- Có thể copy theo nội dung ở link trên
- Chỉnh sửa lại một số vùng đánh dấu cho phù hợp với bài

8
Bước 8: Chạy thử, gõ thêm /Admin/file-manager sau địa chỉ để xem kết quả
Ví dụ:
https://localhost:7123/Admin/file-manager

9
Ta có:

Sử dụng Summernote và elFinder trong ASP.NET CORE MVC

Ghi chú: Có thể copy một số nội dung từ trang này.
https://xuanthulab.net/asp-net-core-mvc-tich-hop-trinh-quan-ly-file-vao-website.html
Hướng dẫn:
Bước 1: Trong thư mục Models của Admin tạo class có tên SummerNote.cs

10
Bước 2: Trong thư mục Admin/Views/Shared tạo view có tên _SummerNote.cshtml

11
Nội dung của _SummerNote.cshtml (một phần có thể copy trên link), chú ý những chỗ
đánh dấu đỏ

12
13
Bước 3: Lời gọi summernote
- Mở View Create.cshtml trong thư mục Admin/Views/Post

14
- Thêm vào cuối cùng nội dung sau (chèn sau thẻ </main>)

Bước 4: Chạy thử:

15