C#•13mo ago

❔ Blazor @bind not triggering update

Hello everyone I'm trying to display a select that will trigger a database fetch on select and display the values with Blazor and .NET8. The issue i'm facing is that @bind doesnt seem to update my variable. I also try different things with @onchange, @oninput or @onselect but it seems like it's never firing any function Obviously I'm missing something here but I can't see what

6 Replies

NaarfyOP•13mo ago

<h3>Settings @_username</h3>

<div class="form-group">
    <label for="roleSelect">Select Role:</label>
    <select class="form-control" id="roleSelect"  @bind="_selectedRoleValue" @oninput="OnSelectedRoleChanged">
        <option value="">Select a role</option>
        @foreach (var role in _allRoles.Where(r => r != "Super Admin"))
        {
            <option value="@role">@role</option>
        }
    </select>
    @_selectedRoleValue
</div>

@if (!string.IsNullOrEmpty(_selectedRoleValue))
{
    <h4>Permissions for selected role: @_selectedRoleValue</h4>
    @foreach (var permission in _filteredPermissions)
    {
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="@($"permission_{permission.Id}")" @bind="permission.CanCreatePost" />
            <label class="form-check-label" for="@($"permission_{permission.Id}")">Create new category.</label>
        </div>
    }
}

@code {

    

    private string test = "test";

    private List<UserPermissions> _userPermissions = new List<UserPermissions>();
    private List<UserPermissions> _filteredPermissions = new List<UserPermissions>();
    private ApplicationUser _user = default!;
    private string? _username;
    private IList<string> _allRoles;
    private string _selectedRoleValue = string.Empty;
    private string? _phoneNumber;

    protected override async Task OnInitializedAsync()
    {

        _user = await UserAccessor.GetRequiredUserAsync();
        _username = await UserManager.GetUserNameAsync(_user);

        _allRoles = await DbContext.Roles.Select(r => r.Name).ToListAsync();

        foreach (var role in _allRoles)
        {
            var userPermission = await DbContext.UserPermissions
                .Include(up => up.Role)
                .Where(up => up.Role.Name == role)
                .FirstOrDefaultAsync();

<h3>Settings @_username</h3>

<div class="form-group">
    <label for="roleSelect">Select Role:</label>
    <select class="form-control" id="roleSelect"  @bind="_selectedRoleValue" @oninput="OnSelectedRoleChanged">
        <option value="">Select a role</option>
        @foreach (var role in _allRoles.Where(r => r != "Super Admin"))
        {
            <option value="@role">@role</option>
        }
    </select>
    @_selectedRoleValue
</div>

@if (!string.IsNullOrEmpty(_selectedRoleValue))
{
    <h4>Permissions for selected role: @_selectedRoleValue</h4>
    @foreach (var permission in _filteredPermissions)
    {
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="@($"permission_{permission.Id}")" @bind="permission.CanCreatePost" />
            <label class="form-check-label" for="@($"permission_{permission.Id}")">Create new category.</label>
        </div>
    }
}

@code {

    

    private string test = "test";

    private List<UserPermissions> _userPermissions = new List<UserPermissions>();
    private List<UserPermissions> _filteredPermissions = new List<UserPermissions>();
    private ApplicationUser _user = default!;
    private string? _username;
    private IList<string> _allRoles;
    private string _selectedRoleValue = string.Empty;
    private string? _phoneNumber;

    protected override async Task OnInitializedAsync()
    {

        _user = await UserAccessor.GetRequiredUserAsync();
        _username = await UserManager.GetUserNameAsync(_user);

        _allRoles = await DbContext.Roles.Select(r => r.Name).ToListAsync();

        foreach (var role in _allRoles)
        {
            var userPermission = await DbContext.UserPermissions
                .Include(up => up.Role)
                .Where(up => up.Role.Name == role)
                .FirstOrDefaultAsync();

I should add that LLM have been completely useless and don't see what's wrong

Joschi•13mo ago

Did you try adding an interactive rendermode, because you currently got a static site as far as I can tell.

NaarfyOP•13mo ago

I created the template with —interactivity Auto

Joschi•13mo ago

Does that add the Auto directive to the Routes.blazor ? Becaus I would have guessed, that that just registers both wasm and sever interactivity in the program.cs

NaarfyOP•13mo ago

Thanks for your reply. I have this

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

I added

@rendermode RenderMode.InteractiveServer

@rendermode RenderMode.InteractiveServer

to my page. and it works now. Thank you so much

Accord•13mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Blazor @bind not triggering update