0

我有一个基于标准 Blazor 模板的相当简单的设置。我已经进行了大量的谷歌搜索，但我不知道如何正确地构建它。我理解一般参数流向后代，事件流回父母。我已经让 CascadingValue 将参数发送到 Index.razor 页面就好了，但是我无法理解如何将自定义组件（FilterMenu）中的按钮（单击）连接到 Index.razor 页面上的方法它被埋在 MainLayout @Body 标签中？

编辑 1：这是针对 WebAssembly 的。

请帮我理解！

我的设置如下：

--FilterMenu.razor--

<div class="filterMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <button class="btn-success" @onclick="ApplyFilters">Do Work</button>
         </li>
    </ul>
</div>

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

     private async Task ApplyFilters()
    {
        var filters = new FilterObject() { SomeFilter = "SomeValue"};

        ////TODO: This needs to flow through to the @Body (index.razor page) where we'll get the data and display for that page/component - But How!?

    }
}

--MainLayout.razor--

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <FilterMenu OnClick_ApplyFilters="ApplyFilters"></FilterMenu>
        </div>
        <CascadingValue Name="FilterValues" Value="@filters">
            <div class="content px-4">
                @Body
            </div>
        </CascadingValue>
    </div>
</div>

--Index.razor--

@page "/"

<div class="mainContent">
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
                <div>
                    Sample Data Grid here
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div>
                    Sample Data 2 Grid here
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    [CascadingParameter(Name = "FilterValues")]
    protected Filters filters { get; set; }

    public async Task GetGridData()
    {
        //TODO: How to get this to execute from the button click in the FilterMenu component!?

        await LoadSampleData(filters);
        await LoadSampleData2(filters);
    }

    private async Task LoadSampleData(Filters filters)
    {
    //GetData
    }

    private async Task LoadSampleData2(Filters filters)
    {
    //GetData
    }
4

1 回答 1

0

这个答案可能会根据你是在做 WebAssembly 还是服务器端而改变，但你正在寻找的建议（架构师）是相似的。

您可以拥有一个跨应用程序共享的状态，并且Index.razor您将在其中注入它，然后设置此共享状态的事件回调。下面的示例应该可以帮助您入门。

// Register to your DI container.
// FilterMenuState.cs
public class FilterMenuState
{
    public EventCallback<string> OnClick_ApplyFilters { get; set; }
}

// MainLayout.razor
@inject FilterMenuState FilterMenuState

<FilterMenu OnClick_ApplyFilters="FilterMenuState.OnClick_ApplyFilters" />

// Index.razor
@inject FilterMenuState FilterMenuState;

// Body...

@code 
{
    private void OnInitialized()
    {
        FilterMenuState.OnClick_ApplyFilters += DoThings;
    }
    
    private string DoThings() { }
    
    // Dispose...
}

无需更改FilterMenu.razor。不要忘记将 null 设置FilterMenuState.cs为清理。

于 2021-10-21T02:48:48.167 回答