标签: blazor-component

我正在尝试将 Blazor Server 项目拆分为多个组件，以便使其更易于管理。

我希望我的组件有一个函数作为参数传递给它。该函数采用一个字符串参数，当单击按钮时，会使用与组件不同的名称来调用该函数。

我尝试了一些在网上找到的答案，但它们似乎不起作用（比如绑定事件）

代码

我有一个名为ItemMenu.razor和我的索引页 的组件Index.razor。

ItemMenu.razor:

<button @onclick="() => OnClickFunction.Invoke(foo)">foo</button>
<button @onclick="() => OnClickFunction.Invoke(ping)">ping</button>

@code {
    [Parameter] public Action<string> OnClickFunction { get; set; }

    const string foo = "bar";
    const string ping = "pong";
}

Index.razor:

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClickFunction="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}

错误

第 3 行Index.html抛出错误 …

如果嵌套组件未正确填充，我需要显示验证消息。该组件由其他父组件使用，它们需要获得有关是否存在验证问题的反馈。

我已经为嵌套组件尝试了以下代码并使用了该CanSubmit方法。虽然该方法可以正确判断是否存在验证问题，但验证消息并未显示。

下面的所有代码都可以在blzorrepl上测试： https ://blazorrepl.com/repl/GvOQlvvv1789ra1G37

@if(editContext != null) {
    <EditForm EditContext="@editContext">
        <input type="text" @bind="testModel.Name" />
        <DataAnnotationsValidator />
        <ValidationSummary />
    </EditForm>
}

@code {
    [Parameter]
    public TestModel testModel
    {
        get { return (TestModel)editContext?.Model; }
        set { editContext = new EditContext(value); }
    }

    EditContext editContext;

    public bool CanSubmit()
    {
        return editContext.Validate();
    }
}

这是我的父组件代码，稍微减少但重现了问题：

<ChildComponent @ref="myTestComponent" testModel="testModel" />
<input type="button" @onclick="buttonClick" value="validate programmatically" />
<div>@testMessage</div>

@code {
    TestModel testModel = new TestModel();
    ChildComponent myTestComponent;
    string testMessage;

    void buttonClick()
    {
        testMessage …

在 main 方法中dotnet core blazor web assembly app有一个WebAssemblyHostBuilder为 blazor 应用程序构建主机的类。在那个类中有一个公共属性，称为RootComponentMappingCollection它可以添加 blazor 应用程序的根组件（设置路由的组件）。

可以向该集合添加更多根组件。我很好奇为什么在一个应用程序中拥有多个根组件，拥有多个根组件有什么好处，何时以及在什么情况下拥有多个根组件更好？

使用新的 .NET 5 预览版 CSS 隔离来了 blazor。有人知道，是否可以在 blazor 服务器中使用 CSS 隔离？

我玩了很多，但在我的 blazor 服务器应用程序中，CSS 隔离不起作用。还是此功能仅在 blazor WebAssembly 中可用？

所以我试了一下：

• 创建一个新的 blazor 组件，例如 test.razor
• 创建名为 test.razor.css 的组件 CSS 文件，并在此文件中写入 CSS 代码
• 现在启动 blazor-server 应用程序，但不会添加静态 CSS 文件，也找不到 CSS 类。

TargetFramework 是“net5.0”。安装的 dotnet 版本是“5.0.100-rc.2.20479.15”。

问候丹尼尔

我希望通过 Blazor 中的 DynamicComponent 在组件之间进行流畅的通信。因此，我想知道是否可以将函数传递给 DynamicComponent，因为现在它不知道将呈现的组件需要一个函数才能完全运行。欢迎所有建议。

Index.razor

@page "/"

/*This is where I'd like for all of my components to get rendered cleanly*/
<DynamicComponent Type="selectedType" /*Here I'd like to pass a function "GoToComponent"*/ />

@code {
    public void GoToComponent(string name)
    {
        selectedType = Type.GetType($"Namespace.Pages.{name}");
    }
}

LandingComponent.razor

<p @onclick="() => OnClickFunction.InvokeAsync("First")">GO TO FIRST</p>
<p @onclick="() => OnClickFunction.InvokeAsync("Second")">GO TO SECOND</p>

@code {
    [Parameter] public EventCallback<string> OnClickFunction { get; set; }
}

FirstComponent.razor

<p @onclick="() => OnClickFunction.InvokeAsync("Landing")">GO TO LANDING</p>
<p …

我正在创建一个自定义 Blazor 组件，我需要选择组件来使用所选值更新绑定字段，这部分正在工作。我还需要它来执行从父组件传入的方法，这部分不起作用。

我能够将该方法传递到自定义组件（子组件）中，但onclick选择元素的选项元素的事件未触发。

我能够在多重选择元素中实现此功能，但它在选择元素中不起作用。

如何让它触发并仍然更新绑定的数据属性？

ESelect.razor自定义（子）选择组件

@inherits InputBase<string>

<div class="form-floating">
        <select class="form-control form-select @CssClass" id="@Id" @bind="@CurrentValue" >
            <option disabled selected></option>
            @foreach(SelectOption option in Options)
            {
                <option id=@option.Id onclick="@( () => OnClick(option) )" >@option.Value</option>
            }
        </select>
        @if (!string.IsNullOrWhiteSpace(Label))
        {
            <label class="form-control-label" for="@Id">@Label</label>        
        }
        <div class="form-control-validation">
            <ValidationMessage For="@ValidationFor" />
        </div>
</div>

ESelect.razor.cs （ESelect.razor 的 C# 代码）

using BebComponents.DataModels;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System.Linq.Expressions;

namespace BebComponents
{
    public partial class ESelect
    {
        [Parameter, EditorRequired]
        public Expression<Func<string>> ValidationFor { …

我有一个基本组件PetTemplate和第二个PetDog继承并使用PetTemplate. PetTemplate有一个名为 的方法ToggleDisplay。Index我的目标是当我单击页面上调用该方法的按钮PetDog.ToggleDisplay并在页面上显示/隐藏 PetDog 详细信息时。

下面示例代码中的“内部”按钮有效，但“外部”按钮无效。如何ToggleDisplay正确从页面或父组件调用该方法？

索引剃刀

@page "/"

<button @onclick="ShowPetDetails">Show Details (Outside)</button>

<PetDog @ref="dog" />

@code {
    PetDog dog;

    void ShowPetDetails()
    {
        dog.ToggleDisplay();
    }
}

宠物狗剃刀

@inherits PetTemplate

<PetTemplate Name="Dog">
    <div>Someone's best friend!</div>
</PetTemplate>

PetTemplate.razor

<div class="mt-3">
    <button @onclick="ToggleDisplay">Show Details (Inside)</button>
    <h3>Pet Name: @Name</h3>
    <div style="display:@display">
        @ChildContent
    </div>
</div>

@code {
    string display = "none";

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

    [Parameter] …