如何从 Blazor 服务器中的页面处理（销毁）组件？

Question

I would like to know how to properly dispose (destroy) a modal window component after user closes it. The way it is now, it is removed from the DOM, but the instance stays in the server (the time value assigned to the form-control remains the same when the window is reopened) and the Dispose() in the component is not called.

@page "/"

<button class="btn btn-primary" @onclick="@(e => modalWindow.Show())">Open Dialog</button>

<ModalWindowToDispose @ref="modalWindow" ></ModalWindowToDispose>

@code {

    ModalWindowToDispose modalWindow;

    void OpenDialog()
    {
        modalWindow.Show();
    }
}

// ModalWindowToDispose Component ( Show here in the same page only for simplicity)
@implements IDisposable
    
@if (ShowPopup)
{
    <div class="modal" tabindex="-1" style="display:block;margin-top:100px" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <input class="form-control" type="text" value="@temp" placeholder="" />
                <button class="btn btn-primary" @onclick="@(e => ShowPopup = false)">Close</button>
            </div>
        </div>
    </div>
}
    
@code {
    bool ShowPopup = false;
    string temp = DateTime.Now.ToLongTimeString();
    
    public void Show()
    {
        ShowPopup = true;
        StateHasChanged();
    }
    
    void IDisposable.Dispose()
    {
        string tttt = "";
    }
}

Answer 1

In your code, the <ModalWindowToDispose /> instance is always part of the DOM. You add or remove only the part of <div class="modal"... ></div> , because of your if statement above.

To resolve this problem, you could use a container approach like the library Blazored.Modal it does, where they split the "modal problem" into two classes. The modal is the container and the ModelInstance the component that should be disposed when the modal is closed. If the modal instance is closed, it is removed from the container and hence disposed, because it is not part of the DOM anymore.