« Blazor component » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications
Ligne 78 : Ligne 78 :


= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-5.0 Cascading values and parameters] =
= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-5.0 Cascading values and parameters] =
Set a value for the component hierarchy from an ancestor component to any number of descendent components.
<filebox fn='Pages/Index.razor'>
<CascadingValue Value="btnStyle">
    <MyComponent />
</CascadingValue>
@code {
    string BtnStyle = "btn-success";
}
</filebox>
<filebox fn='Components/MyComponent.razor.cs'>
[CascadingParameter]
public string BtnStyle { get; set; }
</filebox>

Version du 25 juillet 2021 à 15:41

Basic component

Components/MyComponent.razor
<h1>Test</h1>
<p>@ChildContent</p>
Components/MyComponent.razor.cs
public partial class MyComponent : ComponentBase
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}
Components/MyComponent.razor.css
h1 {
    color: coral;
}
Pages/Index.razor
@page "/"
@using Component.Components

<MyComponent>
    test !!!
</MyComponent>

Callback event

Components/MyComponent.razor.cs
[Parameter]
public EventCallback<string> Callback { get; set; }

private string description;

private async Task UpdateDescription()
{
    await Callback.InvokeAsync(description);
}
Pages/Index.razor
<MyComponent Callback="MyComponentCallback" />

@code {
    void MyComponentCallback(string description)
    {

    }
}

Binding with component parameters

Components/MyComponent.razor.cs
[Parameter]
public string Description { get; set; }

// name of the EventCallback has to be [PropertyName]Changed
[Parameter]
public EventCallback<string> DescriptionChanged { get; set; }

private async Task UpdateDescription()
{
    await DescriptionChanged.InvokeAsync(description);
}
Pages/Index.razor
@* two ways binding of the component parameter Description with the local field description *@
<MyComponent @bind-Description="description" />

@code {
    private string description = "Text";
}

Cascading values and parameters

Set a value for the component hierarchy from an ancestor component to any number of descendent components.

Pages/Index.razor
<CascadingValue Value="btnStyle">
    <MyComponent />
</CascadingValue>

@code {
    string BtnStyle = "btn-success";
}
Components/MyComponent.razor.cs
[CascadingParameter]
public string BtnStyle { get; set; }