标签: blazor-server-side

Blazor 文档的表单验证示例在EditForm组件中有一个提交按钮组件：

    <EditForm Model="@starship" > OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind Value="@starship.Identifier" />
        </p>
    
        Snip....

        <button type="submit">Submit</button>

        Snip...

    </EditForm>

Run Code Online (Sandbox Code Playgroud)

无论如何，是否可以将该提交按钮放置在标签之外，EditForm并且仍然“本机”触发该EditForm组件的提交，而无需使用 JavaScript？

即代码看起来像这样：

    <!-- Want this button to submit the form in the EditForm tags-->
    <button type="submit">Submit</button>

    Snip...

    <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind-Value="@starship.Identifier" />
        </p>
    </EditForm>

我有一个服务器端 blazor 客户端，我正在尝试通过登录检查来修改 MainLayout razor 页面。我目前正在使用 Blazored 进行本地存储保存，并且我目前正在使用查看是否保存了令牌以查看用户是否登录，但是我不确定如何在 razor 页面的 if 语句中翻译它，因为它想要异步方法。

我的登录检查非常简单，如下所示。

public async Task<bool> IsLoggedIn()
{
    return await m_localStorage.ContainKeyAsync("token").ConfigureAwait(false);
}

在我的 Razor 页面中，我正在执行此语句检查 - 这显然不起作用，因为没有 async 修饰符

@if (!await AppState.IsLoggedIn()) //Requires async modifier
{
    <a href="Login" target="_blank">Login</a>
}

我也尝试使用 .Result 属性执行此操作，但这会导致抛出异常：(System.AggregateException: 'Information: Executed an implicit handler method, returned result Microsoft.AspNetC)' 带有内部异常 -> NullReferenceException ： 你调用的对象是空的。

但是从我所看到的 AppState 被正确注入，本地存储似乎在 AppState 中被正确注入。

@if (!AppState.IsLoggedIn().Result)
{
    <a href="Login" target="_blank">Login</a>
}

所以我的问题是解决这个问题的正确方法是什么，有没有办法在剃刀页面中执行异步方法？

使用Microsoft docs 中的示例，我尝试以编程方式将焦点设置为输入元素。

不幸的是，该示例使用了标准，<input type="text">而我想将其用于InputTextelement。

Microsoft 示例使用了一种扩展方法，该方法采用ElementReference：

public static Task Focus(this ElementReference elementRef, IJSRuntime jsRuntime)
{
    return jsRuntime.InvokeAsync<object>(
        "exampleJsFunctions.focusElement", 
        elementRef);
}

使用InputText，我认为无法获得这样的ElementReference.

提供我自己的Focus()重载InputText而不是编译但没有显示视觉结果。所以我一无所知。

我的问题

如何以编程方式将焦点设置为InputText元素？

我正在尝试使用 JSInterop 在我的服务器端 Blazor 应用程序上启动 Google 地图。我似乎已经尝试了几乎所有方法，但无法显示地图。不幸的是，互联网上几乎没有关于它的样本，因为它是一个相当新的框架，而且我自己也同样刚刚开始接触 Blazor，所以我可能做错了很多事情。任何朝着正确方向的推动将不胜感激。

在我的组件文件中，我有：

@page "/MapTest"
@inject IJSRuntime JSRuntime

<style>
    #map {
        width: 60%;
        height: 60%;
    }
</style>

<h1>Display Google Map</h1>


<div @ref="map" id="map"></div>

@code {

    ElementReference map; // reference to the DIV

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
        //StateHasChanged();

    }
}

