Qua loạt bài học kinh nghiệm Razor Pages từ đầu đến giờ bạn đã nắm được rất nhiều kiến thức và kỹ năng mới. Giờ là lúc tất cả chúng ta vận dụng tổng hợp để xử lý một bài toán ( hơi hơi ) trong thực tiễn. Bài học này hướng tới củng cố những gì bạn đã học trong những bài học kinh nghiệm trước đây .Trong bài học kinh nghiệm này tất cả chúng ta sẽ cùng kiến thiết xây dựng một ứng dụng quản trị sách điện tử đơn thuần. Do kiến thức và kỹ năng chưa vừa đủ, tất cả chúng ta sẽ chỉ kiến thiết xây dựng một phần công dụng của ứng dụng, hầu hết là tính năng xuất dữ liệu .Video hướng dẫn và link tải mã nguồn để ở phần Tóm lại .

Mục lục bài viết

Bài toán

Bạn đang đọc: Thực hành (1) Xây dựng ứng dụng quản lý sách (+video) | Tự học ICT

Trong bài học kinh nghiệm này tất cả chúng ta sẽ cùng kiến thiết xây dựng một ứng dụng quản trị sách điện tử đơn thuần .Ứng dụng này hoàn toàn có thể :

(1) xuất ra danh sách các cuốn sách điện tử (file pdf) đang lưu trong một thư mục trên máy chủ;
(2) thêm một cuốn sách mới;
(3) cập nhật thông tin sách;
(4) xóa bỏ sách.

Nói tóm lại, đây là một ứng dụng CRUD dữ liệu cơ bản và rất phổ cập .Bạn sẽ lần lượt triển khai xong ứng dụng này qua những bài thực hành thực tế tổng hợp theo lộ trình học và vận dụng những kiến thức và kỹ năng học được .Trong bài thực hành thực tế tổng hợp tiên phong này bạn sẽ thiết kế xây dựng công dụng thứ nhất : xuất tài liệu .Khi kết thúc bài thực hành thực tế này bạn sẽ thu được một ứng dụng web đơn thuần như sau :

Tạo dự án Bất Động Sản Razor Pages

Hãy triển khai những bước như sau để tạo dự án Bất Động Sản Razor Pages theo template Web Application :Lưu ý ở đây tất cả chúng ta tích chọn thêm hai mục 🙁 1 ) Configure for HTTPS : thông số kỹ thuật để ứng dụng hoạt động giải trí với giao thức HTTPS ( có mã hóa dữ liệu ). Lựa chọn này sẽ tạo ra một chứng từ bảo mật thông tin ( certificate ) giả nhằm mục đích mục tiêu thử nghiệm ứng dụng. Khi chạy thử nghiệm, trình duyệt sẽ đưa ra thông tin bảo mật thông tin. Bạn hãy gật đầu đưa site vào list ngoại lệ .( 2 ) Enable Razor runtime compilation : đây là một tính năng mới của. NET Core 3.1 được cho phép dịch trang razor ngay trong khi ứng dụng đang chạy debug. Một khi bạn lưu lại những đổi khác của trang razor, bạn hoàn toàn có thể refresh trình duyệt để tải lại nội dung mới mà không cần chạy lại ứng dụng từ đầu. Tính năng này giúp giảm bớt thời hạn debug giao diện .

Xem thêm Tổng Hợp Code Kho Báu Huyền Thoại Bản Eng Còn Dùng Được |Sunny Pirates:Going Merry | Jin8sao TV | Kiến thức có ích về trò chơi mới nhất từ Bem2

Tạo domain Model

Tạo thư mục Model thường trực project. Trong thư mục này tạo file Book. cs .Viết code cho Book. cs như sau :

using System;

namespace BookMan.WebApp.Model {
    public class Book {
        public int Id { get; set; }
        public string Title { get; set; } = "A new book";
        public string Authors { get; set; } = "Authors";
        public string Publisher { get; set; } = "Publisher";
        public int Year { get; set; } = DateTime.Now.Year;
        public string Description { get; set; } = "";
    }
}

