diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md index 14dfb8d8e2..3edf5e339f 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -608,20 +608,30 @@ Open the `Books.razor` and replace the content as the following: ShowPager="true" PageSize="PageSize"> - - + + @L[$"Enum:BookType:{(int)context.Type}"] - + @context.PublishDate.ToShortDateString() - + - + @context.CreationTime.ToLongDateString() diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md index 7056bdd587..4af3d2ddf7 100644 --- a/docs/en/Tutorials/Part-3.md +++ b/docs/en/Tutorials/Part-3.md @@ -1158,6 +1158,93 @@ Clicking the "Delete" action calls the `delete` method which then shows a confir {{end}} +{{if UI == "Blazor"}} + +## 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 `` section with the following code: + +````xml + + + +

@L["Books"]

+
+ + + + + +
+
+```` + +This will change the card header by adding a "New book" button to the right side: + +![blazor-add-book-button](images/blazor-add-book-button.png) + +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: + +````xml + + + + + @L["NewBook"] + + + + + @L["Name"] + + + + @L["Type"] + + + + @L["PublishDate"] + + + + @L["Price"] + + + + + + + + + +```` + +`CreateModal` object, `CloseCreateModalAsync` and `CreateEntityAsync` method are defined by the base class. See the [Blazorise documentation](https://blazorise.com/docs/) if you want to understand the `Modal` and the other components. + +That's all. Run the application and try to add a new book: + +![blazor-new-book-modal](images/blazor-new-book-modal.png) + +{{end}} + ## The Next Part See the [next part](Part-4.md) of this tutorial. diff --git a/docs/en/Tutorials/images/blazor-add-book-button.png b/docs/en/Tutorials/images/blazor-add-book-button.png new file mode 100644 index 0000000000..58a607d3b1 Binary files /dev/null and b/docs/en/Tutorials/images/blazor-add-book-button.png differ diff --git a/docs/en/Tutorials/images/blazor-new-book-modal.png b/docs/en/Tutorials/images/blazor-new-book-modal.png new file mode 100644 index 0000000000..dd284a0ffd Binary files /dev/null and b/docs/en/Tutorials/images/blazor-new-book-modal.png differ