在我的 _Host.cshtml 文件中，我有：

   <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&v=3"></script>

    <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(40.716948, -74.003563);
                var options = {
                    zoom: 14, center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP …

当我的服务器端 Blazor 应用程序运行时，我希望一些 Javascript 代码_Host.cshtml能够将数据发布到控制器操作。当然，这完全超出了 Blazor 应用程序本身的范围，并且与 Blazor 应用程序本身无关。

我想这将是添加调用的问题services.AddControllers()，并endpoints.MapControllers()在适当的地方Startup.cs。但是，在执行此操作并实施控制器操作之后，我进行了以下观察：

• 对操作的请求不会被路由并被视为“未找到”
• 在 Razor 中，@Url.Action控制器操作返回一个空字符串

如何以克服上述两个问题的方式向我的服务器端 Blazor 项目添加控制器（而非视图）支持？

当我在 Azure 上发布 Blazor 服务器端应用程序时，Visual Studio 会提示一条消息：

您的应用程序正在使用 SignalR。对于需要扩展的环境，我们强烈建议添加对 Azure SignalR 服务的依赖。

但是，我的应用程序可以正常工作，无需使用 Azure SignalR 服务。所以我想知道整合它是否真的有意义，或者这只是微软从我们口袋里多掏几美元的一种方式......

有没有人试过在有和没有 Azure SignalR 服务的情况下部署 Blazor 服务器端应用程序，以测试在性能方面是否有任何实际差异？我应该从中获得什么样的优势？

在服务器端Blazor应用程序中，我想存储页面导航之间保留的某些状态。我该怎么做？

常规的ASP.NET Core会话状态似乎不可用，因为很可能适用于ASP.NET Core的“会话和应用程序”中的以下说明：

SignalR 应用程序不支持会话，因为SignalR集线器可以独立于HTTP上下文执行。例如，当长轮询请求由集线器在请求的HTTP上下文的生存期之外保持打开状态时，可能会发生这种情况。

GitHub问题向SignalR for Session添加支持中提到您可以使用Context.Items。但是我不知道如何使用它，即我不知道如何访问该HubConnectionContext实例。

我对会话状态有哪些选择？

我有两个应用程序，都运行在同一台 Windows 机器上。一个应用程序是 IdentityServer4，另一个是我自己的 Web 应用程序（服务器端 Blazor 应用程序）。

这两个 Web 应用程序都是使用 .NET Core 3.1 构建的。

当我导航到我的 Web 应用程序时，我首先被重定向到我的 IdentityServer4 应用程序。我登录，然后我被重定向回我的网络应用程序。

登录成功，因为IdentitServer的日志没有错误。此外，我claim在 Blazor 网页上看到了某个值。我这显示claim通过CascadingAuthenticationState我的Blazor页。通过那条路径，一切正常。

但是，每当我尝试HttpContext在我的“代码隐藏”文件中获取登录用户时，我都会返回一个 Null 引用。例如：

public UserService(IHttpContextAccessor httpContextAccessor)
{
    // HttpClient is NULL...
    var httpCtx = _httpContextAccessor.HttpClient;  
}

奇怪的是，当我在 Visual Studio 中本地运行我的应用程序时，一切正常。当我在 Visual Studio 中调试时，我看到HttpContext设置了我的所有用户数据。

但是，出于某种原因HttpContext，NULL当我从 IIS 运行应用程序时。

我该如何解决这个问题？

我正在使用 Blazor 并创建了一个服务器托管的 Web 应用程序。我必须像这样在页面顶部放置一个授权行@attribute [Authorize] 以确保用户已登录。

似乎我必须将这一行单独添加到每个页面。是否有一个全局设置可以保护应用程序中的所有页面，当然登录页面除外。

谢谢！

ASP.NET Core Blazor 全球化和本地化声明：

Blazor 的@bind功能根据用户的当前文化执行格式并解析值以进行显示。
可以从System.Globalization.CultureInfo.CurrentCulture property.

这个说法是对的，但问题是，文化必须在使用之前设置（或者可能每次刷新 DOM 时）。

为了演示，我将使用标准的 blazor 计数器应用程序。让我们修改Counter.razor

@page "/counter"
@using System.Globalization;

<h1>Counter</h1>
<input type="text" @bind="currentDate" />

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private DateTime currentDate = DateTime.Now;
    private int currentCount = 0;

    private void IncrementCount() {
        if (currentCount < 2) Utils.SetCCDateFormat();
        currentCount++;
    }

    public class Utils {
        public static void SetCCDateFormat() {
            var cc = CultureInfo.CurrentCulture.Clone() as CultureInfo;
            cc.DateTimeFormat.ShortDatePattern = "dd-yyyy-m";
            CultureInfo.CurrentCulture = …