Bạn hoàn toàn có thể chú ý thấy đây là một POCO ( Plain-Old-C # – Object ) – loại class C # chỉ chứa tài liệu thuộc những kiểu cơ sở. Bạn phải sử dụng POCO để sau này hoàn toàn có thể thao tác với Entity Framework .

Sử dụng Dependency Injection

Dependency Injection ( DI ) là một kỹ thuật khá “ hạng sang ”. Đa số những bạn khi học lập trình đều lạ lẫm với khái niệm này. Do đây không phải là trọng tâm của bài học kinh nghiệm, tất cả chúng ta sẽ không đi vào lý giải chi tiết cụ thể .Tuy nhiên, trong ASP.NET Core, DI lại là loại kỹ thuật được sử dụng rất thông dụng và được tương hỗ mặc định .Cách triển khai DI trong ASP.NET Core rất đơn thuần .

Tạo interface

Trước hết tạo thư mục Interface thường trực project. Trong thư mục này tạo file IRepository. cs .Viết code cho IRepository. cs như sau :

using System.Collections.Generic;

using BookMan.WebApp.Model;

namespace BookMan.WebApp.Interface {
    public interface IRepository {
        public HashSet Books { get; set; }
        public Book Get(int id);
    }
}

Ở đây bạn vừa tạo ra một interface để sử dụng với quy mô repository .

Tạo repository

Tiếp theo tạo thư mục Repository thường trực project. Trong thư mục này tạo thêm file BookRepository. cs .Viết code cho BookRepository. cs như sau :

using System.Collections.Generic;
using System.Linq;

using BookMan.WebApp.Interface;
using BookMan.WebApp.Model;

namespace BookMan.WebApp.Repository {
    public class BookRepository : IRepository {
        public HashSet Books { get; set; } = new HashSet
        {
            new Book {Id = 1, Title = "ASP.NET Core for dummy",Publisher = "Apress", Year = 2018, Authors = "Donald Trump"},
            new Book {Id = 2,  Title = "Professional ASP.NET Core 3",Publisher = "Manning", Year = 2019, Authors = "Bill Clinton"},
            new Book {Id = 3,  Title = "ASP.NET Core Self learning",Publisher = "Wiley", Year = 2017,Authors = "Barack Obama"},
            new Book {Id = 4,  Title = "ASP.NET Core quick course",Publisher = "Linda",Authors = "George Bush"},
            new Book {Id = 5,  Title = "ASP.NET Core Video Course",Publisher = "Linda", Authors = "Vladimir Putin"},
        };
        public Book Get(int id) => Books.SingleOrDefault(b => b.Id == id);
    }
}

Cấu hình DI

Mở file Startup. cs và kiểm soát và điều chỉnh phương pháp ConfigureServices như sau :

public void ConfigureServices(IServiceCollection services) {
    services
        .AddRazorPages()
        .AddRazorRuntimeCompilation();
    services.AddSingleton();
}

Lưu ý bổ trợ hai mục using vào đầu file :

using BookMan.WebApp.Interface;
using BookMan.WebApp.Repository;

Ở đây tất cả chúng ta triển khai hai thông số kỹ thuật mới :AddRazorRuntimeCompilation ( ) – nhu yếu sử dụng công dụng runtime compilation – dịch page khi đang debug .

AddSingleton() – cấu hình cho Dependency Injection. Bạn sẽ nhìn thấy hoạt động của DI khi tạo các page về sau.

Xem thêm: Top 7 ứng dụng chặn tin nhắn và cuộc gọi spam trên điện thoại Android – https://bem2.vn

Xem thêm Phần mềm xem Tivi tốt nhất trên máy tính, laptop

Index page – xuất list

Page Mã Sản Phẩm class

Mở file Index. cshtml.cs và viết code như sau :

using System.Collections.Generic;
using BookMan.WebApp.Interface;
using BookMan.WebApp.Model;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace BookMan.WebApp.Pages {
    public class IndexModel : PageModel {
        private readonly IRepository _repository;
        public HashSet Books => _repository.Books;
        public int Count => _repository.Books.Count;
        public IndexModel(IRepository repository) => _repository = repository;        
    }
}

Đây là một Model class mà bạn đã được học .Ở đây bạn hoàn toàn có thể chú ý thấy hàm tạo của IndexModel có tham số thuộc kiểu IRepository. Giá trị của tham số này sẽ được gán cho hằng _repository. Đây chính là một cách sử dụng của kỹ thuật DI – constructor DI .Hãy nhớ lại trong file Startup. cs tất cả chúng ta đã thông số kỹ thuật cho IRepository “ tương ứng ” với BookRepository .Hiểu đơn thuần như thế này : mỗi khi object của class IndexModel được tạo ra, Razor Pages ( đúng mực hơn là DI Container của Asp. net Core ) sẽ tự động hóa sinh ra một object thuộc kiểu BookRepository và truyền cho hàm tạo này. Chúng ta không cần mất công tự tạo object cho BookRepository nữa .Kỹ thuật này vô cùng có lợi nếu bạn có một số lượng trang rất lớn, và bạn cần sửa chữa thay thế BookRepository bằng một class khác, ví dụ, khi bạn chuyển sang sử dụng một ORM nào đó như Entity Framework hay Entity Framework Core. Khi này bạn chỉ cần sửa chữa thay thế đúng một dòng code trong file Startup. cs .

Giao diện

Điều chỉnh nội dung của file Index. cshtml như sau :

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}


    Welcome to TuHocICT's library !
    
        
            @foreach (var b in Model.Books) {
                
            }
            
            
            
                Tiêu đề
                Tác giả
                Nhà xuất bản
                Năm xuất bản
                
            
            
            
                    @b.Title
                    @b.Authors
                    @b.Publisher
                    @b.Year
                    
                        Details
                    
                
Tổng số sách trong thư viện: @Model.Count

