Razor component button @onclick not calling c# method

Question

I'm looking to start creating a new website and I came across blazor/razor for asp.net. I'll say just looking at it, this has me very excited to get away from all of the javascript frameworks. However, like many others, I'm having issues getting a simple @onclick to work, and the more research I do into blazor/razor, the more I get confused. As others have noted, everything seems to keep changing, so the resources I find keep contradicting themselves.

To start, I'm trying to create a simple Razor component (.razor extension) in an ASP.NET Core Web App. I watched the "Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth" video on youtube as a starting guide, and came up with this:

<div class="">
    <input type="text" placeholder="Search..." @bind="@searchValue">
    <button @onclick="Search">Search</button>
</div>

@count

@code {

    string searchValue;
    int count;

    void Search()
    {
        var x = searchValue;
        count++;
    }
}

My problem is, the button @onclick isn't calling the Search method. I've seen several different variations on this syntax and I've tried them all. The video I mentioned had it as

<button onclick="@Search">Search</btton>

but I've found that the @ symbol is now required in front of onclick. I've seen the @ symbol included and not included in front of the method name. If I don't include it, it compiles and runs, but the button doesn't do anything. If I do include it, I get the error message:

Cannot convert method group 'Search' to non-delegate type 'object'. Did you intend to invoke the method?

I found this BlazorFiddle (https://blazorfiddle.com/s/aoa87v05) as a quick testing ground and found that adding both:

<button @onclick="@SomeAction">Click Me</button>
<button @onclick="SomeAction">Click Me</button>

worked fine. So I'm not sure what I'm doing wrong here. (Perhaps this blazor fiddle is on an older version?)

Any help would be greatly appreciated.

For reference, here is the .cshtml page calling this:

@page
@using WebPortal.ComponentLibrary.Common
@model WebPortal.Pages.Reporting.ReportingModel
@{
    ViewData["Title"] = "Reports";
}

<div class="text-center">
    <h1 class="display-4">Welcome to the Web Portal</h1>

    <component type="typeof(SearchBar)" render-mode="static" />

</div>

I've tried each of the options for the render-mode with no luck.

I've also already added "services.AddServerSideBlazor()" and "endpoints.MapBlazorHub();" to the Startup.cs page.

PS: As a side note question, not a big deal, I saw some references to components being called with the syntax

<SearchBar />

, but that's not working for me. Has that been removed? I like that syntax better as it seems cleaner.

Answer 1

You seem to be mixing up Razor and Service Side Pages with Blazor. What do you want to develop? If it's Blazor, watch an up to date Blazor video and start with deploying the standard Blazor Template. Your code works in a BLAZOR page.