I am learning asp and have come across blazor components. I am trying to bind to a buttons on click function, however when I look online I find funcitons that look like:
<button @onclick="SelectProduct(product.Id)" ... >More Info</button>However this code produces nothing and if I put a break point in my SelectProduct function, it is never called.
If I change it to this, which I have not seen online, it was just me playing with it:
<button onclick="@SelectProduct(product.Id)" ... >More Info</button>Then the fucntino is called, but only on page intiallization, and it doesn't seem to be boud to the on click function. Can someone let me know how I am supposed to be doing this? The full blazor component is below.
@using Models.Entity@using InventoryApplication.WebSite.Services@inject JsonProductService ProductService@{var products = ProductService.GetProducts();}<div class="card-columns"> @foreach (var product in products) {<div class="card"><div class="card-body"><h5 class="card-title">@product.DisplayName</h5></div><div class="card-footer"><button @onclick="SelectProduct(product.Id)" data-bs-toggle="modal" data-bs-target="#productModal" class="btn btn-primary"> More Info</button></div></div> }</div><div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productTitle" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="productTitle">@selectedProduct?.DisplayName</h5><button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"> @if (selectedProduct != null) {<div class="card"><div class="card-body"><p class="card-text">Category: @selectedProduct.Category</p><p class="card-text">Quantity: @selectedProduct.Quantity</p><p class="card-text">Price: $@(selectedProduct.Price.HasValue ? selectedProduct.Price.Value.ToString("F2") : "N/A")</p></div></div> }</div></div></div></div>@code { Product? selectedProduct; Product SelectProduct(uint Id) { return selectedProduct = ProductService.GetProducts().FirstOrDefault(x => x.Id == Id); }}