How to two way bind a cascading value in Blazor?

Question

I'm playing around with the custom template in Blazor and I'm trying to find to a way to two-way bind a CascadingValue or achieve something similar. Right now I have the following template.

@if (PopupVisible)
{
    <DxPopup>
        <HeaderTemplate>
            <h4 class="modal-title">@HeaderText</h4>
            <button type="button" class="close" @onclick="@UpdatePopupVisible">&times;</button>
        </HeaderTemplate>
        <ChildContent>
            <div class="modal-body">
                <div class="container-fluid">
                  @bodyContent
                </div>
            </div>
            <div class="modal-footer">
                @footerContent
                <button class="btn btn-secondary" @onclick="UpdatePopupVisible">Cancel</button>
            </div>
        </ChildContent>
    </DxPopup>
}

@code {
    [CascadingParameter] public bool PopupVisible { get; set; }
    [CascadingParameter] public EventCallback<bool> PopupVisibleChanged { get; set; }

    [Parameter] public RenderFragment HeaderText { get; set; }
    [Parameter] public RenderFragment footerContent { get; set; }
    [Parameter] public RenderFragment bodyContent { get; set; }

    private async Task UpdatePopupVisible()
    {
        PopupVisible = false;
        await PopupVisibleChanged.InvokeAsync(PopupVisible);
    }
}

Then I have a component that implements this template(child), and then I have that component called with a button press(parent). What I want to know is if there is a way to bind the PopupVisible parameter from the parent without having to bind it the child and having the child pass it to the template. I haven't found a way to two-way bind a cascading parameter but if possible I think that would be the best way to do so. Outside of that, I'm not sure if there is another way or I'm going to have to go with my current idea of passing the value.

Answer 1

You can't do two-way binding with cascading parameters. Cascading means flowing downstream, from parent to child, and not the other way around.

I'm not sure I understand your question...however, if you wish to pass a value from a parent component and back; you can do the following: Note: This is a two-way Component data binding

Child Component

@code
{
    private bool visible;
    [Parameter]
    public bool PopupVisible
    {
        get { return visible }
        set
        {
            if (visible != value)
            {
                visible = value;

            }
        }
    } 

   [Parameter] public EventCallback<bool> PopupVisibleChanged { get; set; }
   // Invoke the EventCallback to update the parent component' private field visible with the new value.

   private Task UpdatePopupVisible()
    {
        PopupVisible = false;
        return PopupVisibleChanged.InvokeAsync(PopupVisible);
    }
}

Usage

@page "/"

<DxPopup @bind-PopupVisible="visible" />

@code {
    private bool visible;
}

Note: If you need some explanation, and believe that I did not answer your question, don't hesitate to tell me, but please take the time to phrase your questions... I could not completely understand questions.

Answer 2

what you can do is, Cascade the parent component and in the child component, access the parent Property you want to change like this:

Parent:

<CascadingValue Value="this">
    <Child />
</CascadingValue>

Child:

[CascadingParameter]
public Parent Parent { get; set; }

.....

private void ChangeParentProperty()
{
    Parent.Property = ....; 
}

Any doubt feel free to ask.