mvc4.0 html.actionlink comfired,asp.net mvc - mvc ajax.actionlink with jquery dialog confirm - Stack...

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

row with

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:

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).