Web Application Development Tutorial - Part 10: Book to Author Relation

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 ORM provider.
  • MVC / Razor Pages as the UI Framework.

This tutorial is organized as the following parts;

Download the Source Code

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

Introduction

We have created Book and Author functionalities for the book store application. However, currently there is no relation between these entities.

In this tutorial, we will establish a 1 to N relation between the Book and the Author.

Add Relation to The Book Entity

Open the Books/Book.cs in the Acme.BookStore.Domain project and add the following property to the Book entity:

  1. public Guid AuthorId { get; set; }

In this tutorial, we preferred to not add a navigation property to the Author entity (like public Author Author { get; set; }). This is due to follow the DDD best practices (rule: refer to other aggregates only by id). However, you can add such a navigation property and configure it for the EF Core. In this way, you don’t need to write join queries while getting books with their entities (just like we will done below) which makes your application code simpler.

Database & Data Migration

Added a new, required AuthorId property to the Book entity. But, what about the existing books on the database? They currently don’t have AuthorIds and this will be a problem when we try to run the application.

This is a typical migration problem and the decision depends on your case;

  • If you haven’t published your application to the production yet, you can just delete existing books in the database, or you can even delete the entire database in your development environment.
  • You can do it programmatically on data migration or seed phase.
  • You can manually handle it on the database.

We prefer to delete the database (run the Drop-Database in the Package Manager Console) since this is just an example project and data loss is not important. Since this topic is not related to the ABP Framework, we don’t go deeper for all the scenarios.

Update the EF Core Mapping

Open the BookStoreDbContextModelCreatingExtensions class under the EntityFrameworkCore folder of the Acme.BookStore.EntityFrameworkCore project and change the builder.Entity<Book> part as shown below:

  1. builder.Entity<Book>(b =>
  2. {
  3.     b.ToTable(BookStoreConsts.DbTablePrefix + "Books", BookStoreConsts.DbSchema);
  4.     b.ConfigureByConvention(); //auto configure for the base class props
  5.     b.Property(x => x.Name).IsRequired().HasMaxLength(128);
  7.     // ADD THE MAPPING FOR THE RELATION
  8.     b.HasOne<Author>().WithMany().HasForeignKey(x => x.AuthorId).IsRequired();
  9. });

Add New EF Core Migration

Run the following command in the Package Manager Console (of the Visual Studio) to add a new database migration:

  1. Add-Migration "Added_AuthorId_To_Book"

This should create a new migration class with the following code in its Up method:

  1. migrationBuilder.AddColumn<Guid>(
  2.     name: "AuthorId",
  3.     table: "AppBooks",
  4.     nullable: false,
  5.     defaultValue: new Guid("00000000-0000-0000-0000-000000000000"));
  7. migrationBuilder.CreateIndex(
  8.     name: "IX_AppBooks_AuthorId",
  9.     table: "AppBooks",
  10.     column: "AuthorId");
  12. migrationBuilder.AddForeignKey(
  13.     name: "FK_AppBooks_AppAuthors_AuthorId",
  14.     table: "AppBooks",
  15.     column: "AuthorId",
  16.     principalTable: "AppAuthors",
  17.     principalColumn: "Id",
  18.     onDelete: ReferentialAction.Cascade);
  • Adds an AuthorId field to the AppBooks table.
  • Creates an index on the AuthorId field.
  • Declares the foreign key to the AppAuthors table.

Change the Data Seeder

