Blazor Server - Deleting records inside of a component

Question

Hi,

I am trying to delete records inside of a component. But getting this error below. I couldn't figure out what is the problem.

Program.cs:

builder.Services.AddTransient<IDeleteCustomerByIdUseCase, DeleteCustomerByIdUseCase>();  

The error message:

[2023-01-04T11:35:51.135Z] Error: System.InvalidOperationException: Cannot provide a value for property 'DeleteCustomerByIdUseCase' on type 'IMS.WebApp.Controls.CustomerItemComponent'. There is no registered service of type 'IMS.UseCases.Customers.DeleteCustomerByIdUseCase'.  
  
   at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)  
  
   at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)  
  
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)  
  
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence(DiffContext& diffContext, Int32 oldFrameIndex, Int32 newFrameIndex)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)  
  
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)  
  
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)  
  
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()  

The component:

@using IMS.CoreBusiness  
@using IMS.UseCases.Customers  
  
@inject NavigationManager NavigationManager  
@inject DeleteCustomerByIdUseCase DeleteCustomerByIdUseCase  
  
@if (Customer != null)  
{  
    <tr>  
        <td>@Customer.Name</td>  
        <td>@Customer.TaxNumber</td>  
        <td>@Customer.TaxAdministration</td>  
        <td>@Customer.PhoneNumber</td>  
        <td>@Customer.Email</td>  
        <td>@Customer.Address</td>  
        <td>@Customer.DeliveryAddress</td>  
        <td>@Customer.MainResponsibleName</td>  
        <td>@Customer.AssistantResponsibleName</td>  
        <td>  
            @if (ShowEdit)  
            {  
                <button type="button" class="btn btn-outline-secondary" @onclick="() => EditCustomer(Customer.Id)">Edit</button>  
            }  
            @if (ShowDelete)  
            {  
                <button type="button" class="btn btn-outline-warning" @onclick="() => DeleteCustomer(Customer)">Delete</button>  
            }  
              
        </td>  
  
    </tr>  
}  
  
  
@code {  
    [Parameter]  
    public Customer? Customer { get; set; }  
  
    [Parameter]  
    public bool ShowEdit { get; set; } = true;  
  
    [Parameter]  
    public bool ShowDelete { get; set; } = true;  
  
    private void EditCustomer(int cusId)  
    {  
        NavigationManager.NavigateTo($"/editcustomer/{cusId}");  
    }  
  
    private async Task DeleteCustomer(Customer customer)  
    {  
        if (customer.Id != null)  
        {  
            await DeleteCustomerByIdUseCase.ExecuteAsync(customer);  
        }  
    }  
}  

The razor I am using this component:

@using IMS.CoreBusiness  
@using IMS.UseCases.Interfaces;  
@using IMS.UseCases.Interfaces.Customer  
@inject IJSRuntime JSRuntime  
@page "/customers"  
<PageTitle>Customers</PageTitle>  
@*@attribute [Authorize]*@  
  
@inject NavigationManager NavigationManager  
@inject IViewCustomersByNameUseCase ViewCustomersByNameUseCase  
<div id="printarea">  
<h1>Customer List</h1>  
<br/>  
<ViewCustomersComponent OnSearchCustomers="OnSearchCustomers"></ViewCustomersComponent>  
<br/>  
<style>  
    .btns {  
        padding: 5px;  
        width: calc(11% - 10px);  
    }  
</style>  
    <div class="row">  
        <div class="col">  
            <button type="button" class="btn btn-primary btns" @onclick="AddCustomer">Add Customer</button>  
  
            <button type="button" class="btn btn-primary btns" @onclick="PrintReport">Print</button>  
        </div>  
    </div>  
@if (_listCustomers != null)  
{  
    <table class="table">  
        <thead>  
        <tr>  
            <th>Name</th>  
            <th>Tax Number</th>  
            <th>Tax Office</th>  
            <th>Phone Number</th>  
            <th>Email</th>  
            <th>Address</th>  
            <th>Delivery Address</th>  
            <th>Main Responsible</th>  
            <th>Assistant Responsible</th>  
            <th></th>  
        </tr>  
        </thead>  
        <tbody>  
            @foreach (var cus in this._listCustomers)  
            {  
                <CustomerItemComponent Customer="cus" ShowEdit="ShowEdit"></CustomerItemComponent>  
            }  
        </tbody>  
  
    </table>  
}  
</div>  
<br/>  
  
@code {  
    private List<Customer>? _listCustomers;  
    private bool ShowEdit = true;  
  
    protected override async Task OnInitializedAsync()  
    {  
         
        var ven = await ViewCustomersByNameUseCase.ExecuteAsync();  
  
        this._listCustomers = ven.ToList();  
    }  
  
    private void OnSearchCustomers(List<Customer> vendors)  
    {  
        _listCustomers = vendors;  
    }  
  
    private void AddCustomer()  
    {  
        NavigationManager.NavigateTo("/addcustomer");  
    }  
    private async Task PrintReport()  
    {  
          
        await JSRuntime.InvokeVoidAsync("print");  
         
    }  
     
}  


  

Answer 1

Hi @Cenk ,

Program.cs: builder.Services.AddTransient<IDeleteCustomerByIdUseCase, DeleteCustomerByIdUseCase>();>
Component: @inject DeleteCustomerByIdUseCase DeleteCustomerByIdUseCase

The issue relates above code.

Try to change the Component code as below: inject the service via IDeleteCustomerByIdUseCase:

@inject IDeleteCustomerByIdUseCase DeleteCustomerByIdUseCase  

Or you can register the DeleteCustomerByIdUseCase in the Program.cs as below:

builder.Services.AddTransient<DeleteCustomerByIdUseCase>();  

Then, you can use the following code to inject the DeleteCustomerByIdUseCase in the Component:

@inject DeleteCustomerByIdUseCase DeleteCustomerByIdUseCase  

More detail information about using dependency injection, see ASP.NET Core Blazor dependency injection.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

This works for me;

On the child component:

[Parameter]  
    public EventCallback<bool> IsDeleted { get; set; }  

private async Task DeleteCustomer(Customer customer)  
    {  
        if (customer.Id != null)  
        {  
            await DeleteCustomerByIdUseCase.ExecuteAsync(customer);  
            await IsDeleted.InvokeAsync(true);  
              
        }  
    }  

Parent:

<CustomerItemComponent Customer="cus" ShowEdit="ShowEdit" IsDeleted="RefreshCustomers"></CustomerItemComponent>  
  
  
private async Task RefreshCustomers()  
    {  
        var customers = await ViewCustomersByNameUseCase.ExecuteAsync();  
  
        _listCustomers = customers.ToList();  
          
    }