MVC中的Blazor:呈现了组件,但是@onclick无法正常工作。连接问题

时间:2019-12-02 09:47:22

标签: c# asp.net-mvc blazor blazor-server-side

我正在尝试在.net核心3 MVC项目中使用Blazor。我使用了一些教程来做到这一点,例如https://fizzylogic.nl/2019/08/18/integrating-blazor-in-an-existing-asp-net-core-application/https://chrissainty.com/using-blazor-components-in-an-existing-mvc-application/

正在运行:Blazor组件的初始化正在运行。触发OnInitializedAsync()函数,并使组件呈现良好状态。

这是MVC视图中的呼叫:

@(await Html.RenderComponentAsync<MyProject.Components.Locations>(RenderMode.ServerPrerendered))

不起作用:在Blazor组件中使用@onclick。这是一些示例代码:

<span @onclick="AddLocation"></span>

@code {
    private void AddLocation(){

    }
}

它可能不起作用的原因是我在连接初始化中遇到错误。该组件不是从基本路径中呈现的,而是从特定视图的URL中呈现的,我认为这使连接混乱。我在Chrome的控制台中收到以下错误:

  • [2019-12-02T09:26:08.117Z]信息:将'_blazor'标准化为'https://localhost:44375/Locations/_blazor'。 _blazor / negotiate:1无法加载资源:服务器的状态为404() blazor.server.js:1
  • [2019-12-02T09:26:08.155Z]错误:无法完成与服务器的协商:错误 e.log @ blazor.server.js:1 blazor.server.js:1
  • [2019-12-02T09:26:08.156Z]错误:无法启动连接:错误 e.log @ blazor.server.js:1 blazor.server.js:15
  • [2019-12-02T09:26:08.156Z]错误:错误 e.log @ blazor.server.js:15 blazor.server.js:1 -未捕获(承诺)错误:如果连接未处于“已连接”状态,则无法发送数据。

主要故障可能是“ 将'_blazor'标准化为'https://localhost:44375/Locations/_blazor''。从基本路径请求_blazor起作用。有谁知道在这种情况下如何设置基本路径?

(是的,在普通的Razor页面环境中使用Blazor可能更容易,但是我想在MVC中尝试Blazor。)

编辑1

标头中的

<base href="/" />似乎已修复了控制台中的错误。我希望它能解决onclick问题,但目前还没有...我认为该组件在某种程度上被视为普通的剃须刀组件,而不是像剃刀一样。如果查看生成的html,我可以找到以下内容:<span @onclick="AddLocation" ></span>,我认为这是错误的(对于普通的剃须刀/剃刀项目,@ onclick从html中消失了)。有人知道解决方案吗?尝试了以下操作:https://stackoverflow.com/a/58444907/1794246,但并没有做太多。

编辑2

在MVC项目的根目录中具有_imports.razor文件显然没有任何作用。将这些using语句添加到Blazor组件中实际上可以解决onclick的问题(Intellisense也可以更好地识别组件中的内容):

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

2 个答案:

答案 0 :(得分:2)

该问题的解决方案是更改两件事:

  • 要修复控制台中的错误,我必须将<base href="/" />放在_Layout.cshtml的标题中
  • 要解决实际的@onclick问题,我必须将这些using语句放在Blazor组件中:
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

此后,@ onclick正常运行,并且智能感知在Blazor组件中识别出更好的东西。

答案 1 :(得分:1)

从文档中:https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/index?view=aspnetcore-3.0&tabs=visual-studio#app-base-path

应用基本路径

应用程序基本路径是应用程序的根URL路径。考虑以下ASP.NET Core应用程序和Blazor子应用程序:

  • ASP.NET Core应用程序名为MyApp
    • 该应用实际位于 d:/ MyApp
    • https://www.contoso.com/{MYAPP RESOURCE}处收到了请求。
  • 名为CoolApp的Blazor应用是MyApp的子应用:
    • 该子应用实际位于 d:/ MyApp / CoolApp
    • https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}处收到了请求。

在没有为CoolApp指定其他配置的情况下,此方案中的子应用程序不知道其在服务器上的位置。例如,应用程序无法在不知道它位于相对URL路径/CoolApp/的情况下为其资源构造正确的相对URL。

要为Blazor应用的https://www.contoso.com/CoolApp/基本路径提供配置,<base>标记的href属性在 Pages / _Host.cshtml <中设置为相对根路径。 / em>文件(Blazor服务器)或 wwwroot / index.html 文件(Blazor WebAssembly):

<base href="/CoolApp/">

Blazor Server应用程序还通过调用应用程序的请求管道Startup.Configure来设置服务器端基本路径:

app.UsePathBase("/CoolApp");

通过提供相对URL路径,不在根目录中的组件可以构造相对于应用程序根路径的URL。目录结构不同级别的组件可以在应用程序的各个位置建立指向其他资源的链接。应用程序基本路径还用于拦截选定的超链接,其中链接的href目标在应用程序基本路径URI空间内。 Blazor路由器负责内部导航。

在许多托管方案中,应用程序的相对URL路径是应用程序的根目录。在这些情况下,应用程序的相对URL基本路径是正斜杠(<base href="/" />),这是Blazor应用程序的默认配置。在其他托管方案中,例如GitHub Pages和IIS子应用程序,必须将应用程序基本路径设置为服务器的应用程序的相对URL路径。

要设置应用程序的基本路径,请更新 Pages / _Host.cshtml 文件(Blazor服务器)或<base>标签元素内的<head>标签wwwroot / index.html 文件(Blazor WebAssembly)。将href属性值设置为/{RELATIVE URL PATH}/(必须使用斜杠),其中{RELATIVE URL PATH}是应用程序的完整相对URL路径。

对于具有非根相对URL路径(例如<base href="/CoolApp/">)的Blazor WebAssembly应用程序,该应用程序在本地运行时找不到资源。要在本地开发和测试过程中克服此问题,可以在运行时提供与href标记的<base>值匹配的 path base 参数。不要在结尾加上斜线。要在本地运行应用程序时传递路径基础参数,请使用dotnet run选项从应用程序目录执行--pathbase命令:

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

对于具有相对URL路径为/CoolApp/<base href="/CoolApp/">)的Blazor WebAssembly应用,命令为:

dotnet run --pathbase=/CoolApp

Blazor WebAssembly应用程序在http://localhost:port/CoolApp本地响应。