MVC Deleting record using Javascript pop up

Question

I have done create,edit functionality & trying to do delete functionality but by default my page redirects to the Delete.aspx for delete confirmation. I want the following steps to occur when i try to delete my record. Currently i am on index.aspx and want to stay on same page & delete the record from database.

Image 1

Image 2

Image 3

I don't want this deletion from URL. for ex. http://localhost:53402/Project/Delete/11, it will be very easy for anyone to delete any record giving id.

Answer 1

You have to do it over some sort of id, there isn't any other way.

If you don't want users manipulating the URL, you need some sort of login/permission system.

Answer 2

Try this with jquery:

<script type="text/javascript">

    $(function () {
        $(".delete").live("click", function (e) {
            e.preventDefault();
            if (confirm("Are you sure you wish to delete this article?")) {
                $.post(this.href);
            }
        });
    });
</script>

<a href="/Project/Delete/11" class="delete">Delete</a>

Answer 3

If you are trying to achieve a true MVC, as your question implies, the event transaction would submit to a controller, like index.aspx - that controller would have an event that specifies the current view page that you are sitting in, like

event="displayGui" would include the view file "frmCreate.aspx" or "frmEdit.aspx"

when the view file(s) "frmCreate.aspx" or "frmEdit.aspx" submits, it calls another event in the controller like

event="submitAndConfirm"

Event submitAndConfirm would include instructions for handling the delete action, by including a file called actDelete.aspx. When the work was complete by the actDelete.aspx, the controller would call back event="displayGui".

This is a conceptual example and would need aspx specific implementation.

Answer 4

I don't want this deletion from URL. for ex. http://localhost:53402/Project/Delete/11, it will be very easy for anyone to delete any record giving id.

If you don't want users to guess the id, use Guid instead of int

http://localhost:53402/Project/Delete/30D4AAF1-3CF1-4514-A025-2DDE1C770CD5

Answer 5

in order to perform a delete using javascript and a pop-up, you need to: 1)Create an action in the controller like the following:

[HttpPost]
public void DeleteItem(int id)

By decorating the action method with the [HttpPost] annotation, you avoid the undesired behaviour of a user typing the URL /Home/Delete/1 because only a POST will invoke the action.

2)If you delete-item is part of a list of items, you need to bind to your items in the View a sort of id, using the custom HTML5 attributes, like the following:

@for (int i = 0; i < Model.Items.Count; i++)
{                            
     <a href="#" class="delete-button" data-id="@Model.Items[i].Id">Delete</a>        
}

3)Using jQuery, as an example, bind to your delete button(s) in the page a pop-up on click

$().ready(function () {
    $(".delete-button").click(null, DeleteItem);  //DeleteItem is the callback      
    return false;
});

We need to specify a callback that will handle the delete button click

4)Using for example jQuery UI dialog component:

Create HTML for your pop-up text

<div id="dialog-confirm" style="display:none;" title="Confirm">
<p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Are you sure you want to proceed?
</p>
</div> 

Handle the delete button click and bind the dialog to the html text so that the popup will tell the user what you want

function confirmDeleteVersion() {        
    var recordToDelete = $(this).attr("data-id"); // now we need the data-id to retrieve the identifier for the item to delete              
    $("#dialog-confirm").dialog({
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Delete": function () {         
                $(this).dialog("close");        
                $.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }             
    });     
};

So, we get the id of the button

var recordToDelete = $(this).attr("data-id");

where "this" is the HTML element which caused the event to fire using

The below row is actually where we ask the Controller to execute the delete action, and we use the id of the record

$.post("/Home/Delete", { id : recordToDelete}, DeleteSuccessfull);

5) Because the jQuery post is asynchrounous, we need a callback to handle the result

function DeleteSuccessfull()
{
    //Do what you want...
};

That's it... keep in mind that it's just an example and I'm using jQuery dialog component, while you could use something different.