From 1c1faaf3f192ddf9b429ae071d3403439b2ff490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Mon, 16 Nov 2020 19:53:00 +0300
Subject: [PATCH] Update Part-3.md

---
 docs/en/Tutorials/Part-3.md | 103 +++++++++++++++++++++---------------
 1 file changed, 60 insertions(+), 43 deletions(-)

diff --git a/docs/en/Tutorials/Part-3.md b/docs/en/Tutorials/Part-3.md
index 2130352524..9639c64654 100644
--- a/docs/en/Tutorials/Part-3.md
+++ b/docs/en/Tutorials/Part-3.md
@@ -1171,15 +1171,13 @@ Open the `Books.razor` and replace the `<CardHeader>` section with the following
 
 ````xml
 <CardHeader>
-    <Row>
-        <Column ColumnSize="ColumnSize.Is6">
+    <Row Class="justify-content-between">
+        <Column ColumnSize="ColumnSize.IsAuto">
             <h2>@L["Books"]</h2>
         </Column>
-        <Column ColumnSize="ColumnSize.Is6">
-            <Paragraph Alignment="TextAlignment.Right">
-                <Button Color="Color.Primary"
-                        Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
-            </Paragraph>
+        <Column ColumnSize="ColumnSize.IsAuto">
+            <Button Color="Color.Primary"
+                    Clicked="OpenCreateModalAsync">@L["NewBook"]</Button>
         </Column>
     </Row>
 </CardHeader>
@@ -1196,48 +1194,67 @@ Now, we can add a modal that will be opened when we click to the button.
 Open the `Books.razor` and add the following code to the end of the page:
 
 ````xml
-<Modal @ref="CreateModal">
+<Modal @ref="@CreateModal">
     <ModalBackdrop />
     <ModalContent IsCentered="true">
-        <ModalHeader>
-            <ModalTitle>@L["NewBook"]</ModalTitle>
-            <CloseButton Clicked="CloseCreateModalAsync" />
-        </ModalHeader>
-        <ModalBody>
-            <Field>
-                <FieldLabel>@L["Name"]</FieldLabel>
-                <TextEdit @bind-text="NewEntity.Name" />
-            </Field>
-            <Field>
-                <FieldLabel>@L["Type"]</FieldLabel>
-                <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
-                    @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
-                    {
-                        <SelectItem TValue="BookType" Value="@((BookType)bookTypeValue)">
-                            @L[$"Enum:BookType:{bookTypeValue}"]
-                        </SelectItem>
-                    }
-                </Select>
-            </Field>
-            <Field>
-                <FieldLabel>@L["PublishDate"]</FieldLabel>
-                <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate" />
-            </Field>
-            <Field>
-                <FieldLabel>@L["Price"]</FieldLabel>
-                <NumericEdit TValue="float" @bind-Value="NewEntity.Price" />
-            </Field>
-        </ModalBody>
-        <ModalFooter>
-            <Button Color="Color.Secondary" 
-                    Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
-            <Button Color="Color.Primary" 
-                    Clicked="CreateEntityAsync">@L["Save"]</Button>
-        </ModalFooter>
+        <Form>
+            <ModalHeader>
+                <ModalTitle>@L["NewBook"]</ModalTitle>
+                <CloseButton Clicked="CloseCreateModalAsync"/>
+            </ModalHeader>
+            <ModalBody>
+                <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
+                    <Validation MessageLocalizer="@LH.Localize">
+                        <Field>
+                            <FieldLabel>@L["Name"]</FieldLabel>
+                            <TextEdit @bind-Text="@NewEntity.Name">
+                                <Feedback>
+                                    <ValidationError/>
+                                </Feedback>
+                            </TextEdit>
+                        </Field>
+                    </Validation>
+                    <Field>
+                        <FieldLabel>@L["Type"]</FieldLabel>
+                        <Select TValue="BookType" @bind-SelectedValue="@NewEntity.Type">
+                            @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
+                            {
+                                <SelectItem TValue="BookType" Value="@((BookType) bookTypeValue)">
+                                    @L[$"Enum:BookType:{bookTypeValue}"]
+                                </SelectItem>
+                            }
+                        </Select>
+                    </Field>
+                    <Field>
+                        <FieldLabel>@L["PublishDate"]</FieldLabel>
+                        <DateEdit TValue="DateTime" @bind-Date="NewEntity.PublishDate"/>
+                    </Field>
+                    <Field>
+                        <FieldLabel>@L["Price"]</FieldLabel>
+                        <NumericEdit TValue="float" @bind-Value="NewEntity.Price"/>
+                    </Field>
+                </Validations>
+            </ModalBody>
+            <ModalFooter>
+                <Button Color="Color.Secondary"
+                        Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
+                <Button Color="Color.Primary"
+                        Type="@ButtonType.Submit"
+                        PreventDefaultOnSubmit="true"
+                        Clicked="CreateEntityAsync">@L["Save"]</Button>
+            </ModalFooter>
+        </Form>
     </ModalContent>
 </Modal>
 ````
 
+This code requires a service; Inject the `AbpBlazorMessageLocalizerHelper<T>` at the top of the file, just before the `@inherits...` line:
+
+````csharp
+@inject AbpBlazorMessageLocalizerHelper<BookStoreResource> LH
+````
+
+* The form implements validation and the `AbpBlazorMessageLocalizerHelper` is used to simply localize the validation messages.
 * `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: