Question 252456 in ASP.NET Question posted in
The official documentation can be found here.

I'm unable to create an @onclick event in Blazor, following an ASP.NET tutorial

I’m following the ASP.NET tutorial on youtube, and I’m having trouble creating an onclick event. I’m using blazor and the following code is a razor file. I’m using .NET 8.0 preview.

Image where code is more readable here

@using Microsoft.AspNetCore.Components.Web
@using webtest.WebSite.Models
@using webtest.WebSite.Services
@inject JsonFileProductService ProductService

@namespace webtest.WebSite.Components

<div class="card-columns">
    @foreach (var jobAd in ProductService.GetJobAds())
    {
        <div class="card">
            <div class="card-body">
                <a href="@jobAd.Url" target="_blank">finn.no link</a>
            </div>
            <div class="card-body">
                <h5 class="card-title">@jobAd.Title</h5>
            </div>
           
        </div>
        <div class="card-footer">
            <small class="text-muted">
                @code{
                    //@onclick is a blazor event
                }
                <button @onclick="@(e=>SelectAd(jobAd.Id))"
                    data-toggle="modal" data-target="#jobAdModal" class="btn btn-primary">More info</button>
            </small>
        </div>
    }
</div>

@code{
    JobAd selectedAd;
    string selectedAdId;

    void SelectAd(string adId){
        selectedAdId=adId;
        selectedAd=ProductService.GetJobAds().First(x => x.Id == adId);
        System.Console.WriteLine("Hello there");
    }
}

In line 25 and 26, I’m creating a button. The button is created successfully, but the function SelectAd() is never called. It’s as if the @onclick command is not recognized and it doesn’t know what to do with the following string.

However, even though there are code marked in red, the website and all the buttons compile just fine. Does anyone have any insight to what’s going on here?

Edit:
I tried simplifying by replacing the lambda expression with a function, but no luck.
Image

<div class="card-columns">
    @foreach (var jobAd in ProductService.GetJobAds())
    {
        <div class="card">
            <div class="card-body">
                <a href="@jobAd.Url" target="_blank">finn.no link</a>
            </div>
            <div class="card-body">
                <h5 class="card-title">@jobAd.Title</h5>
            </div>
           
        </div>
        <div class="card-footer">
            <small class="text-muted">
                <button class="btn btn-primary"     @onclick="UpdateHeading">@currentButton</button>
            </small>
        </div>
    }
</div>




@code{
    JobAd selectedAd;
    string selectedAdId;
    string currentButton = "Initial button";
    string newButton = "Update button!!";
    void SelectAd(string adId){
        selectedAdId=adId;
        selectedAd=ProductService.GetJobAds().First(x => x.Id == adId);
        System.Console.WriteLine("Hello there");
    }
    private void UpdateHeading(){
        currentButton=newButton;
    }
Tags:

3

Answers


  1. 0

    You seem to be using data-toggle which probably breaks the onclick handling. You can try removing that to see if your handler is called then

    Login or Signup to reply.
  2. 0

    This is a vey basic version of your code. Add it to Index and click the button. This works. If it doesn’t work on your site then there’s something drastically wrong with your setup.

    @page "/"

<PageTitle>Index</PageTitle>

<div class="card-columns">
    <div class="card">
        <div class="card-body">
            Hello
        </div>
        <div class="card-body">
            <h5 class="card-title">Blazor</h5>
        </div>

    </div>
    <div class="card-footer">
        <small class="text-muted">
            <button class="btn btn-primary" @onclick="OnClicked">Update</button>
        </small>
    </div>
</div>
<div class="alert alert-primary m-3">
    @message
</div>

@code {
    string? message;

    private void OnClicked()
    {
        message = $"clicked at {DateTime.Now.ToLongTimeString()}";
    }
}
    Login or Signup to reply.
  3. 0

    The tutorial you linked is using Razor components i.e. .cshtml and you’re using Blazor components i.e. .razor (all very confusing)

    So, most likely your project is not configured to use blazor components. I would suggest creating a new Blazor Web App project which is also using the same frameworks as ASP.NET Core web App however, this project template is already configured to work with blazor .razor components.

    enter image description here

    Make sure to select either of the Interactive options below.

    enter image description here

    Also, you need to include a page render mode at the top of your .razor component for interactivity.

    @attribute [RenderModeServer]
<PageTitle>Home</PageTitle>

    Then your code should work as is.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search