Since the AuthorId is a required property of the Book entity, current data seeder code can not work. Open the BookStoreDataSeederContributor in the Acme.BookStore.Domain project and change as the following:

  1. using System;
  2. using System.Threading.Tasks;
  3. using Acme.BookStore.Authors;
  4. using Acme.BookStore.Books;
  5. using Volo.Abp.Data;
  6. using Volo.Abp.DependencyInjection;
  7. using Volo.Abp.Domain.Repositories;
  9. namespace Acme.BookStore
  10. {
  11.     public class BookStoreDataSeederContributor
  12.         : IDataSeedContributor, ITransientDependency
  13.     {
  14.         private readonly IRepository<Book, Guid> _bookRepository;
  15.         private readonly IAuthorRepository _authorRepository;
  16.         private readonly AuthorManager _authorManager;
  18.         public BookStoreDataSeederContributor(
  19.             IRepository<Book, Guid> bookRepository,
  20.             IAuthorRepository authorRepository,
  21.             AuthorManager authorManager)
  22.         {
  23.             _bookRepository = bookRepository;
  24.             _authorRepository = authorRepository;
  25.             _authorManager = authorManager;
  26.         }
  28.         public async Task SeedAsync(DataSeedContext context)
  29.         {
  30.             if (await _bookRepository.GetCountAsync() > 0)
  31.             {
  32.                 return;
  33.             }
  35.             var orwell = await _authorRepository.InsertAsync(
  36.                 await _authorManager.CreateAsync(
  37.                     "George Orwell",
  38.                     new DateTime(1903, 06, 25),
  39.                     "Orwell produced literary criticism and poetry, fiction and polemical journalism; and is best known for the allegorical novella Animal Farm (1945) and the dystopian novel Nineteen Eighty-Four (1949)."
  40.                 )
  41.             );
  43.             var douglas = await _authorRepository.InsertAsync(
  44.                 await _authorManager.CreateAsync(
  45.                     "Douglas Adams",
  46.                     new DateTime(1952, 03, 11),
  47.                     "Douglas Adams was an English author, screenwriter, essayist, humorist, satirist and dramatist. Adams was an advocate for environmentalism and conservation, a lover of fast cars, technological innovation and the Apple Macintosh, and a self-proclaimed 'radical atheist'."
  48.                 )
  49.             );
  51.             await _bookRepository.InsertAsync(
  52.                 new Book
  53.                 {
  54.                     AuthorId = orwell.Id, // SET THE AUTHOR
  55.                     Name = "1984",
  56.                     Type = BookType.Dystopia,
  57.                     PublishDate = new DateTime(1949, 6, 8),
  58.                     Price = 19.84f
  59.                 },
  60.                 autoSave: true
  61.             );
  63.             await _bookRepository.InsertAsync(
  64.                 new Book
  65.                 {
  66.                     AuthorId = douglas.Id, // SET THE AUTHOR
  67.                     Name = "The Hitchhiker's Guide to the Galaxy",
  68.                     Type = BookType.ScienceFiction,
  69.                     PublishDate = new DateTime(1995, 9, 27),
  70.                     Price = 42.0f
  71.                 },
  72.                 autoSave: true
  73.             );
  74.         }
  75.     }
  76. }

The only change is that we set the AuthorId properties of the Book entities.

You can now run the .DbMigrator console application to migrate the database schema and seed the initial data.

Application Layer

We will change the BookAppService to support the Author relation.

Data Transfer Objects

Let’s begin from the DTOs.

BookDto

Open the BookDto class in the Books folder of the Acme.BookStore.Application.Contracts project and add the following properties:

  1. public Guid AuthorId { get; set; }
  2. public string AuthorName { get; set; }

The final BookDto class should be following:

  1. using System;
  2. using Volo.Abp.Application.Dtos;
  4. namespace Acme.BookStore.Books
  5. {
  6.     public class BookDto : AuditedEntityDto<Guid>
  7.     {
  8.         public Guid AuthorId { get; set; }
  10.         public string AuthorName { get; set; }
  12.         public string Name { get; set; }
  14.         public BookType Type { get; set; }
  16.         public DateTime PublishDate { get; set; }
  18.         public float Price { get; set; }
  19.     }
  20. }

CreateUpdateBookDto

Open the CreateUpdateBookDto class in the Books folder of the Acme.BookStore.Application.Contracts project and add an AuthorId property as shown:

  1. public Guid AuthorId { get; set; }

AuthorLookupDto

Create a new class, AuthorLookupDto, inside the Books folder of the Acme.BookStore.Application.Contracts project:

  1. using System;
  2. using Volo.Abp.Application.Dtos;
  4. namespace Acme.BookStore.Books
  5. {
  6.     public class AuthorLookupDto : EntityDto<Guid>
  7.     {
  8.         public string Name { get; set; }
  9.     }
  10. }

This will be used in a new method will be added to the IBookAppService.

IBookAppService

