Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

System.PlatformNotSupportedException: 'System.Runtime.InteropServices.JavaScript is not supported on this platform.'

$
0
0

Currently I try to create a small dashboard for an MySQL Database in Blazor .net 8.0 which displays a sort of datasets like Customers etc. nothing too complicated. I am using MySQL as an DB which is hosted on an Ubuntu VM in my Network. This said I created an Controller which should handle my HTTP Request, a shared Project which is responsible for holding my Customer Class (as example) and the rest is handled server side. The Project itself is on Autorendering so its an Webassembly. The issue now since I have implemented the API I get the Error that JSInteropt is not supported on this plattform. I did my research and found only either old references or the steps suggested there didn't seem to work. I do understand that I can not access the DB in Blazor from the Website which is clear to me hence why i made the Controller and the API. Some ressources also suggested running it from Clientside so it "hops" from there to the Server which holds the logic. This doesn't work aswell and raises an Error, that the Clientside can't find a runtime config. To my understanding this is not relevant anyways because Clientside is empty. I want it to handle everything on the serverside since Userdevices are not that powerful and the DB is gonna be quite large. I checked the Project Dependencies which should be fine aswell. I post below the Program.cs from the Server, the API and the first dashboard Page where I call the API. What am I missing? Do I understand something fundamentaly wrong?

Program.cs

using BlazorApp1.Components;using BlazorApp1.Services;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");// Manually retrieve the base URIvar baseAddress = new Uri(builder.HostEnvironment.BaseAddress);builder.Services.AddScoped(sp => new HttpClient { BaseAddress = baseAddress });builder.Services.AddScoped<SearchService>();await builder.Build().RunAsync();

Program.cs (WebAPI)

using Microsoft.AspNetCore.Builder;using Microsoft.Extensions.DependencyInjection;using Microsoft.Extensions.Hosting;using BlazorApp1;using Microsoft.EntityFrameworkCore;internal class Program{    private static void Main(string[] args)    {        var builder = WebApplication.CreateBuilder(args);        // Configure MySQL DB Context        builder.Services.AddDbContext<AppDbContext>(options =>            options.UseMySql(                builder.Configuration.GetConnectionString("DefaultConnection"),                new MySqlServerVersion(new Version(8, 0, 40)) // MySQL version            ));        // Add API Controllers        builder.Services.AddControllers();        var app = builder.Build();        // Enable API endpoints        app.UseRouting();        app.UseEndpoints(endpoints =>        {            endpoints.MapControllers();        });        app.Run();    }}

CustomerController.cs

    using Microsoft.AspNetCore.Mvc;    using Microsoft.EntityFrameworkCore;    using System.Collections.Generic;    using System.Threading.Tasks;    using BlazorApp1;    using BlazorApp1.Shared;    [Route("api/customer")]    [ApiController]    public class CustomerController : ControllerBase    {        private readonly AppDbContext _context;        public CustomerController(AppDbContext context)        {            _context = context;        }        [HttpGet]        public async Task<ActionResult<IEnumerable<Customer>>> GetCustomers()        {            return await _context.Customers.ToListAsync();        }    }

Customer Razor Page

@page "/dashboard"@using BlazorApp1.Shared@inject HttpClient Http<h3>Customer Dashboard</h3><table class="table"><thead><tr><th>ID</th><th>Stadt</th><th>Name</th><th>Werk</th><th>Adresse</th><th>Maschinen Standort</th></tr></thead><tbody>        @foreach (var customer in currentPageCustomers)        {<tr><td>@customer.Id</td><td>@customer.City</td><td>@customer.Name</td><td>@customer.Subsidary</td><td>@customer.Address</td><td>@customer.MachineLocation</td></tr>        }</tbody></table><div><button @onclick="PreviousPage" disabled="@(!CanGoToPreviousPage)">Previous</button><button @onclick="NextPage" disabled="@(!CanGoToNextPage)">Next</button></div>@code {    private List<Customer> customers = new();    private List<Customer> currentPageCustomers = new();    private int currentPage = 1;    private int pageSize = 10;    protected override async Task OnInitializedAsync()    {        // Fetch all customers from the API        customers = await Http.GetFromJsonAsync<List<Customer>>("api/customer");        LoadCurrentPage(); // Load the first page after fetching data    }    private void LoadCurrentPage()    {        // Perform client-side pagination        currentPageCustomers = customers            .Skip((currentPage - 1) * pageSize)            .Take(pageSize)            .ToList();        StateHasChanged();  // Refresh UI    }

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>