Question

85

How do I display a confirmation message with trying to delete a record in ASP.NET Core using Razor Pages

rated 0 times [ 90] [ 5] / answers: 1 / hits: 16834 / 5 Years ago, wed, august 7, 2019, 12:00:00

I'm using Razor Pages and seem to be struggling to display a confirmation message when a user clicks the delete button.

On my Index.cshtml I have:

<a asp-page-handler=Delete [email protected] id=deleteBtn class=btn bg-danger mr-1><i class=fas fa-trash-alt text-white></i></a>

These are generated as part of a foreach loop.

My delete method:

public async Task<IActionResult> OnGetDelete(Guid id)

{

    if (id == null)

    {

        return NotFound();

    }



    var record = await _context.LoadTable.FindAsync(id);



    if (record != null)

    {

        _context.LoadTable.Remove(record);

        await _context.SaveChangesAsync();

    }



    return RedirectToPage(./Index);

}

I'm using Bootstrap so ideally would like to use it's modal to display the message. Displaying the message isn't the issue but rather I need to stop the method from firing until a user has confirmed that that's what they want to do, and with Razor Pages, I seem to be struggling.

My thoughts were to have the delete button in the modal and the delete button shows the modal instead but I'm unsure how to pass @item.Id with it.

Alternatively use JavaScript to intercept the button click?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

joep

Add To Favorites

Follow

Total Points: 32

Total Questions: 97

Total Answers: 104

Location: Wales

Member since Thu, Jul 1, 2021

3 Years ago

answered 5 Years ago zariahdiamondz · Accepted Answer

You could specify different value for data-target property and modal id for bootstrap modal, refer to my sample demo:

Index.cshtml

 @foreach (var item in Model.Cars)

    {

        var tm = #myModal + item.Id;

        var mid = myModal + item.Id;

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.Id)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Name)

            </td>



            <td>

                <a asp-page=./Edit [email protected]>Edit</a> |

                <a asp-page=./Details [email protected]>Details</a> |



                <button type=button class=btn btn-primary data-toggle=modal data-target=@tm>

                    Delete

                </button>



                <div class=modal fade id=@mid tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

                    <div class=modal-dialog>

                        <div class=modal-content>

                            <div class=modal-header>

                                <button type=button class=close data-dismiss=modal aria-hidden=true>&times;</button>

                                <h4 class=modal-title id=myModalLabel>Delete Confirmation</h4>

                            </div>

                            <div class=modal-body>

                                Are you sure want to delete this item?

                            </div>

                            <div class=modal-footer>

                                <a asp-page-handler=Delete [email protected] id=deleteBtn class=btn bg-danger mr-1>Delete</a>

                                <button type=button class=btn btn-default data-dismiss=modal>Close</button>

                            </div>

                        </div>

                    </div>

                </div>



            </td>

        </tr>

    }