AbpCrudPageBase should keep current state for New/Editing #1029 | Support

Leonardo.Willrich created 3 years ago

ABP Framework version: v4.2.2
UI type: Angular / MVC / Blazor
DB provider: EF Core / MongoDB
Tiered (MVC) or Identity Server Separated (Angular): yes / no
Exception message and stack trace:
Steps to reproduce the issue:

Hi, I am implemeting my first CRUD using AbpCrudPageBase class. I have two questions about that:

Is it allways required having two MODAL markup and repeat the fields? If the Create and Edit modal are exactly the same, do I need to repeat that?
In events onChange, I have two variables, NewEntity and EditingEntity. How I know if I am editing or creating a new record? The only way that I've found to resolve that was creating two different events and then duplicating code or creating a third method and pass the EntityDto as parameter.

For example, to load an image in the event <FileEdit Changed="">, I did the code below. Is there a better way to do that?

protected async Task OnChangedLogoNew(FileChangedEventArgs e)
{
    await ChangedLogo(e, NewEntity);
}

protected async Task OnChangedLogoEditing(FileChangedEventArgs e)
{
    await ChangedLogo(e, EditingEntity);
}

protected async Task ChangedLogo(FileChangedEventArgs e, CreateUpdateSupplyNetworkDto currentDto)
{
    try
    {
        foreach (var file in e.Files)
        {
            // A stream is going to be the destination stream we're writing to.
            using (var stream = new MemoryStream())
            {
                await file.WriteToStreamAsync(stream);
                stream.Seek(0, SeekOrigin.Begin);
                currentDto.Logo = stream.ToArray();
            }
        }
    }
    catch (Exception exc)
    {
        Console.WriteLine(exc.Message);
    }
    finally
    {
        this.StateHasChanged();
    }
}

2 Answer(s)

mladen.macanovic created 3 years ago

Hi,

In our current implementation of AbpCrudPageBase it is required to have two modals for new and edit operations. If you don't want to make too much duplicate code you can optimize it a little by creating a new wrapper component for the modal fields. eg

Create a component named UserFields.razor

<Validation MessageLocalizer="@LH.Localize">
    <Field>
        <FieldLabel>@L["DisplayName:Name"]</FieldLabel>
        <TextEdit @bind-Text="Entity.Name">
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>
<Validation MessageLocalizer="@LH.Localize">
    <Field>
        <FieldLabel>@L["DisplayName:Surname"]</FieldLabel>
        <TextEdit @bind-Text="Entity.Surname">
            <Feedback>
                <ValidationError />
            </Feedback>
        </TextEdit>
    </Field>
</Validation>
@code{
  [Parameter] public IdentityUserCreateOrUpdateDtoBase Entity { get; set; }
}

And in modals pass it an entity reference

<Modal @ref="CreateModal">
        <ModalBackdrop />
        <ModalContent Centered="true">
            <Form>
                <ModalHeader>
                    <ModalTitle>@L["NewUser"]</ModalTitle>
                    <CloseButton Clicked="CloseCreateModalAsync" />
                </ModalHeader>
                <ModalBody>
                    <Validations @ref="@CreateValidationsRef" Model="@NewEntity" ValidateOnLoad="false">
                        <UserFields Entity="@NewEntity" />
                    </Validations>
                </ModalBody>
                <ModalFooter>
                    <Button Color="Color.Secondary" Clicked="CloseCreateModalAsync">@L["Cancel"]</Button>
                    <SubmitButton Clicked="@CreateEntityAsync" />
                </ModalFooter>
            </Form>
        </ModalContent>
    </Modal>

The same can be done for edit modal.

You can distinguish New from Editing operation when you click on the New or Edit buttons.

For example , create an enum Operation { Create, Edit } and override OpenCreateModalAsync and OpenEditModalAsync to set your variable operation = Operation.Create or operation = Operation.Edit.

That way you can decide which entity to change.

Regarding your final question for FileEdit, it looks good. That is how it is meant to be used.

0

Leonardo.Willrich created 3 years ago

Ok, I got it. Thank you!

Have an answer to this question? Log in and write your answer.

Assignee

mladen.macanovic

Labels