blazorblazor-server-side.net-8.0razor-components

How to prevent the redeclaration in blazor razor component


in this code the declared properties is redeclared if I press the filter button which reset the input to empty string so how can I prevent this from happen

    @page "/userManagement"
    @using BlazorAppIdentity8.Data
    @using Microsoft.AspNetCore.Identity
    @using Microsoft.EntityFrameworkCore
    
    @inject UserManager<ApplicationUser> UserManager
    
    <!-- UserManagement.razor -->
    <h3>User Management</h3>
    <div class="form-group">
        <EditForm Model="@Input"  method="post" OnValidSubmit="@OnValidSubmit" FormName="register">
        <input class="form-control" type="text" placeholder="Filter..." @bind="Input.filterTerm" />
        <button type="submit">Filter</button>
        </EditForm>
    </div>
    
    @if (users != null)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var user in users.Where(u => string.IsNullOrWhiteSpace(Input.filterTerm) || u.UserName.Contains(Input.filterTerm, StringComparison.OrdinalIgnoreCase)))
                {
                    <tr>
                        <td>
                            @user.UserName<br />
                            @user.Id<br />
                            @user.DateOfBirth?.ToShortDateString()<br />
                            @user.PhoneNumber
                        </td>
                        <td>
                            <a class="btn btn-primary" href="/editUser/@user.Id">Edit User</a><br />
                            <a class="btn btn-danger" href="/DeleteUser/@user.Id">Delete</a><br />
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    
        <div class="mt-3">
            <h4>Add User</h4>
            <a class="btn btn-primary" href="/addUser">Add User</a>
        </div>
    }
    
    @code {
        private List<ApplicationUser> users;
        private bool _firstRender = false;
        private InputModel Input = new();//this is the prop that reset
                   
        protected override async Task OnInitializedAsync()
        {
            await LoadUsers();
        }
    
        private async Task LoadUsers()
        {
            users = await UserManager.Users.ToListAsync();
        }
        private sealed class InputModel
        {
            
            public string filterTerm { get; set; } = "";
        }
        private async Task OnValidSubmit()
        {
            await LoadUsers();
        }
    }

the filterTerm string is redeclared so rested every time that I input it in the input feild my question is how to prevent this redeclaration?


Solution

  • the problem was that balzor 8 sever side remder mode is static to fix that you have to chenge it to interactiveserver mode by adding @rendermode InteractiveServer afte the @page "" diretive Thanks to the microsoft forum I got the answer and I fixed it