如何在mudblazor(或blazor)组件之间传递数据

问题描述 投票:0回答:1

我想将ActivatedValue.Value(这是我的模型的id)传递给另一个组件。

@using ProtaTestTrack2.Helpers
@using ProtaTestTrack2.Services
@inject IDialogService DialogService


<MudPaper Class="d-flex flex-column" Style="position: relative; padding: 16px;">
    <MudIconButton Icon="@Icons.Material.Filled.Add" Color="Color.Primary" Style="position: absolute; top: 10px; right: 50px;" OnClick="OpenDialog" />
    <MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Secondary" Style="position: absolute; top: 10px; right: 10px;" OnClick="EditFeature" />

    <MudTreeView Items="TreeItems" MultiSelection="false" SelectedValueChanged="FeatureChanged" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues" Dense>
        <ItemTemplate Context="item">
            <MudTreeViewItem @bind-Expanded="@item.IsExpanded" Items="@item.TreeItems" Value="@item"
                            Icon="@item.Icon" Text="@item.Title" EndText="@item.Number?.ToString()" EndTextTypo="@Typo.caption">
                <BodyContent>
                    <MudText Style="justify-self: start;">
                        <MudHighlighter Text="@context.Text" />
                    </MudText>
                </BodyContent>
            </MudTreeViewItem>
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

@code {

    private int myVar;

    public int MyProperty
    {
        get { return myVar; }
        set { myVar = value; }
    }

    [Inject] FeatureService featureService { get; set; }

    private TreeItemData _ActivatedValue;

    [Parameter]
    public TreeItemData ActivatedValue
    {
        get { return _ActivatedValue; }
        set
        {
            _ActivatedValue = value;
            FeatureChanged.InvokeAsync(value);
        }
    }

    [Parameter] public EventCallback<TreeItemData> FeatureChanged { get; set; }

    [Parameter] public HashSet<TreeItemData> SelectedValues { get; set; } = new HashSet<TreeItemData>();

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    protected override async Task OnInitializedAsync()
    {
        await PopulateTree();
    }

    public async Task PopulateTree()
    {
        var features = await featureService.GetAllFeaturesAsync();
        var treehelper = new Helpers.TreeviewHelper(features);
        treehelper.BuildTree();
        TreeItems = treehelper.TreeItems;

        StateHasChanged();
    }

    private Task OpenDialog(MouseEventArgs e)
    {
        var options = new DialogOptions { CloseOnEscapeKey = true };

        return DialogService.ShowAsync<FeatureDialog>("Feature", options);
    }
    

    private void EditFeature(MouseEventArgs e)
    {
        // Edit feature logic here
    }
}

这是我的模型组件,具有功能。

@using ProtaTestTrack2.Model
@using ProtaTestTrack2.Services
@inject FeatureService featureService

<MudDialog>
    <DialogContent>
        <MudTextField T="string" Label="Name" @bind-Value="featureData.Name" />
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>

@code {
    public class FeatureData 
    {
        public string Name { get; set; }
        public string ParentFeatureID { get; set; }
    }
    [CascadingParameter]
    private MudDialogInstance MudDialog { get; set; }

    private FeatureData featureData = new FeatureData();

    private async Task Submit()
    {
        var feature = MapFeatureData(featureData);
        var createdFeature = await featureService.CreateFeatureAsync(feature);
        MudDialog.Close(DialogResult.Ok(true));
    }

    private void Cancel() => MudDialog.Cancel();
    private Feature MapFeatureData(FeatureData featureData)
    {
        return new Feature
        {
            Name = featureData.Name,
            ParentFeatureID = featureData.ParentFeatureID
        };
    }
}

这是我的功能对话框组件。我想将其传递到此处,因为如果传入的数据为空,则意味着我将创建为父级,但如果数据不为空,我将将该数据映射到父级 featureId。

我尝试了类似的方法,但它不起作用,而且激活值可能会不断变化,但我无法处理。

frontend blazor mudblazor
1个回答
0
投票

与option类似,显示MudDialog时可以传递参数

private Task OpenDialog(MouseEventArgs e)
{
    var options = new DialogOptions { CloseOnEscapeKey = true };
    var parameters = new DialogParameters<FeatureDialog> { { x => x.Value, ActivatedValue.Value} };

    return DialogService.ShowAsync<FeatureDialog>("Feature", parameters, options);
}

在对话框中:

[Parameter]
public TreeItemData Value{ get; set; }

这是特定于 MudDialog 组件的,文档在这里

© www.soinside.com 2019 - 2024. All rights reserved.