Web Application Development Tutorial - Part 3: Creating, Updating and Deleting Books
About This Tutorial
In this tutorial series, you will build an ABP based web application named Acme.BookStore
. This application is used to manage a list of books and their authors. It is developed using the following technologies:
- MongoDB as the database provider.
- Blazor as the UI Framework.
This tutorial is organized as the following parts;
- Part 1: Creating the project and book list page
- Part 2: The book list page
- Part 3: Creating, updating and deleting books (this part)
- Part 4: Integration tests
- Part 5: Authorization
- Part 6: Authors: Domain layer
- Part 7: Authors: Database Integration
- Part 8: Authors: Application Layer
- Part 9: Authors: User Interface
- Part 10: Book to Author Relation
Download the Source Code
This tutorial has multiple versions based on your UI and Database preferences. We've prepared a few combinations of the source code to be downloaded:
Creating a New Book
In this section, you will learn how to create a new modal dialog form to create a new book. Since we've inherited from the BlazoriseCrudPage
, we only need to develop the view part.
Add "New Button" Button
Open the Books.razor
and replace the <CardHeader>
section with the following code:
This will change the card header by adding a "New book" button to the right side:
Now, we can add a modal that will be opened when we click to the button.
Book Creation Modal
Open the Books.razor
and add the following code to the end of the page:
CreateModal
object,CloseCreateModalAsync
andCreateEntityAsync
method are defined by the base class. See the Blazorise documentation if you want to understand theModal
and the other components.
That's all. Run the application and try to add a new book:
Updating a Book
Editing a books is similar to the creating a new book.
Actions Dropdown
Open the Books.razor
and add the following DataGridColumn
section inside the DataGridColumns
as the first item:
OpenEditModalAsync
is defined in the base class which takes theId
of the entity (book) to edit.
This adds an "Actions" dropdown to all the books inside the DataGrid
with an Edit
action:
Edit Modal
We can now define a modal to edit the book. Add the following code to the end of the Books.razor
page:
AutoMapper Configuration
The base BlazoriseCrudPage
uses the object to object mapping system to convert an incoming BookDto
object to a CreateUpdateBookDto
object. So, we need to define the mapping.
Open the BookStoreBlazorAutoMapperProfile
inside the Acme.BookStore.Blazor
project and change the content as the following:
- We've just added the
CreateMap<BookDto, CreateUpdateBookDto>();
line to define the mapping.
Test the Editing Modal
You can now run the application and try to edit a book.
Deleting a Book
Open the Books.razor
page and add the following DropdownItem
under the "Edit" action inside the "Actions" DropdownMenu
:
DeleteEntityAsync
is defined in the base class.
Run the application and try to delete a book.
Full CRUD UI Code
Here the complete code to create the book management CRUD page, that has been developed in the last two parts:
The Next Part
See the next part of this tutorial.