I have a Blazor Component (.razor file) that has an object of type Product. The Object is passed in as a parameter and is correct correct at the top but inside of the modal, the value of Product is always the first item in my database. I was wondering how I can get the value to carry over to my modal. The full component is below and I am using .NET 8.
@using InventoryWebApp.Models.Entity
@rendermode InteractiveServer
<div class="card">
<div class="card-body">
@if (Product != null)
{
<p class="card-text">Category: @Product.Category</p>
<p class="card-text">Quantity: @Product.Quantity</p>
<p class="card-text">Price: $@(Product.Price.HasValue ? Product.Price.Value.ToString("F2") : "N/A")</p>
}
</div>
<div class="card-footer">
<button class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#request-purchase-card">
Request Purchase
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="request-purchase-card">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">@Product?.DisplayName</div>
<div class="modal-body form-group">
<div class="d-flex align-items-center">
<label for="quantity" class="mx-2">Quantity</label>
<button @onclick="() => QuantityToOrder--" class="btn btn-outline-primary" id="subtract">-</button>
<input type="number" class="form-control mx-2" id="quantity" style="width: 4rem;" value="@QuantityToOrder">
<button @onclick="() => QuantityToOrder++" class="btn btn-outline-primary" id="add">+</button>
</div>
</div>
<div class="modal-footer"><button class="btn btn-primary">Request Item</button></div>
</div>
</div>
</div>
@code {
[Parameter]
public Product? Product { get; set; }
private int quantityToOrder;
public int QuantityToOrder
{
get => quantityToOrder;
set => quantityToOrder = Math.Clamp(value, 0, 100);
}
}