Open the IBookAppService interface in the Books folder of the Acme.BookStore.Application.Contracts project and add a new method, named GetAuthorLookupAsync, as shown below:

  1. using System;
  2. using System.Threading.Tasks;
  3. using Volo.Abp.Application.Dtos;
  4. using Volo.Abp.Application.Services;
  6. namespace Acme.BookStore.Books
  7. {
  8.     public interface IBookAppService :
  9.         ICrudAppService< //Defines CRUD methods
  10.             BookDto, //Used to show books
  11.             Guid, //Primary key of the book entity
  12.             PagedAndSortedResultRequestDto, //Used for paging/sorting
  13.             CreateUpdateBookDto> //Used to create/update a book
  14.     {
  15.         // ADD the NEW METHOD
  16.         Task<ListResultDto<AuthorLookupDto>> GetAuthorLookupAsync();
  17.     }
  18. }

This new method will be used from the UI to get a list of authors and fill a dropdown list to select the author of a book.

BookAppService

Open the BookAppService interface in the Books folder of the Acme.BookStore.Application project and replace the file content with the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. using Acme.BookStore.Authors;
  6. using Acme.BookStore.Permissions;
  7. using Microsoft.AspNetCore.Authorization;
  8. using Volo.Abp.Application.Dtos;
  9. using Volo.Abp.Application.Services;
  10. using Volo.Abp.Domain.Entities;
  11. using Volo.Abp.Domain.Repositories;
  13. namespace Acme.BookStore.Books
  14. {
  15.     [Authorize(BookStorePermissions.Books.Default)]
  16.     public class BookAppService :
  17.         CrudAppService<
  18.             Book, //The Book entity
  19.             BookDto, //Used to show books
  20.             Guid, //Primary key of the book entity
  21.             PagedAndSortedResultRequestDto, //Used for paging/sorting
  22.             CreateUpdateBookDto>, //Used to create/update a book
  23.         IBookAppService //implement the IBookAppService
  24.     {
  25.         private readonly IAuthorRepository _authorRepository;
  27.         public BookAppService(
  28.             IRepository<Book, Guid> repository,
  29.             IAuthorRepository authorRepository)
  30.             : base(repository)
  31.         {
  32.             _authorRepository = authorRepository;
  33.             GetPolicyName = BookStorePermissions.Books.Default;
  34.             GetListPolicyName = BookStorePermissions.Books.Default;
  35.             CreatePolicyName = BookStorePermissions.Books.Create;
  36.             UpdatePolicyName = BookStorePermissions.Books.Edit;
  37.             DeletePolicyName = BookStorePermissions.Books.Create;
  38.         }
  40.         public override async Task<BookDto> GetAsync(Guid id)
  41.         {
  42.             //Prepare a query to join books and authors
  43.             var query = from book in Repository
  44.                 join author in _authorRepository on book.AuthorId equals author.Id
  45.                 where book.Id == id
  46.                 select new { book, author };
  48.             //Execute the query and get the book with author
  49.             var queryResult = await AsyncExecuter.FirstOrDefaultAsync(query);
  50.             if (queryResult == null)
  51.             {
  52.                 throw new EntityNotFoundException(typeof(Book), id);
  53.             }
  55.             var bookDto = ObjectMapper.Map<Book, BookDto>(queryResult.book);
  56.             bookDto.AuthorName = queryResult.author.Name;
  57.             return bookDto;
  58.         }
  60.         public override async Task<PagedResultDto<BookDto>>
  61.             GetListAsync(PagedAndSortedResultRequestDto input)
  62.         {
  63.             //Prepare a query to join books and authors
  64.             var query = from book in Repository
  65.                 join author in _authorRepository on book.AuthorId equals author.Id
  66.                 orderby input.Sorting
  67.                 select new {book, author};
  69.             query = query
  70.                 .Skip(input.SkipCount)
  71.                 .Take(input.MaxResultCount);
  73.             //Execute the query and get a list
  74.             var queryResult = await AsyncExecuter.ToListAsync(query);
  76.             //Convert the query result to a list of BookDto objects
  77.             var bookDtos = queryResult.Select(x =>
  78.             {
  79.                 var bookDto = ObjectMapper.Map<Book, BookDto>(x.book);
  80.                 bookDto.AuthorName = x.author.Name;
  81.                 return bookDto;
  82.             }).ToList();
  84.             //Get the total count with another query
  85.             var totalCount = await Repository.GetCountAsync();
  87.             return new PagedResultDto<BookDto>(
  88.                 totalCount,
  89.                 bookDtos
  90.             );
  91.         }
  93.         public async Task<ListResultDto<AuthorLookupDto>> GetAuthorLookupAsync()
  94.         {
  95.             var authors = await _authorRepository.GetListAsync();
  97.             return new ListResultDto<AuthorLookupDto>(
  98.                 ObjectMapper.Map<List<Author>, List<AuthorLookupDto>>(authors)
  99.             );
  100.         }
  101.     }
  102. }

