How to fix a Errror Handling for Blazor Hybrid MAUI and WebApi

sblb 1,231

Hi, I've reference an WebApi to my Blazor Hybrid App. The database that I used is SQLite

When I run the app "Windows machine" the response is Html

User's image

The WebApi run well!!I've checked with swagger the response is OK.

I suppose that the problem is localised in MauiProgram.cs

I've linked the webapi as below

User's image

Have you an idea how I can fix this problem?

1 answer

sblb 1,231

Here the response from adtpage, you can see that Content-Type is text/html so it should be application/json.

User's image

I tested the webapi in swagger to GET the data from adtpage Content-Type is application/json

User's image

Can anyone help me solve this problem?

AgaveJoe 28,536 Reputation points

2024-10-06T10:44:02.25+00:00

According to your first post, adtpage is a web page. text/html is the correct content-type when requesting a web page.

I'm guessing the actual problem is the MAUI Blazor Hybrid code sends an HTTP request to a Web API endpoint using HttpClient but the results are unexpected. You did not share any relevant code so we can only guess what's wrong.

The best path forward is using the Visual Studio debugger to single step through the code to find where the code stops functioning as expected. Thing to check... Is the HttpClient code executing? What is the result of the HttpClient HTTP request? What is the status code?

If you want the community to figure out wants wrong with your code then commit your project to GitHub or share enough code to reproduce the problem.

Also, I want to mention, you started down this path a few days ago where you said "I cannot publish it because I lack the necessary web server deployment capabilities." Well, Web API requires a web server. Are you sure your design approach is going to work?

sblb 1,231

The MauiProgram.cs is defined as below

I've tested the port 7031 withe the command : netstat -an | findstr 7031

The port 7031 is well in the list.

User's image

MauiProgram.cs

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });


            builder.Services.AddScoped(sp => new HttpClient
            {
                BaseAddress = new Uri("http://localhost:7031/")
            });

         

            builder.Services.AddMauiBlazorWebView();
            builder.Services.AddRadzenComponents();

            builder.Services.AddScoped<ThService>();
            builder.Services.AddScoped<ExampleService>();
          



#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
    		builder.Logging.AddDebug();
#endif
              

            return builder.Build();
        }
    }

In the Program.cs from WebApi

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<ApplicationDbContext>(options => options.UseSqlite(connectionString));

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        policy =>
        {
            policy.AllowAnyOrigin()
                  .AllowAnyMethod()
                  .AllowAnyHeader();
        });
});

//builder.Services.AddControllers();
builder.Services.AddControllers().AddNewtonsoftJson(options =>
{
    options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
});
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();


var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseCors("AllowAll");

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();

The controller in webapi


namespace MauiAppDT.Api.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AdtPageController : ControllerBase
    {
        private readonly ApplicationDbContext _context;
        public AdtPageController(ApplicationDbContext context)
        {
            this._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();
        }
    }

I understood from serveral that it's possible to make an app with Blazor Hybrid Maui with WebApi. I use the SQLite database;

AgaveJoe 28,536 Reputation points

2024-10-06T14:40:06.88+00:00

I understood from serveral that it's possible to make an app with Blazor Hybrid Maui with WebApi.

Of course it is possible to create a Blazor Hybrid MAUI application that calls Web API. The problem is you already created a Blazor Server application but ran into an issue where you posted "I cannot publish it because I lack the necessary web server deployment capabilities."

Anyway, Web API requires hosting. If you don't have the capabilities to deploy a Blazor Server app then you also do not have the capabilities to deploy Web API either.

If you now magically have the ability to host a server application then you can simply go back to your original Blazor Server application.
sblb 1,231 Reputation points

2024-10-06T16:58:40.3066667+00:00
First my original app is blazor WebAssembly. I confirm that I don't have the possibility to deploy my Blazor wasm on server eg IIS. So now, one thing I can do it's to create blazor hybrid Maui with SQLite. So now what's possibility I have? To create a web server running on a dynamic port for a Blazor Hybrid MAUI app along with a Web API, you can follow this general approach:

Create a Web API Project: Create a Web API project that MAUI app can host.

Host the Web API on a Dynamic Port: Use Kestrel to host the Web API within MAUI app on a dynamic port.

Integrate with the Blazor Hybrid MAUI App: Use the Blazor WebView in MAUI app to communicate with the locally hosted Web API. What do thing about that? Otherwise I don't know how I can do it!
AgaveJoe 28,536 Reputation points

