Blazor and ValidationGroups

Question

I am in ASP.NET since the first version of .NET Framework and I am used to some features that are missing now. Please notice that I've just recently moved to Blazor.

Currently, I am wondering why the ValidationGroups are not part of it. I have a kind of Wizard with 3 steps and I need to validate every step separately.

For example, firstly I gather the user name. In the second contact details and in the last step I ask them to upload some documents.

With the ValidationGroups it was super easy in the past, but now I am stuck considering to remove the steps and have a single form - this would be a kind of compromise.

Thank you

Answer 1

Blazor is SPA with components, there is no postback. Each wizard page is its own component and has its own page model. On navigation it validates the page model.

if converting an aspx page that had two groups, in Blazor you’d make a component for each group.

Answer 2

If so, how to I get all the info at the end (last component)? Meaning, I need to save user name, contact info and finally the documents.

Typically data is stored in a database. The data is fetched using a unique key. The key can be passed to components as a route parameter.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-9.0#route-parameters

How to make them communicate between each other?

There are many ways to pass data or persist state. Perhaps if you give us an example that illustrates the problem we can fill in the gaps or provide an alternative approach. Or perhaps reading the official documentation will help.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-9.0#child-content-render-fragments

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-9.0

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-9.0#pass-data-across-a-component-hierarchy

https://learn.microsoft.com/en-us/aspnet/core/blazor/state-management?view=aspnetcore-9.0&pivots=server

Answer 3

Yes you can have multiple edit forms on a page. But with a wizard, only one wizard component would be rendered at a time.

I would expect the page hosting the wizard would manage state and its persistence. The wizard components would just update this state.

also as an app refresh/reset loses all in memory state data, you should spend some effort and persisting state for recovery, especially with a wizard.

Answer 4

Hi @Kuler Master

can I have multiple EditForms in a single razor compenent/page?

Yes, you can use multiple edit forms in a single Razor component/page. It will validate each form separately and you can access the data of different forms in the OnValidSubmit method.

Refer to the following sample code:

    @page "/multiple-forms"
    @using System.ComponentModel.DataAnnotations

    <h3>Form 1</h3>
    <EditForm Model="@form1Model" OnValidSubmit="HandleSubmitForm1">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div>
            <label>Field 1:</label>
            <InputText id="field1" @bind-Value="form1Model.Field1" />
            <ValidationMessage For="@(() => form1Model.Field1)" />
        </div>
        <button type="submit">Submit Form 1</button>
    </EditForm>

    <h3>Form 2</h3>
    <EditForm Model="@form2Model" OnValidSubmit="HandleSubmitForm2">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div>
            <label>Field 2:</label>
            <InputText id="field2" @bind-Value="form2Model.Field2" />
            <ValidationMessage For="@(() => form2Model.Field2)" />
        </div>
        <button type="submit">Submit Form 2</button>
    </EditForm>

    @code {
        private Form1Model form1Model = new();
        private Form2Model form2Model = new();

        private void HandleSubmitForm1()
        {
            // Process form 1 data
        }

        private void HandleSubmitForm2()
        {   // Access form1Model data here
            var field1Data = form1Model.Field1;
        
            // Process form 2 data along with form 1 data if needed 
        }

        public class Form1Model
        {
            [Required]
            public string Field1 { get; set; }
        }

        public class Form2Model
        {
            [Required]
            public string Field2 { get; set; }
        }
    }

The result as below:

After submitting form 1:

After submitting form 2:

And we can get the form1 data in the Form2's OnValidSubmit method:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion