ASP Razor pages BindProperties values lost on Post-CodePudding

I 'm working with an ASP Razor project (.Net5). Thee is a page with the user list and a filter. The goal is to present the user that match the filtering criteria. The code below is able to do the filtering but the filtering values are lost (become blank) everytime the filtering is done.

I have [BindProperties] and I don;t understand why it works for the UserList (the table data) and not for the filter criteria.

I tried to reassign the values but it;s not working. Does anyone has an idea how to solve this? Any pointer to the underlying reason and documentation page would be appreciated. I have looked at https://www.learnrazorpages.com/razor-pages/tempdata but I'm not sure it's the way to go.

Also do not hesitate to give feedback on the code itself as it's literally my first ASP.Net project.

UserList.cshtml

@model Web.Areas.Admin.Pages.UserListModel
@{
    ViewData["Title"] = "User list";
}
<h1>User list</h1>

<div>
    <form method="post">
        <label asp-for="UserNameFilter"></label>
        <input type="text" name="UserNameFilter" /> @*This input criteria reset when I click on filter*@
        <input type="submit" value="Filter" />
    </form>
</div>

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>User Name</th>
            <th>Email</th>
            <th>Password</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var user in Model.UserInfos)
        {
        <tr>
            <td>@user.Id</td>
            <td>@user.UserName</td>
            <td>@user.Email</td>
            <td>
                <a asp-page="/UserUpdate" asp-route-id="@user.Id">Edit</a> |
                <a asp-page="/Details" asp-route-id="@user.Id">Details</a> |
                <a asp-page="/UserDelete" asp-route-id="@user.Id">Delete</a>
            </td>
        </tr>
        }
    </tbody>
</table>

UserList.cshtml.cs

using System.Collections.Generic;
using System.Linq;
using Entities;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Services;

namespace Web.Areas.Admin.Pages
{
    [Authorize(Roles = "ADMIN")]
    [BindProperties]
    public class UserListModel : PageModel
    {
        public string UserNameFilter { get; set; }
        public List<UserInfo> UserInfos { get; set; }
        private readonly IUserService _userService;

        public UserListModel(IUserService userService)
        {
            _userService = userService;
        }

        public void OnGet()
        {
            UserInfos = _userService.GetUserInfoList(new UserInfoFilter()).ToList();
        }

        public void OnPost()
        {
            var userInfoFilter = new UserInfoFilter
            {
                UserName = UserNameFilter
            };
            UserInfos = _userService.GetUserInfoList(userInfoFilter).ToList();
        }
    }
}

CodePudding user response：

So that was a basic answer... you need to assign the value of the input with the model...

<input type="text" name="UserNameFilter" value="@Model.UserNameFilter"/>

I'm leaving the post and answer here for other noob like me in future. Keep coding..