2024-10-07T10:06:24.62+00:00

Integrate with the Blazor Hybrid MAUI App: Use the Blazor WebView in MAUI app to communicate with the locally hosted Web API. What do thing about that? Otherwise I don't know how I can do it!

MAUI can connect to and communicate with a local Sqlite database. It is not clear why you want to host Web API in MAUI or start kestrel.

https://learn.microsoft.com/en-us/dotnet/maui/data-cloud/database-sqlite?view=net-maui-8.0

ASP.NET Core Blazor Hybrid is way to share UI components across different platforms. ASP.NET Core Blazor Hybrid can be used with MAUI, WPF, or Windows Forms.

By using .NET MAUI and Blazor together, you can reuse one set of web UI components across mobile, desktop, and web.

See the docs.

https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/?view=aspnetcore-8.0

sblb 1,231

Is the solution to install your application on mobile and desktop devices?

The solution will install on windows.

Or is there some other issue?

I want to install to a small application which will be used by some users. If I used blazor wasm it's necessary to have a web-server as IIS. I don't have to possibility to have it.

The target of my several post were to obtain the best way to make an application blazor hybrid in windows platform.

Right now I decided to use blazor hybrid maui with the class library.

The class library will have models class, applicationdbcontext and business logic.

ApplicationNow the structure of my project is

User's image

In MauiAppDTCLassLibrary

ApplicationDbContext.cs

      public ApplicationDbContext()
      {
      }

      public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
          : base(options)
      {
      }
    
     protected override void OnConfiguring(DbContextOptionsBuilder options)
     {
         var dbPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), 
                      "C:\\App\\maui\\BaseSQLite\\databaseApp.db");
          options.UseSqlite($"Data Source={dbPath}");

      }

      
      public DbSet<SuiviBE> SuiviBEs { get; set; }
      public DbSet<ActionItem> ActionItems { get; set; }
      public DbSet<ADT> ADTs { get; set; }
      public DbSet<EcoRep> EcoReps { get; set; }
      public DbSet<TodoListModel> TodoListModels { get; set; }
      public DbSet<CMMAction> cMMActions { get; set; }
      public DbSet<ProjetModel> ProjetModels { get; set; }
      public DbSet<ActionItemProjet> ActionItemProjets { get; set; }
      public DbSet<Developer> Developers { get; set; }

      protected override void OnModelCreating(ModelBuilder modelBuilder)
      {
            base.OnModelCreating(modelBuilder);                        

          modelBuilder.Entity<ActionItem>()
             .HasOne(p => p.SuiviBE)
              .WithMany(b => b.ActionItems);

         modelBuilder.Entity<ActionItemProjet>()
             .HasOne(p => p.ProjetModel)
             .WithMany(b => b.ActionItemProjets);

      }
  }

Services

  public class AdtPageService
  {

      private readonly ApplicationDbContext _context;
      public AdtPageService(ApplicationDbContext context)
      {
          this._context = context;
      }

     // [HttpGet]
      public async Task<List<ADT>> GetAdtAsync()
      {
          var devs = await _context.ADTs.ToListAsync();
          return devs;
      }

    //  [HttpGet("{id}")]
      public async Task GetAdtAsyncId(int id)
      {
           await _context.ADTs.FirstOrDefaultAsync(a => a.adtId == id);
         
      }

     // [HttpPost]
      public async Task PostAdtAsync(ADT adt)
      {
         // var devp = new ADT { adtId = Id };
          _context.Add(adt);
          await _context.SaveChangesAsync();
          return ;
      }

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

      //[HttpDelete("{id}")]
      public async Task DeleteAdtAsync(int id)
      {

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

      }
  }

MauiAppDT I defined the AdtPage.razor.

The GetAdtAsync run well!!


@code {


    RadzenDataGrid<ADT>? gridadt;
    
    private List<ADT> adt = new(); 
    

    protected override async Task OnInitializedAsync()
    {       
        await base.OnInitializedAsync();
       adt = await adtpageservice.GetAdtAsync();
    }

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 44,011 Reputation points Microsoft Vendor

2024-10-08T07:52:07.3433333+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.
sblb 1,231 Reputation points

2024-10-09T05:12:03.77+00:00

my application run now locally! Thank you at all to your help.

Share via

How to fix a Errror Handling for Blazor Hybrid MAUI and WebApi

1 answer

Your answer