How to keep values defined outside bootstrap modal without reset after submit bootstrap modal ?

Question

I worked on blazor server side .I face issue on blazor component user name is reset after submit bootstrap modal I have bootstrap model have some controls i make submit to insert data but after insert i refresh page to display data after that any variable as user name outside bootstrap modal reset value so How to keep values outside bootstrap modal have values without reset after submit user name before submit have name Michel after submit on bootstrap modal become null component name

/Servers/ServersNames

                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel" style="margin-right:100px;">
                                                @ModalTitle
                                       
                                            </h5>
                                    
                                    <button type="button" style="background-color: white !important;" data-bs-dismiss="modal">X</button>
                                        </div>
                                <EditForm Model="@sn">
                                           
                                            <div class="modal-body">
                                                <div class="d-flex flex-row bd-highlight mb-3">
                                                    <div class="p-2 w-100 bd-highlight">
                                                        <div class="form-group row">
                                                   
                                                            <input type="hidden" class="form-control" @bind="@sn.ServerID" />
                                                        </div>
                                                        <div class="form-group row">
                                                            <label for="example-text-input" class="col-3 col-form-label required">Server Name</label>
                                                            <div class="col-9">
                                                                <input type="text" class="form-control" @bind="@sn.Server_Name"/>
                                                               
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                    <label for="example-text-input" class="col-3 col-form-label required">Server Type</label>
                                                            <div class="col-9">
                                                                <input type="hidden" class="form-control" @bind="@sn.ServerTypeId" />
                                                                <select class="form-select" @bind="@sn.ServerTypeId">
                                                                    <option value="0">--Select--</option>
                                                                    @foreach (var servertype in serverType)
                                                                    {
                                                                        <option value="@servertype.serverTypeId">
                                                                            @servertype.serverType
                                                                        </option>
                                                                    }

                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <label for="example-text-input" class="col-3 col-form-label">Server Version</label>
                                                            <div class="col-9">
                                                                <input type="text" class="form-control" @bind="@sn.Version" />
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <label for="example-text-input" class="col-3 col-form-label">Operating System</label>
                                                            <div class="col-9">
                                                                <input type="text" class="form-control" @bind="@sn.Operating_System" />
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-text">
                                                                    <InputCheckbox @bind-Value="@sn.IsActive" />
                                                                </div>
                                                        <label class="form-check-label" for="IsActive" style="padding-top:5px;">IsActive?</label>
                                                            </div>
                                                        </div>
                                                        @if (ModalTitle == "Add Server")
                                                        {
                                                            @*                       @onclick
                                                        = "CreateClick"*@
                                                    //disabled = "@(!context.Validate())"
                                                    <button type="submit" class="btn btn-primary" @onclick="CreateClick">
                                                                Create
                                                            </button>
                                                   
                                                        }
                                                        else
                                                        {
                                                    <button type="button" class="btn btn-primary" @onclick="UpdateClick">
                                                                Update
                                                            </button>
                                                        }
                                                    </div>
                                                </div>


                                            </div>
                                        </EditForm>
                                    </div>

                                </div>

                            </div>

I navigate to same component after insert data to see data inserted

private async Task CreateClick()
    {
        
        
            //alertMessageShow = true;
            //success = "Server Name Is Empty await swal.FireAsync(new SweetAlertOptions{
            await swal.FireAsync(new SweetAlertOptions
                {
                    Title = "Error",
                    Text = "Server Name Is Empty",
                    Icon = SweetAlertIcon.Error,
                    ShowCancelButton = false
                    // CancelButtonText="No"
                });

            return;
        }
        if (sn.ServerTypeId == 0 || sn.ServerTypeId == null)
        {
            //alertMessageShow = true;
            //success = "Server Name Is Empty await swal.FireAsync(new SweetAlertOptions{
            await swal.FireAsync(new SweetAlertOptions
                {
                    Title = "Error",
                    Text = "Server Type Is Empty",
                    Icon = SweetAlertIcon.Error,
                    ShowCancelButton = false
                    // CancelButtonText="No"
                });

            return;
        }
        var deptobj = sn;

        // deptobj = new ServerNamesClass() { server_Name = server_Name, server_Type = server_Type,serverTypeId=serverTypeId, operating_System = operating_System, version = version,isActive=IsActive };
        await CheckExistOrNot(deptobj.Server_Name);
        if (checkExist > 0)
        {
            // await JS.InvokeVoidAsync("alert", "Issue Server Exist Before");
            await swal.FireAsync(new SweetAlertOptions{
                Title="Confirmation",
                    Text = "Issue Server Exist Before",
                    Icon=SweetAlertIcon.Error,
                    ShowCancelButton=false
                   // CancelButtonText="No"
            });
            //var confirm = !string.IsNullOrEmpty(res.Value);
            //if(!confirm)
            //{
            //    context
            //}
            return;
        }
        else
        {
            var request = new HttpRequestMessage(HttpMethod.Post, config["API_URL"] + "ServerNames");
            request.Content = new StringContent(JsonSerializer.Serialize(deptobj), null, "application/json");
            var client = ClientFactory.CreateClient();
            UserName = UserName;
            var response = await client.SendAsync(request);
            
        
        
       
           
                {
                    Title = "Confirmation",
                    Text = "Insert Success",
                    Icon = SweetAlertIcon.Success,
                    ShowCancelButton = false
                    // CancelButtonText="No"
                });
            navigationManager.NavigateTo("/Servers/ServersNames", true);
            
            
        }


    }

Answer 1

first, you should not be using the bootstrap javascript library, just the css. your blazor code should handle setting the display classes for the modal (or even including it in the dom).

second, for child component to set a parents component property, you need to use cascading values:

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

Answer 2

Hi @Ahmed Salah Abed Elaziz

How to keep values defined outside bootstrap modal without reset after submit bootstrap modal ?

From your code, after insert the data success, you will navigate to current page using navigationManager.NavigateTo() method, the page refresh and the username is null.
To persist the value, you can store it in the Browser storage (localStorage/sessionStorage).
Refer to the following sample: In the button click event, store the username into the session store, after navigation, get the username from session store and re-bind the value:

    @page "/form-example-1"
    @using Microsoft.Extensions.Logging
    @using Blazorserversample.Data
    @inject NavigationManager navigationManager
    @inject ILogger<FormExample1> Logger

    @using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
    @inject ProtectedSessionStorage ProtectedSessionStore

    <input @bind="@username" />
    <EditForm Model="@exampleModel">
        <InputText id="name" @bind-Value="exampleModel.Name" />
        <button type="submit" @onclick="CreateClick">Submit</button>
    </EditForm>

    @code {
        private ExampleModel exampleModel = new();
        private string? username { get; set; } 
        private void HandleSubmit()
        {
            Logger.LogInformation("HandleSubmit called");

            // Process the form
        }
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            { 
                await LoadStateAsync();
                StateHasChanged();
            }
        }
        private async Task LoadStateAsync()
        {
            var result = await ProtectedSessionStore.GetAsync<string>("name");
            username = result.Success ? result.Value : "";
            exampleModel.Name = result.Success ? result.Value : "";
        }
        private async Task CreateClick()
        { 
            await ProtectedSessionStore.SetAsync("name", username);
            navigationManager.NavigateTo("/form-example-1", true);
        }
    }

The result as below:

---

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