Đây là một file cshtml thường thì mà bạn đã tiếp xúc nhiều lần. Ở đây tất cả chúng ta sử dụng những định dạng css của Bootstrap để giao diện nhìn đàng hoàng hơn một chút ít .Giờ đây nếu chạy ứng dụng bạn sẽ thu được tác dụng như sau :

tin tức chi tiết cụ thể

Chúng ta triển khai thêm công dụng hiển thị thông tin chi tiết cụ thể mỗi khi người dùng click vào đường link .Thêm page Book :Viết code cho Model class trong file Book. cshtml.cs như sau :

using BookMan.WebApp.Interface;
using BookMan.WebApp.Model;

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace BookMan.WebApp.Pages {
    public class BookModel : PageModel {
        public enum Action { Detail, Delete, Update, Create }
        private readonly IRepository _repository;
        public BookModel(IRepository repository) => _repository = repository;
        public Action Job { get; private set; }
        public Book Book { get; private set; }

        public void OnGet(int id) {
            Job = Action.Detail;
            Book = _repository.Get(id);
            ViewData["Title"] = Book == null ? "Book not found!" : $"Detail - {Book.Title}";
        }
    }
}

Trong file này bạn một lần nữa gặp cách sử dụng DI qua constructor của lớp BookModel .

Bạn cũng gặp phương thức OnGet(int id). Đây là phương thức xử lý sự kiện (handler) khi trang được tải bằng truy vấn Get. Bạn sẽ học chi tiết về xử lý sự kiện trong một bài học riêng.

Xem thêm Ứng dụng quét mã vạch sản phẩm tốt nhất trên Android và iOS

ViewData [ “ Title ” ] chứa chuỗi ký tự sử dụng làm tiêu đề của trang. Giá trị của ViewData [ “ Title ” ] được sử dụng trong _Layout. cshtml .Mở file Book. cshtml và viết code như sau :

@page "{id:int?}"
@model BookMan.WebApp.Pages.BookModel


    @switch (Model.Job) {
        case BookModel.Action.Detail:
            template(readOnly: true, errorMessage: "Không tìm thấy cuốn sách bạn yêu cầu.");
            Return
            break;
        case BookModel.Action.Delete:
            break;
        case BookModel.Action.Create:
            break;
        case BookModel.Action.Update:
            break;
    }


@{
    void template(bool readOnly = true, string errorMessage = "") {
        if (Model.Book == null) {
            @ errorMessage
            return;
        }
        
        @ Model. Book. Title
        Tiêu đề
        
        Tác giả
        
        Nhà xuất bản
        
        Năm xuất bản
        
    }
}

Khi nhìn dòng đầu tiên bạn có thể thấy hơi lạ với directive @page "{id:int?}". Đây là cách cấu hình ghi đè routing mặc định trong Razor Pages. Lối viết này báo cho Razor Pages rằng trang Book chấp nhận các Url như /book/, /book/1, /book/2, v.v.. Chúng ta cũng sẽ học chi tiết về ghi đè routing trong một bài học riêng.

Trong file này tất cả chúng ta tạo một hàm cục bộ template với trách nhiệm in ra thông tin chi tiết cụ thể của một cuốn sách ( nếu có ), hoặc in ra thông tin lỗi. Hàm template sử dụng năng lực chuyển đội ngôn từ tự động hóa trong khối code razor. Đọc lại nội dung về code block trong razor nếu bạn không nhớ .

Trang Book có nhiệm vụ xử lý các yêu cầu về từng cuốn sách riêng rẽ, bao gồm xuất thông tin chi tiết, xóa, cập nhật, thêm mới. Tùy vào từng tình huống (căn cứ vào giá trị của property BookModel.Actiontrong cấu trúc switch) sẽ in ra giao diện khác nhau.

Giờ đây nếu chạy ứng dụng và click vào những đường link tương ứng trong list bạn sẽ thu được thông tin cụ thể :Nếu người dùng cố ý để trống phần id trong Url hoặc nhập một Id không sống sót, trang Book sẽ báo lỗi :

Kết luận

Qua bài thực hành này bạn đã xây dựng được một phần chức năng của một phần mềm. Bạn đã thấy cách vận dụng những kiến thức đã học vào giải quyết một bài toán cụ thể. Qua những phần thực hành tổng hợp sau chúng ta sẽ lần lượt hoàn thiện ứng dụng theo mức độ kiến thức và kỹ năng học được.

Xem thêm: Top 7 phần mềm thiết kế đồ họa tốt nhất hiện nay

Bạn hoàn toàn có thể tìm hiểu thêm video hướng dẫn sau :

+ Nếu bạn thấy site hữu ích, trước khi rời đi hãy giúp đỡ site bằng một hành động nhỏ để site có thể phát triển và phục vụ bạn tốt hơn.
+ Nếu bạn thấy bài viết hữu ích, hãy giúp chia sẻ tới mọi người.
+ Nếu có thắc mắc hoặc cần trao đổi thêm, mời bạn viết trong phần thảo luận cuối trang.
Cảm ơn bạn!

Source: https://bem2.vn
Category: Ứng dụng hay

Rate this post