Let’s see the changes we’ve done:

  • Added [Authorize(BookStorePermissions.Books.Default)] to authorize the methods we’ve newly added/overrode (remember, authorize attribute is valid for all the methods of the class when it is declared for a class).
  • Injected IAuthorRepository to query from the authors.
  • Overrode the GetAsync method of the base CrudAppService, which returns a single BookDto object with the given id.
    • Used a simple LINQ expression to join books and authors and query them together for the given book id.
    • Used AsyncExecuter.FirstOrDefaultAsync(...) to execute the query and get a result. AsyncExecuter was previously used in the AuthorAppService. Check the repository documentation to understand why we’ve used it.
    • Throws an EntityNotFoundException which results an HTTP 404 (not found) result if requested book was not present in the database.
    • Finally, created a BookDto object using the ObjectMapper, then assigning the AuthorName manually.
  • Overrode the GetListAsync method of the base CrudAppService, which returns a list of books. The logic is similar to the previous method, so you can easily understand the code.
  • Created a new method: GetAuthorLookupAsync. This simple gets all the authors. The UI uses this method to fill a dropdown list and select and author while creating/editing books.

Object to Object Mapping Configuration

Introduced the AuthorLookupDto class and used object mapping inside the GetAuthorLookupAsync method. So, we need to add a new mapping definition inside the BookStoreApplicationAutoMapperProfile.cs file of the Acme.BookStore.Application project:

  1. CreateMap<Author, AuthorLookupDto>();

Unit Tests

Some of the unit tests will fail since we made some changed on the AuthorAppService. Open the BookAppService_Tests in the Books folder of the Acme.BookStore.Application.Tests project and change the content as the following:

  1. using System;
  2. using System.Linq;
  3. using System.Threading.Tasks;
  4. using Acme.BookStore.Authors;
  5. using Shouldly;
  6. using Volo.Abp.Application.Dtos;
  7. using Volo.Abp.Validation;
  8. using Xunit;
  10. namespace Acme.BookStore.Books
  11. { 
  12.     public class BookAppService_Tests : BookStoreApplicationTestBase
  13.     {
  14.         private readonly IBookAppService _bookAppService;
  15.         private readonly IAuthorAppService _authorAppService;
  17.         public BookAppService_Tests()
  18.         {
  19.             _bookAppService = GetRequiredService<IBookAppService>();
  20.             _authorAppService = GetRequiredService<IAuthorAppService>();
  21.         }
  23.         [Fact]
  24.         public async Task Should_Get_List_Of_Books()
  25.         {
  26.             //Act
  27.             var result = await _bookAppService.GetListAsync(
  28.                 new PagedAndSortedResultRequestDto()
  29.             );
  31.             //Assert
  32.             result.TotalCount.ShouldBeGreaterThan(0);
  33.             result.Items.ShouldContain(b => b.Name == "1984" &&
  34.                                        b.AuthorName == "George Orwell");
  35.         }
  37.         [Fact]
  38.         public async Task Should_Create_A_Valid_Book()
  39.         {
  40.             var authors = await _authorAppService.GetListAsync(new GetAuthorListDto());
  41.             var firstAuthor = authors.Items.First();
  43.             //Act
  44.             var result = await _bookAppService.CreateAsync(
  45.                 new CreateUpdateBookDto
  46.                 {
  47.                     AuthorId = firstAuthor.Id,
  48.                     Name = "New test book 42",
  49.                     Price = 10,
  50.                     PublishDate = System.DateTime.Now,
  51.                     Type = BookType.ScienceFiction
  52.                 }
  53.             );
  55.             //Assert
  56.             result.Id.ShouldNotBe(Guid.Empty);
  57.             result.Name.ShouldBe("New test book 42");
  58.         }
  60.         [Fact]
  61.         public async Task Should_Not_Create_A_Book_Without_Name()
  62.         {
  63.             var exception = await Assert.ThrowsAsync<AbpValidationException>(async () =>
  64.             {
  65.                 await _bookAppService.CreateAsync(
  66.                     new CreateUpdateBookDto
  67.                     {
  68.                         Name = "",
  69.                         Price = 10,
  70.                         PublishDate = DateTime.Now,
  71.                         Type = BookType.ScienceFiction
  72.                     }
  73.                 );
  74.             });
  76.             exception.ValidationErrors
  77.                 .ShouldContain(err => err.MemberNames.Any(m => m == "Name"));
  78.         }
  79.     }
  80. }
  • Changed the assertion condition in the Should_Get_List_Of_Books from b => b.Name == "1984" to b => b.Name == "1984" && b.AuthorName == "George Orwell" to check if the author name was filled.
  • Changed the Should_Create_A_Valid_Book method to set the AuthorId while creating a new book, since it is required anymore.

