标签: blazor-server-side

Blazor InputText:有条件地呈现属性

Blazor vRC1

我正在寻找一种关于如何有条件地呈现一个<InputText>(或任何与此相关的输入组件)中的属性的简单技术。这在 MVC Razor 中曾经很简单,您只需在@(...)语句中编写条件逻辑即可。现在,书写@(...)在 Razor 语法中具有不同的含义。

例如,我想有条件地输出 .html 的autofocusHTML 属性InputText

<InputText 
 @bind-Value="@TextProperty"
 @(MyModel.isAutoFocus ? "autofocus" : "") <-  This is invalid razor syntax!
/>
Run Code Online (Sandbox Code Playgroud)

asp.net-core blazor blazor-server-side

11
推荐指数
3
解决办法
1万
查看次数

从 Blazor 中的页面组件调用 MainLayout 中的方法

我有一个带有MainLayout页面的 Blazor 应用程序,它@Body可以加载实际的页面内容。

在我的情况下Index.razor是在MainLayout页面内加载的。

有没有办法从位于父页面中的子页面(Index.razor)调用方法;MainLayout.razor?

例子:

MainLayout.razor

<div class="content">
<ul class="menu">
  <li>menu item 1</li>
</ul>

@Body

</div>

@code
{
    public async Task Test()
    {
        await JsRuntime.InvokeAsync<object>("console.log", "test parent");
    }
}
Run Code Online (Sandbox Code Playgroud)

Index.razor

<h1>This is the index page</h1>
<button @onclick="(async () => await btn_clicked())">Call parent method</button>

@code
{
    // Call method in MainLayout
    public async Task btn_clicked()
    {
        await parent.Test();
    }
}
Run Code Online (Sandbox Code Playgroud)

razor-pages blazor blazor-server-side

11
推荐指数
2
解决办法
3372
查看次数

自定义组件上的 Blazor 双向绑定

我正在创建一个 blazor 服务器端应用程序,但在两个自定义组件之间绑定值时遇到问题。

我已经查看了有关 bind 或 @bind 应该如何工作的不同示例,但我无法弄清楚有关此事的最新信息是什么。

给定一个模型类 User:

public class User
    {
        [Mapping(ColumnName = "short_id")]
        public string ShortId { get; set; }

        public User()
        {

        }
    }
Run Code Online (Sandbox Code Playgroud)

我想构建一个表单,显示该用户的所有属性并将它们输入到输入中,以便可以对其进行编辑并最终保存到数据库中。

我的表单(父组件)如下所示:

<div class="edit-user-form">
    <AnimatedUserInput TbText="@User.ShortId" Placeholder="MHTEE Id"/>
    <button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}">Back</button>
    <button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}">Save</button>
