How to create the controller with Blazor Hybrid Maui and SQLite?

Question

Hi, I use blazor hybrid maui project . I've created the classlibrary to create ApplicationDbContext.cs and model to do the migration with Ef core that involved SQLite

I don't know much about blazor hybrid maui & sqlite; now my question is that I would like to create controllers to do simple CRUD.

I have retrieved a controller that I made in blazor wasm via HttpCLient.

You will find below an extract of my controller and my razor page

I receive the following message in devTool

blazor.webview.js:1  Cannot provide a value for property 'client' on type 'MauiAppDT.Components.Pages.AdtPage'. There is no registered service of type 'System.Net.Http.HttpClient'.    at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass9_0.<CreatePropertyInjector>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)    at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType, IComponentRenderMode callerSpecifiedRenderMode, Nullable`1 parentComponentId)

So, can you help me to configure my controller?

Thanks in advance

Controller

using Microsoft.EntityFrameworkCore;
using MauiAppDTClassLibrary.Data;
using MauiAppDTClassLibrary.Models;
using Microsoft.AspNetCore.Mvc;

namespace MauiAppDT.Controller
{

    [Route("api/[controller]")]
    [ApiController]
    public class AdtPageController : ControllerBase
    {

        private readonly ApplicationDbContext _context;
        public AdtPageController(ApplicationDbContext context)
        {
            _context = context;
        }

        [HttpGet]
        public async Task<IActionResult> Get()
        {
            var devs = await _context.ADTs.ToListAsync();
            return Ok(devs);
        }

        [HttpGet("{id}")]
        public async Task<IActionResult> Get(int id)
        {
            var dev = await _context.ADTs.FirstOrDefaultAsync(a => a.adtId == id);
            return Ok(dev);
        }

        [HttpPost]
        public async Task<ActionResult> PostAsync(ADT adt)
        {
            _context.Add(adt);
            await _context.SaveChangesAsync();
            return Ok(adt.adtId);
        }

        [HttpPut]
        public async Task<IActionResult> Put(ADT adt)
        {
            _context.Entry(adt).State = EntityState.Modified;
            await _context.SaveChangesAsync();
            return NoContent();
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> Delete(int id)
        {

            var dev = new ADT { adtId = id };
            _context.Remove(dev);
            await _context.SaveChangesAsync();
            return NoContent();

        }
    }

}

razor page

@code{

  ADT[]? adt { get; set; }
  protected override async Task OnInitializedAsync()
  {       
        await base.OnInitializedAsync();
        adt = await client.GetFromJsonAsync<ADT[]>("api/adtpage");     
     
  }

}

Answer 1

Maui Blazor Hybrid, just like Blazor WASM does not use controllers. Only Blazor server applications define webapi controllers. these api routes can be called from javascript or other applications, but are not used by the Blazor code.

Your controller code belongs in the web site that your Maui app will call. This would be a separate WebApi project.

the razor page code is complaining that you did define client, which is typically an injected HttpClient.

note: if you wanted to use http for the blazor webview code to call the hosting Maui application, then the hosting Maui app (not the blazer code) would create a webserver running on a dynamic port. you would then pass this port to the Blazor app so the Blazor app know what port to use.