The User Interface

The Book List

Book list page change is trivial. Open the Pages/Books/Index.js in the Acme.BookStore.Web project and add the following column definition between the name and type columns:

  1. ...
  2. {
  3.     title: l('Name'),
  4.     data: "name"
  5. },
  7. // ADDED the NEW AUTHOR NAME COLUMN
  8. {
  9.     title: l('Author'),
  10.     data: "authorName"
  11. },
  13. {
  14.     title: l('Type'),
  15.     data: "type",
  16.     render: function (data) {
  17.         return l('Enum:BookType:' + data);
  18.     }
  19. },
  20. ...

When you run the application, you can see the Author column on the table:

bookstore-added-author-to-book-list

Create Modal

Open the Pages/Books/CreateModal.cshtml.cs in the Acme.BookStore.Web project and change the file content as shown below:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.ComponentModel.DataAnnotations;
  5. using System.Linq;
  6. using System.Threading.Tasks;
  7. using Acme.BookStore.Books;
  8. using Microsoft.AspNetCore.Mvc;
  9. using Microsoft.AspNetCore.Mvc.Rendering;
  10. using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
  12. namespace Acme.BookStore.Web.Pages.Books
  13. {
  14.     public class CreateModalModel : BookStorePageModel
  15.     {
  16.         [BindProperty]
  17.         public CreateBookViewModel Book { get; set; }
  19.         public List<SelectListItem> Authors { get; set; }
  21.         private readonly IBookAppService _bookAppService;
  23.         public CreateModalModel(
  24.             IBookAppService bookAppService)
  25.         {
  26.             _bookAppService = bookAppService;
  27.         }
  29.         public async Task OnGetAsync()
  30.         {
  31.             Book = new CreateBookViewModel();
  33.             var authorLookup = await _bookAppService.GetAuthorLookupAsync();
  34.             Authors = authorLookup.Items
  35.                 .Select(x => new SelectListItem(x.Name, x.Id.ToString()))
  36.                 .ToList();
  37.         }
  39.         public async Task<IActionResult> OnPostAsync()
  40.         {
  41.             await _bookAppService.CreateAsync(
  42.                 ObjectMapper.Map<CreateBookViewModel, CreateUpdateBookDto>(Book)
  43.                 );
  44.             return NoContent();
  45.         }
  47.         public class CreateBookViewModel
  48.         {
  49.             [SelectItems(nameof(Authors))]
  50.             [DisplayName("Author")]
  51.             public Guid AuthorId { get; set; }
  53.             [Required]
  54.             [StringLength(128)]
  55.             public string Name { get; set; }
  57.             [Required]
  58.             public BookType Type { get; set; } = BookType.Undefined;
  60.             [Required]
  61.             [DataType(DataType.Date)]
  62.             public DateTime PublishDate { get; set; } = DateTime.Now;
  64.             [Required]
  65.             public float Price { get; set; }
  66.         }
  67.     }
  68. }
  • Changed type of the Book property from CreateUpdateBookDto to the new CreateBookViewModel class defined in this file. The main motivation of this change to customize the model class based on the User Interface (UI) requirements. We didn’t want to use UI-related [SelectItems(nameof(Authors))] and [DisplayName("Author")] attributes inside the CreateUpdateBookDto class.
  • Added Authors property that is filled inside the OnGetAsync method using the IBookAppService.GetAuthorLookupAsync method defined before.
  • Changed the OnPostAsync method to map CreateBookViewModel object to a CreateUpdateBookDto object since IBookAppService.CreateAsync expects a parameter of this type.

