Updating Model Causes Problems in Bound Controls

[Robert]

I have found that if I reset the model behind a view (for instance, if the user wants to reset the values they have entered into a form) I run into problems when an EventCallBack is invoked. The old values re-appear in the textboxes. These values have been removed from the model.

This error occurs when the model is passed as a parameter.

Please see the attached project for a working example. 

Please note, that I understand that I could workaround this problem simply by updating the fields and not the whole model as an object, but this becomes problematic, if not impossible, when working with a model that is bigger and more complicated and involves properties that are lists of other objects.

I've found that if I swap out the Syncfusion controls for standard controls the textboxes behave as expected.

Screenshot 1 of 3. After the page has loaded I have entered some additional text in the First Name property.

Screenshot 2 of 3. Clicking 'Undo Changes', which resets the model, resets the view as expected.

Screenshot 3 of 3. However, if I then click Save Changes, which in the example only invokes a callback, nothing more. The text boxes revert back to their previous value. This does not now reflect the property to which the textbox is bound.

Attachment: ViewUpdateBugApp2_d95249e6.zip

[Berly Christopher]

Hi Robert, 

  

Greetings from Syncfusion support.  

  

We have checked the provided sample and the reported issue caused due to the bound “bind-value” attribute to the TextBox component. The same issue will occur with the native InputText and input type text elements, when it binds to the “bind-value” attribute. This is because the bind-value attribute will maintain the recent changes updated in the component inside the model class “employee”. Hence, we suggest you to bind the Value property to the component instead, to get rid of the reported issue at your end. 

  

    <EditForm Model="ViewModel" OnValidSubmit="HandleValidSubmit"> 

 

            <div class="form-group row"> 

                <div class="col-md-4"> 

                    <EjsTextBox Placeholder="First Name" FloatLabelType="@FloatLabelType.Auto" Value="@ViewModel.FirstName"></EjsTextBox> 

                </div> 

                <div class="col-md-4"> 

                    <EjsTextBox Placeholder="Last Name" FloatLabelType="@FloatLabelType.Auto" Value="@ViewModel.LastName"></EjsTextBox> 

                </div> 

            </div> 

 

            <div class="form-group row"> 

                <div class="col-md-12"> 

                    <EjsButton CssClass="e-danger" Type="button" OnClick="UndoChanges">Undo Changes</EjsButton> 

                    <EjsButton Type="sumbit">Save Changes</EjsButton> 

                </div> 

            </div> 

 

    </EditForm> 

 

  

Please find the modified sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/152040/ze/TextBox_152040_Blazor-2131658622  

  

Regards, 

Berly B.C 

[Robert]

Thank you for your quick response.

I can see I was mistaken in attributing this to the Syncfusion control and that it actually relates to Blazor.

I have to admit to being puzzled by the behaviour. I'll try to dig deeper and then, if no luck, will post it on the aspnetcore github issues page to see what they think.

[Berly Christopher]

Hi Robert, 

  

Thanks for the update. You can try the solution provided in our previous update and let us know if you need further assistance on this.  

  

Regards, 

Berly B.C