Button click not firing

Radzen Studio Blazor Server
1

Hello! I have a RadzenButton that should retrieve more data from the server but the click action is never trigged, with a "regular" button it fires with no problem.

Here is my code

-- View

@page "/Ingredients"
@using Chooser.Portal.BackendServices.DataModels.Ingredients.GetByRestaurant
@if (Ingredients != null)
    @foreach (var item in Ingredients)
    {
        <label>@item.Name</label>
        <br />
    }

@if (Errors != null)
    @foreach (var error in Errors)
    {
        <label style="color:red">@error</label>
    }

<button @onclick="LoadMore">Load More</button>
<Radzen.Blazor.RadzenButton @onclick="@LoadMore"> LoadMore </Radzen.Blazor.RadzenButton>

-- CodeBehind

using Chooser.Portal.BackendServices.DataModels.Ingredients.GetByRestaurant;
using Chooser.Portal.BackendServices.RequestServices;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Chooser.Portal.Pages.Portal.IngredientArea.Index
{
    public partial class IndexView : ComponentBase
    {
        [Inject]
        public IIngredientsService _ingredientsService { get; set; }

        [Parameter]
        public List<GetByRestaurantResponseItem> Ingredients { get; set; }

        [Parameter]
        public List<string> Errors { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender && Ingredients == null)
            {
                await Initiaze();
                StateHasChanged();
            }
            await base.OnAfterRenderAsync(firstRender);
        }


        internal async Task Initiaze()
        {
            await LoadData();
        }

        internal async Task LoadData()
        {
            var result = await _ingredientsService.GetIngredients();
            Console.WriteLine("Called");
            if (result.Success)
            {
                if (Ingredients == null)
                    Ingredients = result.Data.Ingredients;
                else
                    Ingredients.AddRange(result.Data.Ingredients);
            }
            else
            {
                Errors = result.Messages;
            }
        }

        internal async Task LoadMore()
        {
            await LoadData();
            StateHasChanged();

        }
    }
}

-- Imports

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Chooser.Portal
@using Chooser.Portal.Shared
@using Radzen
@using Radzen.Blazor

--Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Chooser.Portal</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>

</html>

I have watched a lot of tutorials and I cannot find the problem =/

Thanks in advance

2

You need to use @Click instead of @onclick

1 Like
3

Thank you @korchev! Worked like a charm!