General workflow for a form submit with a confirm dialog

[John Phillips]

I am using the Blazor built in EditForm/OnValidSubmit functionality. When the form is submitted, the OnValidSubmit method is fired before the dialog opens (via the submit button's @onclick event). Essentially, this is a "are you sure?" kind of scenario to give the user a chance to cancel the form submission... Is there 'best practice' for doing this? Thank you in advance!

[Revanth Krishnan]

Hi John, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your “General workflow for a form submit with a confirm dialog before the OnValidSubmit”. 

 

This requirement can be achieved by using the submit button in the form with ‘type’ as ‘button’ and in the ‘onclick’ event to display a confirmation dialog, where clicking the ok button in the dialog will submit the form and cancel will prevent the submission. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<EditForm Model="@employee" OnValidSubmit="@FormSubmissionHandler"> 

    <h3>EditForm with confirmation Dialog</h3> 

    <p> 

        <label>Enter you name</label> 

        <InputText id="FirstName" @bind-Value="employee.FirstName" /> 

    </p> 

    <p><button type="button" @onclick="@formSubmit">Submit</button></p> 

</EditForm> 

<SfDialog @ref="dialogObj" IsModal="true" Width="30%" Height="30%" @bind-Visible="@IsVisible"> 

    <DialogTemplates> 

    <Content> Are you sure you want to Submit the form? </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@submitConfirm" /> 

        <DialogButton Content="Cancel" OnClick="@submitCancel" /> 

    </DialogButtons> 

</SfDialog> 

@code { 

 

    Employee employee = new Employee(); 

 

    private void FormSubmissionHandler() 

    { 

        Console.WriteLine(employee.FirstName); 

    } 

    public class Employee 

    { 

        public string FirstName { get; set; } = "Charls"; 

    } 

 

    SfDialog dialogObj; 

    public bool IsVisible { get; set; } = false; 

    public void formSubmit() 

    { 

        this.dialogObj.Show(); 

    } 

 

    public void submitConfirm() 

    { 

        this.dialogObj.Hide(); 

        this.FormSubmissionHandler(); 

    } 

    public void submitCancel() 

    { 

        this.dialogObj.Hide(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163439/ze/EditForm_Submit_Dialog-563949154 

 

Please check the code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[John Phillips]

Thank you, this is perfect! Cleaner than what I came up with. :)

[Revanth Krishnan]

Hi John, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement, please let us know if you need any further assistance. 

 

Regards, 

Revanth