</div>
@code {
    [Parameter] public vUser User { get; set; }

    [Parameter] public Action Hide { get; set; }

    bool _error = false;

    void SaveUser()
    {
        ValidateUserData();
    }

    void ValidateUserData()
    {
        _error = …
Run Code Online (Sandbox Code Playgroud)

c# .net-core blazor blazor-server-side blazor-client-side

11
推荐指数
2
解决办法
5288
查看次数

如何将字符串参数传递给 Blazor 中的 @onclick 事件?

我正在处理在 Visual Studio 2019 中创建的 Blazor App 模板。我知道该项目使用的是 ASP.NET Core 3.0,但它是什么版本的 Blazor,我不知道。不过它会很新,因为我只玩了几天。

最终结果:我要使用 URL 参数将 Id 传递给另一个 Blazor 页面。

我坚持的一点:它在https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0上说

使用 Microsoft.AspNetCore.Components.NavigationManager 在 C# 代码中处理 URI 和导航。NavigationManager 提供的事件和方法如下表所示。因此,出于这个原因,我添加了一个带有 @onclick 事件的图标,单击该事件时,应使用 NavigationManager 转到另一个页面,但 URL 中带有 id。

我收到以下代码的此错误:

错误 CS7036 没有给出对应于 '__generated__CarsMainView.Navi(string, int)' 的所需形式参数 'linkAddress' 的参数

这是我的代码:

    @if (Cars == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        @foreach (var car in Cars)
        {
            <div class="card">
                <img class="card-img-top" src="@car.ImageUrl" alt="Place holder" @onclick="(e => Show(car.Id))" data-toggle="modal" data-target="#carModal" />
                <div class="card-body">
                    <h5 class="card-title">@car.Make @car.Model</h5> …
Run Code Online (Sandbox Code Playgroud)

blazor blazor-server-side

11
推荐指数
2
解决办法
8529
查看次数

Blazor 服务器 - “代码隐藏”模式:OnInitializedAsync():找不到合适的方法来覆盖

我有一个 Blazor(服务器)应用程序,它运行得非常好,并且遵守Microsoft.CodeAnalysis.FxCopAnalyzers和设置的所有规则StyleCop.Analyzers

一个大幅削减的剃刀页面如下:

@inherits OwningComponentBase<MyService>
@inject IModalService ModalService
@inject IJSRuntime JSRuntime

// UI code

@code
{
    private readonly CancellationTokenSource TokenSource = new CancellationTokenSource();
    ElementReference myElementReferenceName;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await this.myElementReferenceName.FocusAsync(this.JSRuntime);
    }

    protected override async Task OnInitializedAsync()
    {
        ....
    }

    public void Dispose()
    {
        this.TokenSource.Cancel();
    }

    protected void ShowModalEdit(object someObject)
    {
        .....
        Modal.Show<MyPage>("Edit", parameters);
    }
}
Run Code Online (Sandbox Code Playgroud)

注意#1:我@inherits OwningComponentBase<MyService>根据Daniel Roth 的建议使用

注意#2:我正在使用Chris Sainty 的 Modal 组件组件

但是,当我尝试将所有代码从该@code {...} …

code-behind blazor blazor-server-side

11
推荐指数
3
解决办法
6976
查看次数

如何在服务器上的 ASP.NET Core 产品上禁用“尝试重新连接到服务器”消息

我有一个 ASP.NET Core 3.1 C# razor pages 应用程序,它也使用了一些 Blazor 服务器端 razor 组件。我已将其发布到 Windows 2008 R2 Server 上的 IIS。但是当在一部安卓手机上用 Chrome 浏览网站时,会定期出现一条消息:

尝试重新连接到服务器

此外,当用户在一段时间内处于非活动状态时,例如关闭手机显示屏,会出现一条消息

与服务器断开连接。重新加载页面...

该网站不是英文的,这些通用信息不利于最终用户体验。有什么方法可以禁用这些消息,或者至少将它们翻译成另一种语言?

c# asp.net-core razor-pages blazor-server-side asp.net-core-3.1

11
推荐指数
3
解决办法
7541
查看次数

错误 CS1660:无法将 lambda 表达式转换为类型“bool”,因为它不是委托类型

这让我发疯了多年。我拿了以下工作代码

<input @onchange="@((ui) => Console.WriteLine(ui.Value))" />
Run Code Online (Sandbox Code Playgroud)

并将其复制到一个新的 blazor 组件项目中。然后我开始收到错误

error CS1660: Cannot convert lambda expression to type 'bool' because it is not a delegate type

blazor blazor-server-side

11
推荐指数
2
解决办法
6276
查看次数

在 IIS 中运行 Web 应用程序时,HttpContext 为 NULL

我有两个应用程序,都运行在同一台 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;  
}
Run Code Online (Sandbox Code Playgroud)

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

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

我该如何解决这个问题?

iis asp.net-core identityserver4 blazor-server-side .net-core-3.1

11
推荐指数
1
解决办法
2111
查看次数

在所有 Blazor 页面上都需要授权

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

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

谢谢!

blazor blazor-server-side asp.net-blazor

11
推荐指数
2
解决办法
2871
查看次数

如何修改 Blazor(服务器)中的当前文化日期格式?

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 = …
Run Code Online (Sandbox Code Playgroud)

c# asp.net-core blazor blazor-server-side asp.net-core-3.1

11
推荐指数
1
解决办法
5805
查看次数