MVC Blazor onClick 仅适用于根目录，不适用于子目录

Question

我的 Blazor 页面中的按钮上有 onClick 功能，它在 root 中工作正常，例如在 http://localhost/?c=25 中，onclick 功能工作正常，但是当我在子页面中加载相同的页面时文件夹或任何其他子文件夹页面，onlick 不起作用，例如在 http://localhost/home/index?c=25 它不起作用。

我的代码如下：

Program.cs

using TestBlazorMvc.Data;
using TestBlazorMvc.DBContext;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddServerSideBlazor();
builder.Services.AddDbContext<MyDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("MyDbContext")));
builder.Services.AddScoped<ProductsService>();
builder.Services.AddScoped<CategoriesService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // 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.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");
app.MapBlazorHub();

app.Run();

onClick 函数

                <p><<button @onclick="FilterList" >Search button</button></p>

onClick 事件

    private async Task FilterList(MouseEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("Testing...!");
    items = await Task.Run(() => productService.GetProductsByPrice());
    StateHasChanged();
}

MVC 页面

    @{
     ViewData["Title"] = "Home Page";
 }
<div >
@(await Html.RenderComponentAsync<TestBlazorMvc.Views.Shared.Component.ListItems>(RenderMode.ServerPrerendered,new {  Data= " Hello World " }))
    <script src="~/_framework/blazor.server.js"></script> 

</div>

感谢您的帮助。

Answer 1

此问题与使用 Blazor (SPA) 时的路由和基础 url 有关。解决问题...

改变<script src="~/_framework/blazor.server.js"></script>

到<script src="_framework/blazor.server.js"></script>

并在 _Layout.cshtml 文件的顶部添加一个 <base> 元素，如下所示：

<head>
   <base href="~/" />

注：

不要使用 Task.Run

就这样：

items = await productService.GetProductsByPrice();

如果productService.GetProductsByPrice不是异步的，执行：

项 = productService.GetProductsByPrice();

其次是：await Task.CompletedTask; 如果您仍希望 FilterList 方法保持异步

此外，调用 StateHasChanged 方法是多余的，因为它会在 UI 事件触发时由框架自动调用（当您单击 Search button 时， 'click' 事件被触发）。

MVC Blazor onClick 仅适用于根目录，不适用于子目录

MVC Blazor onClick only works in root, not in sub directory

asp.net-core-mvc

blazor