When I use EditContext Validation , the SfTab Wizard is refreshed

[mehrdad]

its bad problem for syncfusion wizard. look at this :

i want to customize validate my inputs with EditContext . but when i used , SfTab Reloaded and Jumped to Step1.

Edit Context has NotifyStateChanged for Show The error messages .

may i prevent the reload SfTab in page ?

    <EditForm EditContext="Context">

        <DataAnnotationsValidator />

        <ValidationSummary />

        <SfTab @ref="Tab" ID="BlazorTab" Height="390"

            EnableRtl="true">

            <TabEvents Created="TabCreate"></TabEvents>

            <TabItems>

                <TabItem>

                    <HeaderTemplate>

                        <h3>Step 1</h3>

                    </HeaderTemplate>

                    <ContentTemplate>

                        <SfTextBox name="Name" ValidationGroup="g1" @bind-Value="fullPerson.Person.Name"></SfTextBox>

                        <SfTextBox name="LastName" ValidationGroup="g1" @bind-Value="fullPerson.Person.LastName"></SfTextBox>

                        <SfButton @onclick="ValidateCheck">CHeck Validate</SfButton>

                        <SfButton @onclick="SearchButtonClick">Next</SfButton>

                    </ContentTemplate>

                </TabItem>

                <TabItem>

                    <HeaderTemplate>

                         <h3>Step 2</h3>

                    </HeaderTemplate>

                    <ContentTemplate>

                        <SfTextBox name="LatinName" ValidationGroup="g2" @bind-Value="fullPerson.Person.LatinName"></SfTextBox>

                        <SfButton @onclick="ValidateCheck">CHeck Validate</SfButton>

                        <SfButton @onclick="@SelectTrainBack">Back</SfButton>

                        <SfButton @onclick="@SelectTrainContinue">Next</SfButton>

                    </ContentTemplate>

                </TabItem>

                <TabItem>

                    <HeaderTemplate>

                         <h3>Step 3</h3>

                    </HeaderTemplate>

                    <ContentTemplate>

                        <SfButton @onclick="@PassengerListBack">Back</SfButton>

                        <SfButton @onclick="@PassengerListContinue">Next</SfButton>

                    </ContentTemplate>

                </TabItem>

                <TabItem>

                    <HeaderTemplate>

                         <h3>Step 4</h3>

                    </HeaderTemplate>

                    <ContentTemplate>

                        <SfButton @onclick="@ConfirmBack">Back</SfButton>

                        <SfButton @onclick="@ConfirmPayment">Submit</SfButton>

                    </ContentTemplate>

                </TabItem>

            </TabItems>

        </SfTab>

        <div>

            <SfDialog @ref="AlertDialog" Width=250 Target="#BlazorTab" IsModal=true Visible=false ShowCloseIcon="true">

                <DialogEvents Created="DialogCreate"></DialogEvents>

                <DialogTemplates>

                    <Header><div>Success</div></Header>

                    <Content><div>Your payment successfully processed</div></Content>

                </DialogTemplates>

                <DialogButtons>

                    <DialogButton OnClick="@OnSubmit" Content="OK" IsPrimary="true">

                    </DialogButton>

                </DialogButtons>

            </SfDialog>

        </div>

    </EditForm>

 public EditContext Context { get; set; }

    public FullPerson fullPerson { get; set; } = new FullPerson();

    public class PersonDto

    {

        [Required]

        public string Name { get; set; }

        [Required]

        public string LastName { get; set; }

        [Required]

        public string LatinName { get; set; }

    }

    public class FullPerson

    {

        public PersonDto Person { get; set; }

    }

    protected override void OnInitialized()

    {

        fullPerson.Person = new PersonDto();

        Context = new EditContext(fullPerson);

        base.OnInitialized();

    }

    public async Task ValidateCheck()

    {

        Context = new EditContext(fullPerson.Person);

        if (await Context.Validate("g2"))

        {

            Console.WriteLine("true item");

        }

        else

        {

            Console.WriteLine("false item");

        }

    }

[Mugilraj Govindarajan]

Hi Mehrdad,

Greetings from Syncfusion support.

We had validated your reported query at our end, and let you know that tab gets reinitialized whenever invoke the ValidateCheck method, this is because of new EditContext is initialized inside the ValidateCheck method in your shared code snippet. To resolve the problem initialize the EditContext in the OnInitialized lifecycle alone as highlighted in the below code snippet.

    protected override void OnInitialized()

    {

        fullPerson.Person = new PersonDto();

        Context = new EditContext(fullPerson.Person);

        base.OnInitialized();

    }

 

    public async Task ValidateCheck()

    {

        if (Context != null && Context.Validate())

        {

            Console.WriteLine("true item");

        }

        else

        {

            Console.WriteLine("false item");

        }

        await Task.CompletedTask;

    }

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,
Mugilraj G

Attachment: Index_d0f96af1.zip