@ -1171,15 +1171,13 @@ Open the `Books.razor` and replace the `<CardHeader>` section with the following
````xml````xml
< CardHeader > < CardHeader >
< Row > < Row Class = "justify-content-between" >
< Column ColumnSize = "ColumnSize.Is6 " > < Column ColumnSize = "ColumnSize.IsAuto " >
< h2 > @L["Books"]< / h2 > < h2 > @L["Books"]< / h2 >
< / Column > < / Column >
< Column ColumnSize = "ColumnSize.Is6" > < Column ColumnSize = "ColumnSize.IsAuto" >
< Paragraph Alignment = "TextAlignment.Right" > < Button Color = "Color.Primary"
< Button Color = "Color.Primary" Clicked="OpenCreateModalAsync">@L["NewBook"]< / Button >
Clicked="OpenCreateModalAsync">@L["NewBook"]< / Button >
< / Paragraph >
< / Column > < / Column >
< / Row > < / Row >
< / CardHeader > < / 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:Open the `Books.razor` and add the following code to the end of the page:
````xml````xml
< Modal @ref =" CreateModal " > < Modal @ref ="@ CreateModal " >
< ModalBackdrop / > < ModalBackdrop / >
< ModalContent IsCentered = "true" > < ModalContent IsCentered = "true" >
< ModalHeader > < Form >
< ModalTitle > @L["NewBook"]< / ModalTitle > < ModalHeader >
< CloseButton Clicked = "CloseCreateModalAsync" / > < ModalTitle > @L["NewBook"]< / ModalTitle >
< / ModalHeader > < CloseButton Clicked = "CloseCreateModalAsync" / >
< ModalBody > < / ModalHeader >
< Field > < ModalBody >
< FieldLabel > @L["Name"]< / FieldLabel > < Validations @ref ="@ CreateValidationsRef " Model = "@NewEntity" ValidateOnLoad = "false" >
< TextEdit @bind -text = "NewEntity.Name" /> < Validation MessageLocalizer = "@LH.Localize" >
< / Field > < Field >
< Field > < FieldLabel > @L["Name"]< / FieldLabel >
< FieldLabel > @L["Type"]< / FieldLabel > < TextEdit @bind -Text = "@NewEntity.Name" >
< Select TValue = "BookType" @bind -SelectedValue = "@NewEntity.Type" > < Feedback >
@foreach (int bookTypeValue in Enum.GetValues(typeof(BookType))) < ValidationError / >
{ < / Feedback >
< SelectItem TValue = "BookType" Value = "@((BookType)bookTypeValue)" > < / TextEdit >
@L [$"Enum:BookType:{bookTypeValue}"] < / Field >
< / SelectItem > < / Validation >
} < Field >
< / Select > < FieldLabel > @L["Type"]< / FieldLabel >
< / Field > < Select TValue = "BookType" @bind -SelectedValue = "@NewEntity.Type" >
< Field > @foreach (int bookTypeValue in Enum.GetValues(typeof(BookType)))
< FieldLabel > @L["PublishDate"]< / FieldLabel > {
< DateEdit TValue = "DateTime" @bind -Date = "NewEntity.PublishDate" /> < SelectItem TValue = "BookType" Value = "@((BookType) bookTypeValue)" >
< / Field > @L [$"Enum:BookType:{bookTypeValue}"]
< Field > < / SelectItem >
< FieldLabel > @L["Price"]< / FieldLabel > }
< NumericEdit TValue = "float" @bind -Value = "NewEntity.Price" /> < / Select >
< / Field > < / Field >
< / ModalBody > < Field >
< ModalFooter > < FieldLabel > @L["PublishDate"]< / FieldLabel >
< Button Color = "Color.Secondary" < DateEdit TValue = "DateTime" @bind -Date = "NewEntity.PublishDate" />
Clicked="CloseCreateModalAsync">@L["Cancel"]< / Button > < / Field >
< Button Color = "Color.Primary" < Field >
Clicked="CreateEntityAsync">@L["Save"]< / Button > < FieldLabel > @L["Price"]< / FieldLabel >
< / ModalFooter > < 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 > < / ModalContent >
< / Modal > < / 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.* `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:That's all. Run the application and try to add a new book:
Halil İbrahim Kalkan
6 years ago