标签: blazor-server-side

我正在创建一个 Blazor UI 应用程序来与 API 对话。目前，我正在尝试为此工作获取自定义提供程序，但出现了一些错误。

这是客户 AuthenticationStateProvider

public class APIAuthenticationStateProvider : AuthenticationStateProvider
{
    private readonly HttpClient _httpClient;
    private readonly ILocalStorageService _localStorage;
    public APIAuthenticationStateProvider(HttpClient httpClient, ILocalStorageService localStorage)
    {
        _httpClient = httpClient;
        _localStorage = localStorage;
    }
    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var token = await _localStorage.GetItemAsync<string>("authToken");

        if (string.IsNullOrWhiteSpace(token))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        _httpClient.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("bearer", token);

        var claims = ParseClaims(token);

        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims,"jwt")));
    }
}

我在 Startup.cs 文件中的配置服务功能如下所示

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages(); …

我有以下问题。我创建了一个事件并订阅了它，现在我希望在事件触发时 UI 发生变化。

 using System;
 using MintWebApp.Data;
 using MintWebApp.Models;
 using Microsoft.AspNetCore.Components;
 namespace WebApp.UI.Core
 {
    public partial class AppHeader
    {
        public string status { get; set; }
        [Inject]
        public StateService state { get; set; }

        EventHandler<string> onStatusChanged= (sender, eventArgs) => {

            //Here i get the error, I can't access this and status
            status = eventArgs;
            this.StateHasChanged();
            Console.WriteLine(eventArgs.PatientName);
        };

        protected override void OnInitialized() => state.StatusHandler += onStatusChanged;
    }

}

我收到此错误字段初始值设定项无法引用非静态字段、方法或属性“AppHeader.patientContext”

关键字“this”在当前上下文中不可用

如何订阅事件并更新 UI

我有一个带有表单提交的 Blazor 服务器端项目：

        <EditForm Model="@myWebUserVM" OnValidSubmit="HandleValidSubmit">
            <DataAnnotationsValidator />
            <ValidationSummary />
            @if (IsPasswordIncorrect)
            {<h6 class="text-danger">User Name or Password is incorrect.</h6>}
            <div class="row">
                <label class="col-md-4">User Name:</label>
                <div class="col-md-8">
                    <InputText id="uname" class="form-control" placeholder="User Name" @bind-Value="myWebUserVM.UserName" />
                </div>
            </div>
            <div class="row my-3">
                <label class="col-md-4">Password:</label>
                <div class="col-md-8">
                    <InputText id="upassword" class="form-control" type="password" placeholder="Password" @bind-Value="myWebUserVM.Password" />
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-outline-success" type="submit">Login</button>
            </div>
        </EditForm>

当我在 VS2019 本地运行它时，效果非常好。当我发布到 IIS 时，表单的工作方式有所不同。点击提交按钮将 http post 到服务器，页面/表单将重新加载。所以看起来我只是第一次打开它或在浏览器中按 F5。“private void HandleValidSubmit()”中的代码不会命中。看起来我只是用 HTTP 发布了一个常规表单。但这是一个 SPA，我不需要它通过 HTTP 发布。带验证的 Blazor 表单的正确代码应该是什么？为什么在VS2019调试模式下可以工作？或者，最有可能的是，需要 IIS 设置？谢谢。

现在 Blazor WebAssembly 正式发布，我尝试使用该模板创建我的第一个 Blazor wasm 项目，但很快注意到一件事与我所期望的完全不同。模板中似乎没有“服务器”部分，发布的结果仅包含静态资产（包括所有 .dll 文件）。当然，我想知道如何访问我的在线数据库？允许客户端直接访问我的数据库听起来是一个糟糕的主意（如果它可以做到的话），因为我必须在我的客户端代码中的某处包含我的连接字符串......绝对不！

在谷歌上快速搜索后，似乎每个人都在使用另一台服务器使用 API 来提供数据。好的，很好，但是如果我可以将我的服务器部分包含在同一个项目中，并使用 WebSocket（就像在 Blazor 服务器中一样）而不是 API 与我的客户端进行通信，那不是更好吗？那可能吗？

