tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added validations to author create & edit modals

pull/7598/head
Ahmet 5 years ago
parent
b45f2c695a
commit
3b51153926
1 changed files with 114 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      docs/en/Tutorials/Part-9.md

176
docs/en/Tutorials/Part-9.md
View File

@ -843,8 +843,10 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the `Acme.BookStor
````xml ````xml
@page "/authors" @page "/authors"
@using Acme.BookStore.Authors @using Acme.BookStore.Authors
@using Acme.BookStore.Localization
@inherits BookStoreComponentBase @inherits BookStoreComponentBase
@inject IAuthorAppService AuthorAppService @inject IAuthorAppService AuthorAppService
@inject AbpBlazorMessageLocalizerHelper<BookStoreResource> LH
<Card> <Card>
<CardHeader> <CardHeader>
<Row> <Row>
@ -917,68 +919,104 @@ Create a new Razor Component Page, `/Pages/Authors.razor`, in the `Acme.BookStor
<Modal @ref="CreateAuthorModal"> <Modal @ref="CreateAuthorModal">
<ModalBackdrop /> <ModalBackdrop />
<ModalContent IsCentered="true"> <ModalContent IsCentered="true">
<ModalHeader> <Form>
<ModalTitle>@L["NewAuthor"]</ModalTitle> <ModalHeader>
<CloseButton Clicked="CloseCreateAuthorModal" /> <ModalTitle>@L["NewAuthor"]</ModalTitle>
</ModalHeader> <CloseButton Clicked="CloseCreateAuthorModal" />
<ModalBody> </ModalHeader>
<Field> <ModalBody>
<FieldLabel>@L["Name"]</FieldLabel> <Validations @ref="@CreateValidationsRef" Model="@NewAuthor" ValidateOnLoad="false">
<TextEdit @bind-text="@NewAuthor.Name" /> <Validation MessageLocalizer="@LH.Localize">
</Field> <Field>
<Field> <FieldLabel>@L["Name"]</FieldLabel>
<FieldLabel>@L["BirthDate"]</FieldLabel> <TextEdit @bind-Text="@NewAuthor.Name">
<DateEdit TValue="DateTime" @bind-Date="@NewAuthor.BirthDate" /> <Feedback>
</Field> <ValidationError/>
<Field> </Feedback>
<FieldLabel>@L["ShortBio"]</FieldLabel> </TextEdit>
<MemoEdit Rows="5" @bind-text="@NewAuthor.ShortBio" /> </Field>
</Field> </Validation>
</ModalBody> <Field>
<ModalFooter> <FieldLabel>@L["BirthDate"]</FieldLabel>
<Button Color="Color.Secondary" <DateEdit TValue="DateTime" @bind-Date="@NewAuthor.BirthDate"/>
Clicked="CloseCreateAuthorModal"> </Field>
@L["Cancel"] <Validation MessageLocalizer="@LH.Localize">
</Button> <Field>
<Button Color="Color.Primary" <FieldLabel>@L["ShortBio"]</FieldLabel>
Clicked="CreateAuthorAsync"> <MemoEdit Rows="5" @bind-Text="@NewAuthor.ShortBio">
@L["Save"] <Feedback>
</Button> <ValidationError/>
</ModalFooter> </Feedback>
</MemoEdit>
</Field>
</Validation>
</Validations>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary"
Clicked="CloseCreateAuthorModal">
@L["Cancel"]
</Button>
<Button Color="Color.Primary"
Type="@ButtonType.Submit"
PreventDefaultOnSubmit="true"
Clicked="CreateAuthorAsync">
@L["Save"]
</Button>
</ModalFooter>
</Form>
</ModalContent> </ModalContent>
</Modal> </Modal>
<Modal @ref="EditAuthorModal"> <Modal @ref="EditAuthorModal">
<ModalBackdrop /> <ModalBackdrop />
<ModalContent IsCentered="true"> <ModalContent IsCentered="true">
<ModalHeader> <Form>
<ModalTitle>@EditingAuthor.Name</ModalTitle> <ModalHeader>
<CloseButton Clicked="CloseEditAuthorModal" /> <ModalTitle>@EditingAuthor.Name</ModalTitle>
</ModalHeader> <CloseButton Clicked="CloseEditAuthorModal" />
<ModalBody> </ModalHeader>
<Field> <ModalBody>
<FieldLabel>@L["Name"]</FieldLabel> <Validations @ref="@EditValidationsRef" Model="@EditingAuthor" ValidateOnLoad="false">
<TextEdit @bind-text="@EditingAuthor.Name" /> <Validation MessageLocalizer="@LH.Localize">
</Field> <Field>
<Field> <FieldLabel>@L["Name"]</FieldLabel>
<FieldLabel>@L["BirthDate"]</FieldLabel> <TextEdit @bind-Text="@EditingAuthor.Name">
<DateEdit TValue="DateTime" @bind-Date="@EditingAuthor.BirthDate" /> <Feedback>
</Field> <ValidationError/>
<Field> </Feedback>
<FieldLabel>@L["ShortBio"]</FieldLabel> </TextEdit>
<MemoEdit Rows="5" @bind-text="@EditingAuthor.ShortBio" /> </Field>
</Field> </Validation>
</ModalBody> <Field>
<ModalFooter> <FieldLabel>@L["BirthDate"]</FieldLabel>
<Button Color="Color.Secondary" <DateEdit TValue="DateTime" @bind-Date="@EditingAuthor.BirthDate"/>
Clicked="CloseEditAuthorModal"> </Field>
@L["Cancel"] <Validation>
</Button> <Field>
<Button Color="Color.Primary" <FieldLabel>@L["ShortBio"]</FieldLabel>
Clicked="UpdateAuthorAsync"> <MemoEdit Rows="5" @bind-Text="@EditingAuthor.ShortBio">
@L["Save"] <Feedback>
</Button> <ValidationError/>
</ModalFooter> </Feedback>
</MemoEdit>
</Field>
</Validation>
</Validations>
</ModalBody>
<ModalFooter>
<Button Color="Color.Secondary"
Clicked="CloseEditAuthorModal">
@L["Cancel"]
</Button>
<Button Color="Color.Primary"
Type="@ButtonType.Submit"
PreventDefaultOnSubmit="true"
Clicked="UpdateAuthorAsync">
@L["Save"]
</Button>
</ModalFooter>
</Form>
</ModalContent> </ModalContent>
</Modal> </Modal>
```` ````
@ -1025,6 +1063,10 @@ namespace Acme.BookStore.Blazor.Pages
private Modal CreateAuthorModal { get; set; } private Modal CreateAuthorModal { get; set; }
private Modal EditAuthorModal { get; set; } private Modal EditAuthorModal { get; set; }
private Validations CreateValidationsRef;
private Validations EditValidationsRef;
public Authors() public Authors()
{ {
NewAuthor = new CreateAuthorDto(); NewAuthor = new CreateAuthorDto();
@ -1079,6 +1121,8 @@ namespace Acme.BookStore.Blazor.Pages
private void OpenCreateAuthorModal() private void OpenCreateAuthorModal()
{ {
CreateValidationsRef?.ClearAll();
NewAuthor = new CreateAuthorDto(); NewAuthor = new CreateAuthorDto();
CreateAuthorModal.Show(); CreateAuthorModal.Show();
} }
@ -1090,6 +1134,8 @@ namespace Acme.BookStore.Blazor.Pages
private void OpenEditAuthorModal(AuthorDto author) private void OpenEditAuthorModal(AuthorDto author)
{ {
EditValidationsRef?.ClearAll();
EditingAuthorId = author.Id; EditingAuthorId = author.Id;
EditingAuthor = ObjectMapper.Map<AuthorDto, UpdateAuthorDto>(author); EditingAuthor = ObjectMapper.Map<AuthorDto, UpdateAuthorDto>(author);
EditAuthorModal.Show(); EditAuthorModal.Show();
@ -1114,16 +1160,22 @@ namespace Acme.BookStore.Blazor.Pages
private async Task CreateAuthorAsync() private async Task CreateAuthorAsync()
{ {
await AuthorAppService.CreateAsync(NewAuthor); if (CreateValidationsRef?.ValidateAll() ?? true)
await GetAuthorsAsync(); {
CreateAuthorModal.Hide(); await AuthorAppService.CreateAsync(NewAuthor);
await GetAuthorsAsync();
CreateAuthorModal.Hide();
}
} }
private async Task UpdateAuthorAsync() private async Task UpdateAuthorAsync()
{ {
await AuthorAppService.UpdateAsync(EditingAuthorId, EditingAuthor); if (EditValidationsRef?.ValidateAll() ?? true)
await GetAuthorsAsync(); {
EditAuthorModal.Hide(); await AuthorAppService.UpdateAsync(EditingAuthorId, EditingAuthor);
await GetAuthorsAsync();
EditAuthorModal.Hide();
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save