Service type not found when trying to populate DropDown dynamically

Question

Presently, I am getting the following error when trying to dynamically populate a Drop Down List using Blazor.

I believe that I have created the TeamModel correctly and have referenced it the page where the code is to be populated.

Also, there are no errors on the pages, and the .Razor page can see that the TeamModel model exists.

Where am I going wrong?

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot provide a value for property
'TeamModel' on type 'WasmInterface.Pages.Home'. There is no registered service of type
'WasmInterface.Models.TeamModel'. System.InvalidOperationException: Cannot provide a value for property 'TeamModel' on type 'WasmInterface.Pages.Home'. There is no registered service of type 'WasmInterface.Models.TeamModel'.'

This is the code for the control in the page

@page "/"
@* //@using WasmInterface.Services *@
@using WasmInterface.Models
@inject NavigationManager Navigation

@inject TeamModel TeamModel

<EditForm >
<div class="form-group col-md-4" >
<label class="col-form-label" for="Team">Team : @TeamModel.ID</label>
  
<option value="0" selected>Please Select Team</option>
@foreach (var item in teams)
{
<option value="@item.ID">@item.Name</option>
} 
</div>
</EditForm>

This is the code in the .cs file for the page

#region Uses

using Microsoft.AspNetCore.Components;
using WasmInterface.Models;

#endregion

namespace WasmInterface.Pages;

/// <inheritdoc />
/// <summary>
///    This is the code file that is 'behind' the Home.razor page
/// </summary>
public sealed partial class Home
{
[Inject]
private IConfiguration? Config { get; init; }

private string PageTitle => Config?[ "Home:PageTitle" ] ?? string.Empty;

#pragma warning disable IDE0055
/// The code that's violating the rule is on this line.
#pragma warning restore IDE0055
List<TeamModel> teams = new List<TeamModel>(){
new TeamModel() { ID = 1, Name = "Team"},
new TeamModel() { ID = 2, Name = "Team2"},
new TeamModel() { ID = 3, Name = "Team3"}
};
}

And this is the code for the Model:

/// <summary>
/// Gets Team Model
/// </summary>
public class TeamModel
{
   ///// <summary>
   ///// Gets ID
   ///// </summary>
   public int ID { get; set; }
   ///// <summary>
   ///// Gets Name
   ///// </summary>
   public string? Name { get; set; }
}

So, how/where do you register TeamModel? Post the relevant part of Program.cs. It's a little odd to inject entities anyway. — Henk Holterman
– Henk Holterman, Commented Jan 14 at 11:56
Thank you for your comment. I have added nothing in the Program.cs file, is this where I am going wrong? — badgerless
– badgerless, Commented Jan 14 at 12:19
@badgerless Is this Blazor server or Blazor web assembly? Why do you have a separate .cs for your page? Blazor components can have both the code and markup within the same file. — Jerdine Sabio
– Jerdine Sabio, Commented Jan 14 at 13:09

jaros · Accepted Answer · 2025-01-14 13:52:31Z

0

Did you mean:

@model TeamModel

instead of:

@inject TeamModel

? @inject means you want to register a dependency with DI container and then DI container provides the dependency at run time. @model means there's a linked class that is supplying values for your razor page to use.

answered Jan 14 at 13:52

jaros

1724 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zhi Lv · Accepted Answer · 2025-01-15 08:16:23Z

In Blazor components, the @inject directive is used to make services available to Razor components. It is followed by the type that you want to inject, and an instance of that type:

@inject IDataAccessService service
    ...
@code{
 
    List<Contact> contacts;
    protected void OnInitialized()
    {       
        contacts = service.GetContacts();
    }
    ...
}

But according to your code, you want to use the TeamModel as the form/page model, so there is no need to use @inject directive. Just add the model's namespace reference first, and then you can use the TeamModel in the @code block or code behind.

Refer to the following sample:

I add the TeamModel class in the BlazorApp11.Client.Models folder and we need to add namespace reference (@using BlazorApp11.Client.Models) first, then we can use the TeamModel in the @code block.

@page "/testpage1"
@using BlazorApp11.Client.Models
@rendermode InteractiveAuto 
<div>
    <EditForm Model="TeamModel" FormName="TeamForm">
        <div class="form-group col-md-4">
            <label class="col-form-label">Team : @TeamModel.ID</label>
            <InputSelect id="role"
                         TValue="string"
                         Value="selectedValue"
                         ValueExpression="@(() => selectedValue)"
                         ValueChanged="@((string value) => OnValueChanged(value))" class="form-group">
                <option value="-1">Nenhum</option>
                @foreach (var team in teams)
                {
                    <option value="@team.Name">@team.Name</option>
                }
            </InputSelect>
            <p>Selected Value: @selectedValue</p>
        </div>
    </EditForm>
</div>

@code {
    [SupplyParameterFromForm]
    public TeamModel TeamModel { get; set; }
    public List<TeamModel> teams { get; set; }

    private string? selectedValue;
    protected override void OnInitialized()
    {
        TeamModel = new TeamModel();
        teams = new List<TeamModel>(){
            new TeamModel() { ID = 1, Name = "Team"},
            new TeamModel() { ID = 2, Name = "Team2"},
            new TeamModel() { ID = 3, Name = "Team3"}
            };
    }
    private void OnValueChanged(string e)
    {
        selectedValue = e;
        // Additional logic when the value changes
    }
}

If the code block has been extracted to code behind (using the page's .razor.cs file), the namespace reference should add in the code behind, instead of the razor page (.razor file). The code like this:

Razor page (.razor file):

@page "/testpage3"
@rendermode InteractiveAuto 
<div> 
    <EditForm Model="TeamModel" FormName="TeamForm">
        <div class="form-group col-md-4">
            <label class="col-form-label" >Team : @TeamModel.ID</label>
                <InputSelect id="role"
                TValue="string"
                Value="selectedValue" 
                ValueExpression="@(() => selectedValue)"
                ValueChanged="@((string value) => OnValueChanged(value))" class="form-group">
                <option value="-1">Nenhum</option>
                @foreach (var team in teams)
                {
                    <option value="@team.Name">@team.Name</option>
                }
            </InputSelect> 
            <p>Selected Value: @selectedValue</p>
        </div>
    </EditForm>
</div>

The .razor.cs file for the page:

using BlazorApp11.Client.Models;
using Microsoft.AspNetCore.Components;

namespace BlazorApp11.Client.Pages
{
    public partial class TestPage3
    {
        [SupplyParameterFromForm]
        public TeamModel TeamModel { get; set; }
        public List<TeamModel> teams { get; set; }

        private string? selectedValue;
        protected override void OnInitialized()
        {
            TeamModel = new TeamModel();
            teams = new List<TeamModel>(){
            new TeamModel() { ID = 1, Name = "Team"},
            new TeamModel() { ID = 2, Name = "Team2"},
            new TeamModel() { ID = 3, Name = "Team3"}
            };
        } 
        private void OnValueChanged(string e)
        {
            selectedValue = e;
            // Additional logic when the value changes
        } 
    }
}

Collectives™ on Stack Overflow

Service type not found when trying to populate DropDown dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related