web-dev-qa-db-ja.com

Blazor-削除/更新の前に確認ダイアログを表示しますか？

次のBlazor（サーバー側）コードの抜粋。確認ダイアログを表示する方法は？

<tbody>
    @foreach (var r in lists)
    {
        var s = r.ID;
        <tr>
            <td>@s</td>
            <td><button class="btn btn-primary" @onclick="() => DeleteSymbol(s)">Delete</button></td>
        </tr>
    }
</tbody>

@code {
    async Task DeleteSymbol(string id)
    {
        // Get confirmation response from user before running deletion?
        // Delete!
    }
}
c#razorblazor
5
ca9163d9

簡単なpopconfirmコンポーネントを作成しました。

 <div class="pop-container">
        @if (Show)
        {
            <div class="popconfirm">
                @Message
                <button type="button" class="btn btn-warning" @onclick="() => Confirmation(false)">No</button>
                <button type="button" class="btn btn-primary" @onclick="() => Confirmation(true)">Yes</button>
            </div>

        }
        <button type="button" class="@Class" @onclick="ShowPop">@Title</button>
    </div>
    @code {
        public bool Show { get; set; }
        [Parameter] public string Title { get; set; } = "Delete";
        [Parameter] public string Class { get; set; } = "btn btn-danger";
        [Parameter] public string Message { get; set; } = "Are you sure?";
        [Parameter] public EventCallback<bool> ConfirmedChanged { get; set; }

        public async Task Confirmation(bool value)
        {
            Show = false;
            await ConfirmedChanged.InvokeAsync(value);
        }

        public void ShowPop()
        {
            Show = true;
        }
    }

CSS

.pop-container{
    position: relative;
}

.popconfirm{
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: lightblue;
    width: 250px;
    position: absolute;
    top: -50px;
    padding: 10px;
    border-radius: 8px;
}

使用法

<Popconfirm ConfirmedChanged="Test" />
@code{

    public void Test(bool test)
    {
        Console.WriteLine(test);
    }
}
2
Egill Benediktsson