我在别处读到在创建 Blazor 服务器端应用程序时，每次您的应用程序用户与该应用程序交互时，服务器都会创建您的应用程序实例，这意味着，如果您有 1000 个用户同时使用您的应用程序，您的托管服务器将必须同时管理 1000 个应用实例。

因此，如果这是真的，Blazor WASM Asp.net Core 托管应用程序的 Asp.net 核心托管层是否也是这种情况？意思是，如果您有 1000 个用户同时向 WebAPI 发送请求，是否会创建 1000 个实例来处理请求？

我正在开发一个服务器端 Blazor 应用程序，该应用程序是使用为身份验证选择的“个人用户帐户”选项创建的。

我现在想自定义登录页面，但是当我选择通过脚手架添加身份页面时，我收到以下错误，我不知道从哪里开始进行故障排除。

无法在内存中编译项目

.OnInitializedAynsc() 找不到合适的方法来覆盖

为我的项目中的每个页面列出了上述错误。

我在 Blazor 服务器端应用程序中有一个简单的 EditForm。它有一个绑定属性，它改变了另一个也应该由表单验证的属性。

表格包含以下部分

<div class="form-group col-md-6">
    <label for="inputRechnungsnummer">Rechnungsnummer</label>
    <InputNumber @bind-Value="Input.Rechnungsnummer" id="inputRechnungsnummer" class="form-control" />
    <ValidationMessage For="() => Input.CustomerExists" />
    <ValidationMessage For="() => Input.Rechnungsnummer" />
</div>

如您所见，我想在这个 InputField 下显示两条消息。

bond 字段调用一个方法来查找客户详细信息。

public int Rechnungsnummer 
{ 
    get => _rechnungsnummer; 
    set
    {
        _rechnungsnummer = value;
        SearchKunde();
    }
}

这个方法改变了我的属性值

private void SearchKunde()
{

    /* LOGIC */
    
    if(name != null)
    {
        Kundenname = name;
        CustomerExists = true;
    }
    else
    {
        Kundenname = "";
        CustomerExists = false;
    }
}

第二个属性定义为：

[Required]
[Range(typeof(bool), "true", "true", …

我有一个 Blazor 服务器端应用程序，试图了解其结构。在 MainLayout.razor 页面中，我看到了标签 @Body，这是每个页面内容的呈现位置。

我想知道，是否可以向 mainLayout 页面添加额外的渲染元素？例如，@Header 部分。而且我更愿意在每个单独的页面中定义这个部分。

换句话说，对于每个页面，除了主要内容之外，还需要定义Header、Footer，或者我在MainLayout中定义的任何渲染元素。这样，我可以自定义每个页面唯一的页眉/页脚元素。

谢谢你的帮助。

这似乎是一个非常基本的问题，但我还没有找到我正在寻找的答案。

假设您有一个名为 的 Blazor 组件<Button>，该组件具有诸如Label等参数。当您使用该组件时，这些参数的接收方式类似于 HTML 属性：

<Button Label="Sign Up" />

但是如何为组件设置实际的 HTML 属性？！例如，假设您想为组件表示的元素提供额外的类，或标题属性、角色或类型等。以下显然不起作用，因为组件标记上的所有属性都是预期的成为该组件的参数：

<Button Label="Sign Up" class="foo" type="submit" id="bar" />

因此，我能想到的唯一方法是为该组件内的每个属性声明一个参数（公共属性）。

<button type="@Type" class="button @Class" id="@Id">@Label</button>

@code {
    [Parameter]
    public string Class { get; set; }

    [Parameter]
    public string Type { get; set; }

    [Parameter]
    public string Role { get; set; }

    [Parameter]
    public string Id { get; set; }

    // And others
}

然后在使用组件时你这样做：

<Button Label="Sign Up" Class="foo" Id="bar" Type="Submit" />

但这显然并不理想。这不方便，而且看起来像是一个不必要的抽象层。

所以，我的问题是：这应该怎么做？如果有这样的事情，那么“标准”的方法是什么。难道没有比为每个属性声明参数更方便的方法吗？

我一般是 …