|
|
|
@ -48,13 +48,13 @@ This part is also recorded as a video tutorial and **<a href="https://www.youtub |
|
|
|
|
|
|
|
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 the Modal Form |
|
|
|
|
|
|
|
Create a new razor page, named `CreateModal.cshtml` under the `Pages/Books` folder of the `Acme.BookStore.Web` project. |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
#### CreateModal.cshtml.cs |
|
|
|
|
|
|
|
@ -186,7 +186,7 @@ The final content of the `Index.cshtml` is shown below: |
|
|
|
|
|
|
|
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: |
|
|
|
|
|
|
|
@ -281,7 +281,7 @@ Now, you can **run the application** and add some new books using the new modal |
|
|
|
|
|
|
|
Create a new razor page, named `EditModal.cshtml` under the `Pages/Books` folder of the `Acme.BookStore.Web` project: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
### EditModal.cshtml.cs |
|
|
|
|
|
|
|
@ -484,7 +484,7 @@ You can run the application and edit any book by selecting the edit action on a |
|
|
|
|
|
|
|
The final UI looks as below: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
## Deleting a Book |
|
|
|
|
|
|
|
@ -721,7 +721,7 @@ Open `/src/app/book/book.component.html` and make the following changes: |
|
|
|
|
|
|
|
You can open your browser and click **New book** button to see the new modal. |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
### Create a Reactive Form |
|
|
|
|
|
|
|
@ -959,7 +959,7 @@ export class BookComponent implements OnInit { |
|
|
|
|
|
|
|
Now, you can open your browser to see the changes: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
## Updating a Book |
|
|
|
|
|
|
|
@ -1087,7 +1087,7 @@ Open the `/src/app/book/book.component.html` and add the following `ngx-datata |
|
|
|
|
|
|
|
Added an "Actions" dropdown as the first column of the table that is shown below: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
Also, change the `ng-template #abpHeader` section as shown below: |
|
|
|
|
|
|
|
@ -1151,11 +1151,11 @@ Open `/src/app/book/book.component.html` and modify the `ngbDropdownMenu` to add |
|
|
|
|
|
|
|
The final actions dropdown UI looks like below: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
Clicking the "Delete" action calls the `delete` method which then shows a confirmation popup as shown below: |
|
|
|
|
|
|
|
 |
|
|
|
 |
|
|
|
|
|
|
|
{{end}} |
|
|
|
|
|
|
|
|