Blazor App with CRUD operation using Model Classes

In this course we will discuss Book Management System that allows us to perform CRUD (Create,Read,Update,Delete) operation on books.

Basic Requirement VS2019 (Link given in video description)

• ASP.NET and Web development workload
• .NET Core 3.0 SDK
• Basic knowledge of ASP.NET Core, C#, HTML

Suggested Videos 
Part-5 Blazor Application Structure
Part-6 Blazor Component
Part-9 Blazor Component Split

Step-1 Open Visual Studio 2019

Step-2 Create new Blazor App project with Web Server App Template with name "BookManagement.Web"

Step-3 Delete Unnecessary files and folder also delete Counter, Weather and About link from the menu and layout view in share folder as shown below. Also remove the Data folder reference from the application and you will not do that then visual studio display an error for that.

Step-4 Add .NET Standard Library project with name "BookManagement.Models" because we can use it later in out RESTful API course as well. So Stay connected and follow with us. Also add the "BookManagement.Models" reference in the BookManagement.Web project.

Step-5 Add all the basic required classes for Book Management System. We need models like
Book. Subject, Author class files. Create all the classes with below code.

// Book class
public class Book
{
    public int BookId { get; set; }
    public string BookTitle { get; set; }
    public string Standard { get; set; }
    public Subject Subject { get; set; }
    public Author Author { get; set; }
}

// Subject Enum
public enum Subject
{
    Physics,
    Chemistry,
    Maths
}

// Author Class
public class Author
{
    public int AuthorId { get; set; }
    public string AuthorName { get; set; }
}

Step-6 Add Razor Component with name "BookList.razor" in pages folder

Step-7 Use Base class file split concept for split code and html

Step-8 Create base class in the Pages folder with BoolListBase.cs as shown below carefully use the ComponentBase class as well.

Step-9 Go back to the BoolList.razor component and Add the page directive with @page "/" and @inherits BoolListBase and Add the below piece of code for traverse all the elements

Step-10 Go to BoolListBase.cs class and paste the below code of C# in which simply we are creating List of books object and override the ComponentBase method of Blazor request processing pipeline.

Step-11 Save all the changes and Run the project.

Good Luck!

Click below to see the full video steps in Action.