0

I need to add a delete confirmation box when a user clicks the delete button. How woudl i do this? On the html page or in my Controller call before the delete code is run? Or can bootstrap do it? I'm lost.

Here is my button element and my controller action.

 <div class="row">
    <div class="col-md-6">
        <input type="submit" value="Save" class="btn btn-lg btn-primary" />
    </div>
    @if (!Model.IsNew)
    {
    <div class="col-md-6">
        <a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" class="btn btn-primary col-md-offset-9 col-md-3 ">Delete</a>
    </div>
    }
</div>

Controller

public ActionResult Delete(int id)
{
    var record = DataAccessService.Get<Unit>(id);

    DataAccessService.Delete(record);
    DataAccessService.Save();
    return RedirectToAction<UnitsController>(u => u.Index());
}
Felipe Oriani
  • 37,948
  • 19
  • 131
  • 194
CsharpBeginner
  • 1,753
  • 8
  • 38
  • 68

2 Answers2

2

You can use confirm of Javascript which will return a bool value after a message shows on the browser or use css bootstrap since you have it on your application.

Confirm Javascript

Just add a confirm on the onclick event on the a tag. For sample:

<a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" 
   class="btn btn-primary col-md-offset-9 col-md-3" 
   onclick="return confirm('Are you sure you want to delete this item?')">Delete</a>

CSS Bootstrap

Since you are using css bootstrap, you could try it without poblems. For sample.

Define the css tag for the modal window

<div id="deleteConfirm" class="modal">
    <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">Delete Entity</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this item?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="deleteButton" type="button" class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

Define the event click for the deleteButton to make a ajax request and delete it.

 $("#deleteButton").on("click", function(e) {
    $.ajax({
        url: "@Url.Action("Delete", "Controller")",
        method: "POST",
        data: { id: @Model.Id }
    })
    .done(function(data) {
        // hide the modal
        $("#deleteConfirm").modal("hide");
        if (data.success) {
            // ok
        } else {
            // show errors
        }
    });
});

And finally, show the modal on a button that should confirm the delete. For sample:

<a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" 
   class="btn btn-primary col-md-offset-9 col-md-3" 
   id="deleteConfirmButton">Delete</a>

and set the event.

$("#deleteConfirmButton").on("click", function() {
   $("#deleteConfirm").modal("show"); 
});
Felipe Oriani
  • 37,948
  • 19
  • 131
  • 194
  • You should be using `done` instead of the deprecated `success` callback. – James Buck May 23 '16 at 19:15
  • @JamesBuck, The `success: function() {...` has NOT been deprecated (its the `jqXHR.success()` which has been) –  May 23 '16 at 22:14
  • @StephenMuecke in any case, it's better to stick with `done` for the flexibility of the deferred object. – James Buck May 23 '16 at 22:58
1

You can add OnClick into your button:

 <div class="row">
    <div class="col-md-6">
        <input type="submit" value="Save" class="btn btn-lg btn-primary" OnClick="return confirm('¿Are you sure you want to delete this item?');" />
    </div>
    @if (!Model.IsNew)
    {
    <div class="col-md-6">
        <a href="@(Url.Action<UnitsController>(c => c.Delete(Model.Entity.Id)))" class="btn btn-primary col-md-offset-9 col-md-3 ">Delete</a>
    </div>
    }
</div>
Ween Montes
  • 11
  • 4