Question 86118 in ASP.NET Question posted in
The official documentation can be found here.

Mudblazor dialog box is reseting a form when you click on a non form area – Asp.net

I’m using a MudDialog that takes in an Id and creates an edit form from a component. When I click on any of the white space around the edit form or even between any of the form fields then the form resets. (For some reason the note field doesn’t reset). The dialog box is functioning and updates the database when you hit the submit button, but this experience of easily resetting every field is not making a good user experience.


`<MudButton ButtonType="ButtonType.Button" @onclick="@((e) => EditDeliverableDialog(context))" Variant="Variant.Filled" Color="Color.Info" Class="ml-auto" Size="Size.Small" StartIcon="@Icons.Outlined.Edit">Edit</MudButton>`

`async Task EditDeliverableDialog(DeliverableDto deliverable)
    {
        var parameters = new DialogParameters { ["DeliverableId"] = deliverable.DeliverableId.ToString() };
        var options = new DialogOptions() { Position = DialogPosition.Center, CloseButton = true, MaxWidth = MaxWidth.Large };
        var dialog = DialogService.Show<DeliverableDialog>("Edit Deliverable", parameters, options);
        var result = await dialog.Result;
    }`


`<MudDialog >
    <DialogContent>
        <ContentWrapper>
            <AlertMessage @ref="_alert" />
                @if (deliverableIdAsInt == 0)
                {
                    <p>Loading table for the deliverable...</p>
                }

                else
                {
                    <SingleDeliverableTable ButtonColor="Color.Primary" IsTitleShown="false" Context=context ButtonVerb="Save" EditedDeliverable=editedDeliverable DeliverableDto=deliverableDto IsDisabled="false" OnValidSubmitForReal=OnValidSubmit SingleDeliverableId=deliverableIdAsInt></SingleDeliverableTable>
                }
        </ContentWrapper>    
    </DialogContent>
</MudDialog>`

This is before clicking anything
This is after clicking

I’ve tried changing some of the dialog options: disable back drop dialog, changing the width of the dialog, position.
I’ve looked for anything that could cause the form to reset. I’ve used the exact same edit component without a dialog box and it doesn’t reset any of the fields. When the fields reset I edited every field and the form is still using the id of the item I clicked on.

With more testing on the edit component form, I noticed where if you go to the form and resize the page then this resets each of the fields as well.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Found out the problem was the edit form was actually being called twice with the single deliverable table form. First call would come up with the correct data from DTO and the second call was resetting the data sent from DTO.


  2. 0

    Hy Stephen! Thank you for sharing your problem! I’m facing the same problem! If I change a MudTextField and click in the text of a checkbox the problem happens too. Not only out of the form area. I noticed that the dialog reload in this situation (clicking out of the form), then I made a workaround. You need to use a nullable DTO variable and copy the Parameter during OnParametersSet:

    [Parameter]
public DeliverableDtoType DeliverableDto {get; set;}

private DeliverableDtoType? _model;

protected override async Task OnParametersSetAsync()
{
   if (_model is null)
        _model = DeliverableDto;
}

    With this code, when the dialog reload, the model will not change.

    Login or Signup to reply.
  3. 0

    In blazor if you click, on something that is a part of your view, you most likely are triggering the equivalent of a StateHasChanged within the component.

    I think the problem you are facing is that you haven’t bound the values of those inputs to a model using the @bind-Value syntax. Meaning that when you’ve added values to your inputs, then clicked, those values weren’t saved onto your model and when the redraw occured you’ve lost your state, as the redraw draws based on the model.

    An example of this would be like this (using a sub component from mudblazor):

    <MudTextField T="string" Text="@_model.Name" Label="Name" Required="true" For="()=>_model.Name"></MudTextField>

    In the above, the text field will be rendered with whatever value is in th emodel, if you modify this text field it’s not updating the model, just the UI. So if a UI refresh is triggered the text field will update back to what it was which is probably blank in your case.

    <MudTextField T="string" @bind-Text="@_model.Name" Label="Name" Required="true" For="()=>_model.Name"></MudTextField>

    adding the @bind- to the Text will make sure that when the value in the text field is changed, the model is also updated.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search