标签: blazor-client-side

我只有一个快速的问题。有没有办法热重载 blazor 应用程序？至少，.razor 文件？现在我将我的应用程序托管在本地 IIS（不是 IIS express）上。

我正在浏览互联网，但没有发现任何有用的东西。

谢谢大家的回答:)

我试图显示引导模式然后绑定它的按钮。但是我无法通过显示模态的第一步。我正在使用 .net core 3.1 的 Blazor 客户端模板。我有一个名为 Modal.razor 的页面，其中包含我从 getbootstrap.com 找到的引导模式。

@if (Show)
{
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
}
@code {
    [Parameter]
    public bool Show { get; set; } = false;
}

我在 index.razor 文件中调用了模态

@page "/" …

我在 App.razor 上收到此错误：

发现具有意外名称“CascadingAuthenticationState”的标记元素。如果这是一个组件，请为其命名空间添加@using 指令

这是我正在使用的代码

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

我正在使用 Visual Studio 2019 预览版，我可以运行该应用程序，但是，为什么我在 Cascading.... 中有红线？

在 JavaScript 中，我们可以使用以下调用将调试输出写入浏览器的控制台：

console.log("My debug output.");

谷歌浏览器中的输出：

如何通过 Blazor WebAssembly 将组件中的“我的调试输出”记录到浏览器的控制台？

<button @onclick="ClickEvent">OK</button>

@code {

    private void ClickEvent()
    {
        // console.log("My debug output.");
    }
}

尝试使用Microsoft 提供的本指南从 ASP.NET Core 3.1 迁移到 5.0 。

安装了带有运行时的 SDK 5.0.100-rc.1。按照指南更新项目，但仍然出现以下错误：

There was no runtime pack for Microsoft.AspNetCore.App available for the specified RuntimeIdentifier 'browser-wasm'

项目文件：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
    <PropertyGroup>
        <TargetFramework>net5.0</TargetFramework>
        <UserSecretsId>*****</UserSecretsId>
    </PropertyGroup>
...

找不到与此错误相关的任何内容。我不知道在哪里搜索更多信息。

谢谢你的任何想法。

我正在尝试使用 Blazor WebAssembly 开发一个应用程序，我想知道如果用户未通过身份验证，我该如何保护我的整个应用程序。我将实施的行为是：

• 如果匿名用户请求任何页面，那么他将被重定向到登录页面

更好的

• 用户必须通过身份验证才能使用此应用程序

目前我已经实现了将[Authorize]属性应用于每个页面的这种行为，但我想集中它。

我已经在 Blazor 服务器端应用[Authorize]了_host.razor组件内部的属性实现了这个目标。

Blazor 客户端是否有解决方案？

我安装了 Visual Studio 2019 16.6.2，以及 .NET Core 3.1.301 SDK 和所有必要的 Blazor 模板。

如果我创建了一个全新的 Blazor WebAssmbly 应用程序，我可以通过按Ctrl+从 Visual Studio 运行它F5，它会在我的活动浏览器窗口中打开一个新选项卡并正常启动。

但是当我按下 时F5，会打开一个新的、单独的浏览器窗口（这有点烦人），但页面会停留about:blank一段时间，直到 Visual Studio 中出现错误消息：

Failed to launch debug adapter.  Additional information may be available in the output window.

Unable to launch browser: 
"Could not open wss://localhost:5001/_framework/debug/ws-proxy?browser=wsAFFlocalhostA50821FdevtoolsFbrowserFceed3b95-58ac-470a-b10c-5d139cfd7117": timeout after 60000ms

Blazor WebAssembly 应用程序是否“托管”并没有什么区别。

我已按照在 ASP.NET Core 中执行 HTTPS 中的步骤进行操作，但这并没有什么区别。

如果在等待about:blank窗口崩溃时，我在浏览器选项卡上手动打开客户端 url，应用程序将加载并命中调试器断点。在短短的一段时间之前，它不断的崩溃，如果我打Shift+ Alt+D我总是得到以下错误： …

我有一个带有第 5 版程序集的 Blazor WASM 项目，并尝试根据本文激活调试：https ://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1

为此，我确保更新了所有程序集引用并调整了启动设置。后者现在看起来像这样：

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:62310",
      "sslPort": 44325
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "ApplySupportTool.Client": {
      "commandName": "Project",
      "launchBrowser": true,
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

这些也是我在 WASM 项目中的参考资料：

<PackageReference Include="System.Net.Http.Json" Version="3.2.0-preview5.20210.3" />
<PackageReference Include="Microsoft.AspNetCore.Components.DataAnnotations.Validation" Version="3.2.0-preview2.20160.5" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0-preview5.20216.8" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0-preview5.20216.8" PrivateAssets="all" />
<PackageReference …

在服务器端 ASP.NET 中，我们可以asp-append-version=true对 .cshtml 文件中的静态资产进行处理，以便自动将文件的哈希附加到文件名。但是，在 Blazor WebAssembly 中，这不起作用，这是有道理的，因为我有一个简单的 index.html 文件，它引导 Blazor 并引用静态文件，而不是服务器修改的文件。

那么在 Blazor WebAssembly 的 index.html 文件中是否有一种好方法可以将哈希附加到静态文件的 URL 中，结果类似于旧的asp-append-version=true？例如，要 make <link href="css/site.css" rel="stylesheet" />become <link href="css/site.css?v=1234abc..." rel="stylesheet" />，因此在部署时更改 site.css 将导致所有客户端 GET 新更改的静态文件，而不是依赖缓存？

我有一个带有名为 TabChanged 的​​事件操作的自定义组件。在我的 Razor 页面中，我像这样设置了对它的引用：

<TabSet @ref="tabSet">
 ...
</TabSet>

@code {
    private TabSet tabSet;   
    ...
}

在OnAfterRenderAsync方法中，我为事件分配了一个处理程序：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        tabSet.TabChanged += TabChanged;
    }       
}

页面第一次呈现时，我收到System.NullReferenceException: Object reference not set to an instance of an object错误。

如果我切换到使用后续渲染它工作正常：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(!firstRender)
    {
        tabSet.TabChanged += TabChanged;
    }       
}

但当然这是草率的，我将在渲染期间触发多个事件处理程序。

如何在第一次渲染时分配参考？我正在按照此处概述的文档进行操作

编辑

这是 TabSet.razor 文件：

@using Components.Tabs

<!-- Display the tab headers -->
<CascadingValue Value="this">
    <ul …