0

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.

7
  • The standard, simple code is @onclick="IncrementCount". onclick without the @ is for JavaScript. Commented Jul 27, 2021 at 20:35
  • @HenkHolterman So including @ in front of the method name: @onclick="@IncrementCount" is not correct? This method is not doing anything when pressing the button. The count is not being incremented. Commented Jul 27, 2021 at 20:39
  • It's not working because you set the render mode to static. That means that only static HTML (without js handlers) is rendered. <SearchBar /> doesn't work because you can only use this syntax if you are already inside the blazor root element, which you are not. So, what is your intention? Do you have an existing page and what to replace some parts with Blazor? Commented Jul 27, 2021 at 20:46
  • I'm trying to create a reusable component, in this case a search bar, that I can insert into any page and have it render where I place it. Which render mode would be appropriate for this? I've tried all of them with no affect. Commented Jul 27, 2021 at 20:53
  • 1
    @onclick="@IncrementCount" is also correct because you can prefix any C# name with @. But don't do it, it is clutter. Commented Jul 27, 2021 at 20:54

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

That did it! I guess I was using the wrong template and I thought they were compatible. I switched to a Blazor Server App and it's working. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.