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

11,574

Solution 1

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" asp-route-id="@item.Id">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.Id">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" asp-route-Id="@item.Id" 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>
    }

Solution 2

I think it's better to put a button into a form to perform an action DELETE for the reason security

With this approach, you can try :

<form asp-page-handler="Delete" method="OnGetDelete" asp-route-id="@item.Id" 
       onclick="return confirm('Are you sure you want to delete this?')">
  <button type="submit" class="btn btn-default"><i class="fas fa-trash-alt text-white"></i></button>
</form>

Solution 3

Dear @Fullen I saw your question and got your problem you want to call your OnGetDelete action using link with confirmation message before delete action call. It may be my code help you.

<a href="~/YourControllerName/[email protected]" id="deleteBtn" class="btn bg-danger mr-1" onclick="return confirm('Are you sure you want to delete?');"><i class="fas fa-trash-alt text-white"></i>Delete</a>
Share:
11,574

Related videos on Youtube

MM1010
Author by

MM1010

Updated on June 04, 2022

Comments

  • MM1010
    MM1010 almost 2 years

    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" asp-route-id="@item.Id" 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?

  • Mahdi Abbasi
    Mahdi Abbasi almost 3 years
    you can use this tag for call your delete handler