Web Application Development Tutorial - Part 9: Authors: User Interface
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:
- Entity Framework Core as the database provider.
- MVC / Razor Pages as the UI Framework.
This tutorial is organized as the following parts;
- Part 1: Creating the server side
- Part 2: The book list page
- Part 3: Creating, updating and deleting books
- 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 (this part)
- 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:
If you encounter the "filename too long" or "unzip" error on Windows, please see this guide.
Introduction
This part explains how to create a CRUD page for the Author
entity introduced in the previous parts.
The Authors List Page
Create a new razor page, Index.cshtml
under the Pages/Authors
folder of the Acme.BookStore.Web
project and change the content as given below.
Index.cshtml
This is a simple page similar to the Books page we had created before. It imports a JavaScript file which will be introduced below.
IndexModel.cshtml.cs
Index.js
Briefly, this JavaScript page;
- Creates a Data table with
Actions
,Name
andBirthDate
columns.Actions
column is used to add Edit and Delete actions.BirthDate
provides arender
function to format theDateTime
value using the luxon library.
- Uses the
abp.ModalManager
to open Create and Edit modal forms.
This code is very similar to the Books page created before, so we will not explain it more.
Localizations
This page uses some localization keys we need to declare. Open the en.json
file under the Localization/BookStore
folder of the Acme.BookStore.Domain.Shared
project and add the following entries:
Notice that we've added more keys. They will be used in the next sections.
Add to the Main Menu
Open the BookStoreMenuContributor.cs
in the Menus
folder of the Acme.BookStore.Web
project and add a new Authors menu item under the Book Store menu item. The following code (in the ConfigureMainMenuAsync
method) shows the final code part:
Run the Application
Run and login to the application. You can not see the menu item since you don't have permission yet. Go to the Identity/Roles
page, click to the Actions button and select the Permissions action for the admin role:
As you see, the admin role has no Author Management permissions yet. Click to the checkboxes and save the modal to grant the necessary permissions. You will see the Authors menu item under the Book Store in the main menu, after refreshing the page:
The page is fully working except New author and Actions/Edit since we haven't implemented them yet.
Tip: If you run the
.DbMigrator
console application after defining a new permission, it automatically grants these new permissions to the admin role and you don't need to manually grant the permissions yourself.
Create Modal
Create a new razor page, CreateModal.cshtml
under the Pages/Authors
folder of the Acme.BookStore.Web
project and change the content as given below.
CreateModal.cshtml
We had used dynamic forms of the ABP Framework for the books page before. We could use the same approach here, but we wanted to show how to do it manually. Actually, not so manually, because we've used abp-input
tag helper in this case to simplify creating the form elements.
You can definitely use the standard Bootstrap HTML structure, but it requires to write a lot of code. abp-input
automatically adds validation, localization and other standard elements based on the data type.
CreateModal.cshtml.cs
This page model class simply injects and uses the IAuthorAppService
to create a new author. The main difference between the book creation model class is that this one is declaring a new class, CreateAuthorViewModel
, for the view model instead of re-using the CreateAuthorDto
.
The main reason of this decision was to show you how to use a different model class inside the page. But there is one more benefit: We added two attributes to the class members, which were not present in the CreateAuthorDto
:
- Added
[DataType(DataType.Date)]
attribute to theBirthDate
which shows a date picker on the UI for this property. - Added
[TextArea]
attribute to theShortBio
which shows a multi-line text area instead of a standard textbox.
In this way, you can specialize the view model class based on your UI requirements without touching to the DTO. As a result of this decision, we have used ObjectMapper
to map CreateAuthorViewModel
to CreateAuthorDto
. To be able to do that, you need to add a new mapping code to the BookStoreWebAutoMapperProfile
constructor:
"New author" button will work as expected and open a new model when you run the application again:
Edit Modal
Create a new razor page, EditModal.cshtml
under the Pages/Authors
folder of the Acme.BookStore.Web
project and change the content as given below.
EditModal.cshtml
EditModal.cshtml.cs
This class is similar to the CreateModal.cshtml.cs
while there are some main differences;
- Uses the
IAuthorAppService.GetAsync(...)
method to get the editing author from the application layer. EditAuthorViewModel
has an additionalId
property which is marked with the[HiddenInput]
attribute that creates a hidden input for this property.
This class requires to add two object mapping declarations to the BookStoreWebAutoMapperProfile
class:
That's all! You can run the application and try to edit an author.
The Next Part
See the next part of this tutorial.