mvc ajax.actionlink with jquery dialog confirm

Question

I have a table with some rows of data items. For each row it will be some actionlinks that will call some methods (delete dataitem, change status dataitem etc...)

Before each user clicks the button i want a jquery dialog to show up and give the user a dialog with some info, a OK and Cancel button.

Some example code of the ajax.actionlink that will call the ChangeStatus method:

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%>

This is the jquery function that is called:

 function StartChangeStatus(e) {
            $('#dialog-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Continue': function () {
                        $(this).dialog('close');
                        $('#Loading-Div').show('slow');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                        e.preventDefault();
                    }
                }
            });
        }

The actionlink and jquery functions work. But the problem is that i cannot pause/stop the current action when the actionlink is clicked. When the button is clicked now the hole process is running and the dialog confirm button is ignored. So my question is how to change the actionlink or the jquery function to work as wanted with a dialog confirmation before proceeding?

Answer 1

I have also tried your code, getting the same behavior. I have modified your code to display confirm box.

<%= Ajax.ActionLink("Link", 
                    "ChangeStatus", 
                    new { id = 3 }, 
                    new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
                                      HttpMethod = "Post", 
                                      Confirm = "confirmClick" }, 
                                      new { @class = "StatusBtn" }
                   )
%>

and it is displaying the javascript confirm. Need to find the reason why it is not working.

Answer 2

From my website:

Now, Ajax.ActionLink is really useful, and the Confirm AjaxOption is even more...still, who wants those crappy Javascript Alert these days? I am developing an application with Ms MVC 2 and I'm using the fantastic JQueryUI library to customize the visuals of all my elements. One of the best things JQueryUI has, are dialog windows...those like "Are you sure to delete this file? Yes/No"... and I WANT TO USE THEM IN MY Ajax.ActionLink!

Since i didn't find an answer on the net, I looked for a simple way to do it...and now I post it here.

First: read and implement on your page the nice tutorial written by Ricardo Covo: "ASP MVC Delete confirmation with Ajax & jQuery UI Dialog" (Just google it)

I made simple changes to his Javascript code, simply using remove() instead of hide('fast') and applying a class "item" to the tr to delete.

deleteLinkObj.closest("tr").hide('fast') 

becomes

deleteLinkObj.closest("tr.item").remove();

Now, after you followed the previous tutorial, you are ready to substitute the

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%>

row with

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" } ) %>

You can use the Post method if you like to, the important thing here is the OnBegin option, that calls a javascript that prevents the server action to be called before JQueryUI Dialog Confirmation:

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script>

Place the javascript on the page.

So, now what will happens: When you click on the Delete button, it will open the JQueryUI whilst calling the OnBegin function (that cancel the normal post action). In case of "Confirm", Ricardo Covo's code will fire the server side action, and in the Ricardo Covo's javascript code of Confirmation you'll be able to execute all the actions in case of Success (like hiding the row delete).

Pay Attention: With this method, you must manage function for success/fail in the javascript code of Ricardo Covo, since the OnSuccess and OnComplete AjaxOptions will not be fired at all (probably overwritten by some code).