Web Application Development Tutorial - Part 3: Creating, Updating and Deleting Books

    • Entity Framework Core as the ORM provider.
    • MVC / Razor Pages as the UI Framework.

    This tutorial is organized as the following parts;

    This tutorial has multiple versions based on your UI and Database preferences. We’ve prepared two combinations of the source code to be downloaded:

    Video Tutorial

    This part is also recorded as a video tutorial and published on YouTube.

    In this section, you will learn how to create a new modal dialog form to create a new book. The modal dialog will look like in the image below:

    Create a new razor page, named CreateModal.cshtml under the Pages/Books folder of the Acme.BookStore.Web project.

    bookstore-add-create-dialog

    CreateModal.cshtml.cs

    Open the CreateModal.cshtml.cs file (CreateModalModel class) and replace with the following code:

    • This class is derived from the BookStorePageModel instead of standard PageModel. BookStorePageModel indirectly inherits the PageModel and adds some common properties & methods that can be shared in your page model classes.
    • [BindProperty] attribute on the Book property binds post request data to this property.
    • This class simply injects the IBookAppService in the constructor and calls the CreateAsync method in the OnPostAsync handler.
    • It creates a new CreateUpdateBookDto object in the OnGet method. ASP.NET Core can work without creating a new instance like that. However, it doesn’t create an instance for you and if your class has some default value assignments or code execution in the class constructor, they won’t work. For this case, we set default values for some of the CreateUpdateBookDto properties.

    CreateModal.cshtml

    Open the CreateModal.cshtml file and paste the code below:

    1. @page
    2. @using Acme.BookStore.Localization
    3. @using Acme.BookStore.Web.Pages.Books
    4. @using Microsoft.Extensions.Localization
    5. @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
    6. @model CreateModalModel
    7. @inject IStringLocalizer<BookStoreResource> L
    8. @{
    9.     Layout = null;
    10. }
    11. <abp-dynamic-form abp-model="Book" asp-page="/Books/CreateModal">
    12.     <abp-modal>
    13.         <abp-modal-header title="@L["NewBook"].Value"></abp-modal-header>
    14.         <abp-modal-body>
    15.             <abp-form-content />
    16.         </abp-modal-body>
    17.         <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    18.     </abp-modal>
    19. </abp-dynamic-form>
    • This modal uses abp-dynamic-form to automatically create the form from the CreateBookViewModel model class.
    • abp-model attribute indicates the model object where it’s the Book property in this case.
    • abp-form-content tag helper is a placeholder to render the form controls (it is optional and needed only if you have added some other content in the abp-dynamic-form tag, just like in this page).

    Add the “New book” Button

    1. <abp-card-header>
    2.     <abp-row>
    3.         <abp-column size-md="_6">
    4.             <abp-card-title>@L["Books"]</abp-card-title>
    5.         </abp-column>
    6.         <abp-column size-md="_6" class="text-right">
    7.             <abp-button id="NewBookButton"
    8.                         text="@L["NewBook"].Value"
    9.                         icon="plus"
    10.                         button-type="Primary"/>
    11.         </abp-column>
    12.     </abp-row>
    13. </abp-card-header>

    The final content of the Index.cshtml is shown below:

    1. @page
    2. @using Acme.BookStore.Localization
    3. @using Acme.BookStore.Web.Pages.Books
    4. @using Microsoft.Extensions.Localization
    5. @model IndexModel
    6. @inject IStringLocalizer<BookStoreResource> L
    7. @section scripts
    8. {
    9.     <abp-script src="/Pages/Books/Index.js"/>
    10. }
    12. <abp-card>
    13.     <abp-card-header>
    14.         <abp-row>
    15.             <abp-column size-md="_6">
    16.                 <abp-card-title>@L["Books"]</abp-card-title>
    17.             </abp-column>
    18.             <abp-column size-md="_6" class="text-right">
    19.                 <abp-button id="NewBookButton"
    20.                             text="@L["NewBook"].Value"
    21.                             icon="plus"
    22.                             button-type="Primary"/>
    23.             </abp-column>
    24.         </abp-row>
    25.     </abp-card-header>
    26.     <abp-card-body>
    27.         <abp-table striped-rows="true" id="BooksTable"></abp-table>
    28.     </abp-card-body>
    29. </abp-card>

    This adds a new button called New book to the top-right of the table:

    Open the Pages/Books/Index.js and add the following code just after the Datatable configuration:

    • abp.ModalManager is a helper class to manage modals in the client side. It internally uses Twitter Bootstrap’s standard modal, but abstracts many details by providing a simple API.
    • createModal.onResult(...) used to refresh the data table after creating a new book.
    • createModal.open(); is used to open the model to create a new book.

    The final content of the Index.js should be like that:

    1. $(function () {
    2.     var l = abp.localization.getResource('BookStore');
    4.     var dataTable = $('#BooksTable').DataTable(
    5.         abp.libs.datatables.normalizeConfiguration({
    6.             serverSide: true,
    7.             order: [[1, "asc"]],
    8.             searching: false,
    9.             scrollX: true,
    10.             ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
    11.             columnDefs: [
    12.                 {
    13.                     title: l('Name'),
    14.                     data: "name"
    15.                 },
    16.                 {
    17.                     title: l('Type'),
    18.                     data: "type",
    20.                         return l('Enum:BookType:' + data);
    21.                     }
    22.                 },
    23.                 {
    24.                     title: l('PublishDate'),
    25.                     data: "publishDate",
    26.                     render: function (data) {
    27.                         return luxon
    28.                             .DateTime
    29.                             .fromISO(data, {
    30.                                 locale: abp.localization.currentCulture.name
    31.                             }).toLocaleString();
    32.                     }
    33.                 },
    34.                 {
    35.                     title: l('Price'),
    36.                     data: "price"
    37.                 },
    38.                 {
    39.                     title: l('CreationTime'), data: "creationTime",
    40.                     render: function (data) {
    41.                         return luxon
    42.                             .DateTime
    43.                             .fromISO(data, {
    44.                                 locale: abp.localization.currentCulture.name
    45.                             }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
    46.                     }
    47.                 }
    48.             ]
    49.         })
    50.     );
    52.     var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
    54.     createModal.onResult(function () {
    55.         dataTable.ajax.reload();
    56.     });
    58.     $('#NewBookButton').click(function (e) {
    59.         e.preventDefault();
    60.         createModal.open();
    61.     });
    62. });

    Now, you can run the application and add some new books using the new modal form.

    Create a new razor page, named EditModal.cshtml under the Pages/Books folder of the Acme.BookStore.Web project:

    bookstore-add-edit-dialog

    Open the EditModal.cshtml.cs file (EditModalModel class) and replace with the following code:

    1. using System;
    2. using System.Threading.Tasks;
    3. using Acme.BookStore.Books;
    4. using Microsoft.AspNetCore.Mvc;
    6. namespace Acme.BookStore.Web.Pages.Books
    7. {
    8.     public class EditModalModel : BookStorePageModel
    9.     {
    10.         [HiddenInput]
    11.         [BindProperty(SupportsGet = true)]
    12.         public Guid Id { get; set; }
    14.         [BindProperty]
    15.         public CreateUpdateBookDto Book { get; set; }
    17.         private readonly IBookAppService _bookAppService;
    19.         public EditModalModel(IBookAppService bookAppService)
    20.         {
    21.             _bookAppService = bookAppService;
    22.         }
    24.         public async Task OnGetAsync()
    25.         {
    26.             var bookDto = await _bookAppService.GetAsync(Id);
    27.             Book = ObjectMapper.Map<BookDto, CreateUpdateBookDto>(bookDto);
    28.         }
    30.         public async Task<IActionResult> OnPostAsync()
    31.         {
    32.             await _bookAppService.UpdateAsync(Id, Book);
    33.             return NoContent();
    34.         }
    35.     }
    36. }
    • [HiddenInput] and [BindProperty] are standard ASP.NET Core MVC attributes. SupportsGet is used to be able to get Id value from query string parameter of the request.
    • In the OnGetAsync method, we get BookDto from the BookAppService and this is being mapped to the DTO object CreateUpdateBookDto.
    • The OnPostAsync uses BookAppService.UpdateAsync(...) to update the entity.

    Mapping from BookDto to CreateUpdateBookDto

    To be able to map the BookDto to CreateUpdateBookDto, configure a new mapping. To do this, open the BookStoreWebAutoMapperProfile.cs in the Acme.BookStore.Web project and change it as shown below:

    1. using AutoMapper;
    3. namespace Acme.BookStore.Web
    4. {
    5.     public class BookStoreWebAutoMapperProfile : Profile
    6.     {
    7.         public BookStoreWebAutoMapperProfile()
    8.         {
    9.             CreateMap<BookDto, CreateUpdateBookDto>();
    10.         }
    11.     }
    • We have just added CreateMap<BookDto, CreateUpdateBookDto>(); to define this mapping.

    Replace EditModal.cshtml content with the following content:

    This page is very similar to the CreateModal.cshtml, except:

    • It includes an abp-input for the Id property to store of the editing book (which is a hidden input).
    • It uses Books/EditModal as the post URL.

    Add “Actions” Dropdown to the Table

    We will add a dropdown button to the table named Actions.

    Open the Pages/Books/Index.js and replace the content as below:

    1. $(function () {
    2.     var l = abp.localization.getResource('BookStore');
    3.     var createModal = new abp.ModalManager(abp.appPath + 'Books/CreateModal');
    4.     var editModal = new abp.ModalManager(abp.appPath + 'Books/EditModal');
    6.     var dataTable = $('#BooksTable').DataTable(
    7.         abp.libs.datatables.normalizeConfiguration({
    8.             serverSide: true,
    9.             paging: true,
    10.             order: [[1, "asc"]],
    11.             searching: false,
    12.             scrollX: true,
    13.             ajax: abp.libs.datatables.createAjax(acme.bookStore.books.book.getList),
    14.             columnDefs: [
    15.                 {
    16.                     title: l('Actions'),
    17.                     rowAction: {
    18.                         items:
    19.                             [
    20.                                 {
    21.                                     text: l('Edit'),
    22.                                     action: function (data) {
    23.                                         editModal.open({ id: data.record.id });
    24.                                     }
    25.                                 }
    26.                             ]
    27.                     }
    28.                 },
    29.                 {
    30.                     title: l('Name'),
    31.                     data: "name"
    32.                 },
    33.                 {
    34.                     title: l('Type'),
    35.                     data: "type",
    36.                     render: function (data) {
    37.                         return l('Enum:BookType:' + data);
    38.                     }
    39.                 },
    40.                 {
    41.                     title: l('PublishDate'),
    42.                     data: "publishDate",
    43.                     render: function (data) {
    44.                         return luxon
    45.                             .DateTime
    46.                             .fromISO(data, {
    47.                                 locale: abp.localization.currentCulture.name
    48.                             }).toLocaleString();
    49.                     }
    50.                 },
    51.                 {
    52.                     title: l('Price'),
    53.                     data: "price"
    54.                 },
    55.                 {
    56.                     title: l('CreationTime'), data: "creationTime",
    57.                     render: function (data) {
    58.                         return luxon
    59.                             .DateTime
    60.                             .fromISO(data, {
    61.                                 locale: abp.localization.currentCulture.name
    62.                             }).toLocaleString(luxon.DateTime.DATETIME_SHORT);
    63.                     }
    64.                 }
    65.             ]
    66.         })
    67.     );
    69.     createModal.onResult(function () {
    70.         dataTable.ajax.reload();
    71.     });
    73.     editModal.onResult(function () {
    74.         dataTable.ajax.reload();
    75.     });
    77.     $('#NewBookButton').click(function (e) {
    78.         e.preventDefault();
    79.         createModal.open();
    80.     });
    81. });
    • Added a new ModalManager named editModal to open the edit modal dialog.
    • Added a new column at the beginning of the columnDefs section. This column is used for the “Actions“ dropdown button.
    • “Edit“ action simply calls editModal.open() to open the edit dialog.
    • editModal.onResult(...) callback refreshes the data table when you close the edit modal.

    You can run the application and edit any book by selecting the edit action on a book.

    The final UI looks as below:

    Open the Pages/Books/Index.js and add a new item to the rowAction items:

    1. {
    2.     text: l('Delete'),
    3.     confirmMessage: function (data) {
    4.         return l('BookDeletionConfirmationMessage', data.record.name);
    5.     },
    6.     action: function (data) {
    7.         acme.bookStore.books.book
    8.             .delete(data.record.id)
    9.             .then(function() {
    10.                 abp.notify.info(l('SuccessfullyDeleted'));
    11.                 dataTable.ajax.reload();
    12.             });
    13.     }
    14. }
    • confirmMessage option is used to ask a confirmation question before executing the action.
    • acme.bookStore.books.book.delete(...) method makes an AJAX request to the server to delete a book.
    • abp.notify.info() shows a notification after the delete operation.

    Since we’ve used two new localization texts (BookDeletionConfirmationMessage and SuccessfullyDeleted) you need to add these to the localization file (en.json under the Localization/BookStore folder of the Acme.BookStore.Domain.Shared project):

    1. "BookDeletionConfirmationMessage": "Are you sure to delete the book '{0}'?",

    The final Index.js content is shown below:

    See the next part of this tutorial.