Edit Modal

Open the Pages/Books/EditModal.cshtml.cs in the Acme.BookStore.Web project and change the file content as shown below:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.ComponentModel.DataAnnotations;
  5. using System.Linq;
  6. using System.Threading.Tasks;
  7. using Acme.BookStore.Books;
  8. using Microsoft.AspNetCore.Mvc;
  9. using Microsoft.AspNetCore.Mvc.Rendering;
  10. using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
  12. namespace Acme.BookStore.Web.Pages.Books
  13. {
  14.     public class EditModalModel : BookStorePageModel
  15.     {
  16.         [BindProperty]
  17.         public EditBookViewModel Book { get; set; }
  19.         public List<SelectListItem> Authors { get; set; }
  21.         private readonly IBookAppService _bookAppService;
  23.         public EditModalModel(IBookAppService bookAppService)
  24.         {
  25.             _bookAppService = bookAppService;
  26.         }
  28.         public async Task OnGetAsync(Guid id)
  29.         {
  30.             var bookDto = await _bookAppService.GetAsync(id);
  31.             Book = ObjectMapper.Map<BookDto, EditBookViewModel>(bookDto);
  33.             var authorLookup = await _bookAppService.GetAuthorLookupAsync();
  34.             Authors = authorLookup.Items
  35.                 .Select(x => new SelectListItem(x.Name, x.Id.ToString()))
  36.                 .ToList();
  37.         }
  39.         public async Task<IActionResult> OnPostAsync()
  40.         {
  41.             await _bookAppService.UpdateAsync(
  42.                 Book.Id,
  43.                 ObjectMapper.Map<EditBookViewModel, CreateUpdateBookDto>(Book)
  44.             );
  46.             return NoContent();
  47.         }
  49.         public class EditBookViewModel
  50.         {
  51.             [HiddenInput]
  52.             public Guid Id { get; set; }
  54.             [SelectItems(nameof(Authors))]
  55.             [DisplayName("Author")]
  56.             public Guid AuthorId { get; set; }
  58.             [Required]
  59.             [StringLength(128)]
  60.             public string Name { get; set; }
  62.             [Required]
  63.             public BookType Type { get; set; } = BookType.Undefined;
  65.             [Required]
  66.             [DataType(DataType.Date)]
  67.             public DateTime PublishDate { get; set; } = DateTime.Now;
  69.             [Required]
  70.             public float Price { get; set; }
  71.         }
  72.     }
  73. }
  • Changed type of the Book property from CreateUpdateBookDto to the new EditBookViewModel class defined in this file, just like done before for the create modal above.
  • Moved the Id property inside the new EditBookViewModel class.
  • Added Authors property that is filled inside the OnGetAsync method using the IBookAppService.GetAuthorLookupAsync method.
  • Changed the OnPostAsync method to map EditBookViewModel object to a CreateUpdateBookDto object since IBookAppService.UpdateAsync expects a parameter of this type.

These changes require a small change in the EditModal.cshtml. Remove the <abp-input asp-for="Id" /> tag since we no longer need to it (since moved it to the EditBookViewModel). The final content of the EditModal.cshtml should be following:

  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 EditModalModel
  7. @inject IStringLocalizer<BookStoreResource> L
  8. @{
  9.     Layout = null;
  10. }
  11. <abp-dynamic-form abp-model="Book" asp-page="/Books/EditModal">
  12.     <abp-modal>
  13.         <abp-modal-header title="@L["Update"].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>

Object to Object Mapping Configuration

The changes above requires to define some object to object mappings. Open the BookStoreWebAutoMapperProfile.cs in the Acme.BookStore.Web project and add the following mapping definitions inside the constructor:

  1. CreateMap<Pages.Books.CreateModalModel.CreateBookViewModel, CreateUpdateBookDto>();
  2. CreateMap<BookDto, Pages.Books.EditModalModel.EditBookViewModel>();
  3. CreateMap<Pages.Books.EditModalModel.EditBookViewModel, CreateUpdateBookDto>();

You can run the application and try to create a new book or update an existing book. You will see a drop down list on the create/update form to select the author of the book:

bookstore-added-authors-to-modals