I created a Blazor Web App and chose option WebAssembly with .NET 8.0 (Long Term Support). Got 2 projects, Project.Client and Project which I renamed to Project.Server.
Then I moved all the razor files in the Project.Server to the Project.Client and installed Telerik.
@page "/"
@using Project.Shared.Models
@using System.Text.Json
@using Telerik.Blazor.Components.Common
@inject HttpClient Http
@inherits BaseComponent
<div>
<TelerikDropDownList Data="@models"
TextField="Id"
ValueField="Id"
@bind-Value="@_selectedModelId"
Width="250px" />
@* OnChange="@OnModelChange" *@
</div>
with code:
private List<ModelDto> models = new List<ModelDto>()
{
new ModelDto { Id = "model1", Description = "Invoice Model" },
new ModelDto { Id = "model2", Description = "Receipt Model" },
new ModelDto { Id = "model3", Description = "Contract Model" }
};
protected override async Task OnInitializedAsync()
{
_selectedModelId = models[0].Id;
}
private async Task OnModelChange(string selectedModelId)
{
_selectedModelId = selectedModelId ?? "";
if (string.IsNullOrWhiteSpace(_selectedModelId)) return;
var response = await Http.GetAsync($"{_diUrl}/document-types/{_selectedModelId}");
if (response.IsSuccessStatusCode)
{
var json = await response.Content.ReadAsStringAsync();
documentTypes = JsonSerializer.Deserialize<List<DocumentTypeDto>>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true }) ?? new();
// selectedDocumentType = documentTypes[0];
}
}
My basically default App.razor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Project.Client.styles.css" />
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<script src="_framework/blazor.web.js"></script>
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<HeadOutlet />
</head>
<body>
<Routes />
</body>
</html>
The client Program.cs is default and the server Program.cs looks like this now:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveWebAssemblyComponents();
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents(); // Tried adding this, did nothing
builder.Services.AddHttpClient("Project.Server", client => { client.BaseAddress = new Uri(builder.Configuration["ApiUrl"]); });
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("Project.Server"));
builder.Services.AddScoped<IDocumentIntelligenceService, DocumentIntelligenceService>();
builder.Services.AddControllers();
builder.Services.AddTelerikBlazor();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>().AddInteractiveWebAssemblyRenderMode();
app.MapRazorComponents<App>().AddInteractiveServerRenderMode(); // Tried adding this, did nothing
app.MapControllers();
app.Run();
What I get now is a Telerik DropDownList that has proper css but I can't click it open. Same goes with other components I've tried like the Telerik ColorPicker. Anybody got a clue what might be the issue?
Answer
You selected the "Per Page/Component" option, the Counter page is probably the only one that works now.
To fix it for all pages, in App.razor replace
<Routes />
with
<Routes @rendermode="InteractiveWebAssembly" />