HyperCube/Pages/ModalFiles.razor

<div class="modal" tabindex="-1" role="dialog" style="display:none" id="@elementid">
    <div class="modal-container">
        <div class="modal__body">
            <div class="modal__body__header">
                <div class="modal__body__header__info">
                    <img src="img/files.svg" alt="">
                    <p>Ваши файлы</p>
                </div>
            </div>
            <div class="modal__body__container modal__body__container_aligncenter">
                <div class="modal__body__container__left modal__body__container__left_blackborder">
                    <p class="modal__files__type">NFT</p>
                    <p class="modal__files__type">APK</p>
                    <p class="modal__files__type">PDF</p>
                    <p class="modal__files__type">DOC</p>
                    <p class="modal__files__type">EPS</p>
                </div>
                <div class="modal__body__container__right modal__body__container__right_blackborder">
                    @foreach (var article in AppData.Articles)
                    {
                    <p class="modal__files__name">
                        #@article.Value.ID - <a>@article.Value.Name</a> @article.Value.ID@(article.Value.PublishDate.ToString("dd.MM.yy"))
                    </p>
                    }
                </div>
            </div>
        </div>
        <a class="modal_close" style="cursor:pointer" @onclick="@Close">&#10006;</a>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JsRuntime { get; set; }

    [Parameter]
    public RenderFragment Title { get; set; }

    string elementid = "modal_files";


    public void Open()
    {
        JsRuntime.InvokeVoidAsync("OpenModal", elementid);
    }

    public void Close()
    {
        JsRuntime.InvokeVoidAsync("CloseModal", elementid);
    }
}