Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Razor Component OnClick

$
0
0

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">&times;</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);    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>