Calling a service inside a Blazor component does not work-CodePudding

I have a service that look like this:

namespace Hydra.Services
{
  public class Employee
  {
    public string url { get; set; }

    public async Task<EmployeeModel> GetEmployee(){
      // return JSON data
    }
  }
}

I would like to call the service inside my Commpany component as:

@page "/"

<div> @company ... </div> <!-- OK, company details are rendered --> 
<div> @Employee ... </div>  <!-- System.NullReferenceException: 'Object reference not set to an instance of an object.' -->

@code {

  company string; 
  emlpoyee string; 
  protected override async Task OnInitializedAsync()
    using (HttpClient client = new HttpClient())
    {
      // Get company details


      // HERE is the problem:
      EmployeeModel emp = new Employee();
      emp.url = "http://google.com";
      emlpoyee = await emp.Employee(); 
    }
  }
}

So, the logic to show the company works without any issue, the Employee service I am calling inside using() doesn't seem to work. I don't know what the issue is other than the error.

This is not a problem about forgetting to include models or injecting services.

I am just a beginner so the issue is simpler than that

CodePudding user response：

You created the variable:

@emlpoyee

but you are calling @Employee which is going to be null.

Try switching to the variable you actually put the employee into which is:

@emlpoyee

Also I think you spelt the variable wrong. I think you meant @employee perhaps.

You populate everything here:

emlpoyee = await emp.Employee();

so calling @emlpoyee is what makes sense from the code you've provided.

So change <div> @Employee ... </div> to <div> @emlpoyee ... </div>

CodePudding user response：

Your codes have not performed the service injection correctly as it should. I present to you the method that I use and it works correctly, I hope it will be useful.

First, you need to create an interface for your service:

namespace Hydra.Services
{
    public interface IEmployee
    {
        Task<EmployeeModel> GetEmployee();
    }
}

Then, you need to modify your service by inheriting from the interface as shown below:

namespace Hydra.Services
{
    public class Employee:IEmployee
    {
        public async Task<EmployeeModel> GetEmployee()
        {
            // return JSON data
        }
    }
}

Now, you should inject the service in Startup.cs or Program.cs as follows:

services.AddScoped<IEmployee,Employee>();

Finally, you should inject your service in the desired component as shown below and use it easily:

@page "/"
@using Hydra.Services
@inherits OwningComponentBase<IEmployee>

<div> @company ... </div> <!-- OK, company details are rendered --> 
<div> @Employee ... </div>  <!-- System.NullReferenceException: 'Object reference not set to an instance of an object.' -->

@code {

    private string company; 
    private EmployeeModel emlpoyee = new EmployeeModel; 

    private IEmployee employeeService => Service;

    protected override async Task OnInitializedAsync()
    
    // Get company details


    // HERE is the problem:
        EmployeeModel emp = new EmployeeModel();
        emp.url = "http://google.com";
        emlpoyee = await employeeService.GetEmployee(); 
    
}

Of course, your code has many structural problems and you probably just wanted to specify the problem in the form of an example code, so I just tried to explain the working method with your own codes so that the example is more concrete for you.