EditForm Save and Next buttons

[Soundarya]

Hi,

EditForm Save and Next buttons have to validate model and check if EditContext has been modified.

In an EditForm, in addition to a "Save" button (with type="submit"), there's a second button "Next". This "Next" button should do the following:

1. check if model has been modified (using editContext.IsModified() maybe?)
   1. if yes, display SfDialog with "save" and "cancel" buttons.
      1. upon clicking "Save", validate model (maybe using editContext.Validate() ?)
         1. if validated then call SaveForm() method
         2. else just show form with validation message in model annotations
      2. "cancel" button should just close the SfDialog to show the form 
         
   2. if no, redirect to another razor component.

Could you please propose an elegant solution for these form actions?

[YuvanShankar Arunagiri]

Hi Soundarya,

We have checked your requirement and prepared the sample. Kindly refer to the below code snippet and attachment(sample code with video demonstration).

<EditForm Model="@editorModel">

        ……………………

        <SfButton>Submit</SfButton>

        <SfButton OnClick="OnClickNext">Next</SfButton>

    </EditForm>

 

     <SfDialog @ref="dialogObj" Height="50%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility" IsModal="true">

            <DialogTemplates>

               <Content>

                    <EditForm Model="@editorModel">

                        ……………

                    </EditForm>

            </Content>

        </DialogTemplates>

    </SfDialog>

…………

private void OnClickNext()

    {

        if (editorModel.Name != null) {

            dialogObj.ShowAsync();

        } else {

            // you can handle else condition

        }

    }

If we are misunderstanding your requirement, please share the video demonstration or screenshot of your requirement. Based on that we will check and provide you a better solution quickly.

Regards,

YuvanShankar A

Attachment: Index_aee2b399.zip