Ends in:
1 DAY
23 HRS
16 MIN
42 SEC
Ends in:
1 D
23 H
16 M
42 S
Open Closed

AbpCrudPageBase should keep current state for New/Editing #1029


User avatar
0
Leonardo.Willrich created
  • 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:

  1. 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?

  2. 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)
  • User Avatar
    0
    mladen.macanovic created

    Hi,

    1. 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.


    1. 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.

  • User Avatar
    0
    Leonardo.Willrich created

    Ok, I got it. Thank you!

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35