Call custom confirm dialog in Ajax.Beginform in MVC3

Question

I want to be able to use a custom jquery dialog or at least be able to change the text of the buttons from OK/Cancel to something else when using the AjaxOptions.Confirm Property in the Ajax.Beginform function. Like this:

<div>
    @using (Ajax.BeginForm("Function", "Controller", new { id = theId }, new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "theForm",
            InsertionMode = InsertionMode.Replace,
            LoadingElementId = "iconGif",
            OnBegin = "OnBegin",
            OnFailure = "OnFailure",
            OnSuccess = "OnSuccess",
            Confirm = "Are you sure?" //TODO: Confirm with different dialog?
        }, new { id = "feedback-form" }))
    {
        //Some stuff
        <button onclick="derp()">Submit</button>
    }
</div>

Is there a way to achieve this with Ajax.Beginform through the AjaxOptions.Confirm Property?

Solution 1

No, you cannot achieve this with the Confirm property of AjaxOptions. This simply uses the window.confirm javascript method which doesn't allow any UI customizations and is browser dependent. You will have to implement this functionality yourself. For example you might want to checkout the jQuery UI dialog plugin.

Solution 2

I came across this to customize AjaxOptions Confirm text with a value that has not been created yet when Ajax.Beginform is rendered.
For example:
Confirm="Are you sure you want to create Customer Id" + someValue + "?"

Finally a found a solution: The approach is regarding a change in submit button behavior with JQuery to pull the value, run my own Confirm dialog and submit the Ajax form if user confirm.

The steps:
1- Remove Confirm from AjaxOptions and avoid set button's type="submit", could be type="button"

<div>
    @using (Ajax.BeginForm("Function", "Controller", new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "theForm",
            InsertionMode = InsertionMode.Replace,
            LoadingElementId = "iconGif",
            OnBegin = "OnBegin",
            OnFailure = "OnFailure",
            OnSuccess = "OnSuccess"
            // Confirm option has been removed 
        }, new { id = "feedback-form" }))
    {
        //Some stuff
        <button id="buttonId" type="button" onclick="derp()">Submit</button> //Setting id and type
    }
</div>

2- Add following to a js file that it has been refer to in the page or layout.

$("#buttonId").click(function () { 
if(confirm("Are you sure you want to create Id "+$("#CustomerId").val() + " ?"))
{
$("#feedback-form").submit(); // Submitting the form if user clicks OK
    }
    });

'CustomerId' is the id of some hidden input in the page.
I hope this helps.

Solution 3

I was looking for the solution and came here. Although Darin categorically denies the possibility of solution, His answer actually put me on a solution.

If you can live with supplying the jquery.unobtrusive-ajax.js file in your bundle, then you can go on with the solution

Note: This sample utilizes Bootstrap Dialog

Replace the function asyncRequest(element, options) in jquery.unobtrusive-ajax.js with this one

   function asyncRequest(element, options) {            
        var confirm = element.getAttribute("data-ajax-confirm");
        if (confirm) {
            BootstrapDialog.confirm({
                title: 'Please Confirm!',
                type: BootstrapDialog.TYPE_WARNING,
                message: confirm,
                draggable: true,
                callback: function (result) {
                    if (result) {
                        NewMethod(element, options);
                    }                    
                }
            });
        }
        else {
            NewMethod(element, options);
        }        
    }

    function NewMethod(element, options)
    {
        var loading, method, duration;
        loading = $(element.getAttribute("data-ajax-loading"));
        duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0;

        $.extend(options, {
            type: element.getAttribute("data-ajax-method") || undefined,
            url: element.getAttribute("data-ajax-url") || undefined,
            cache: !!element.getAttribute("data-ajax-cache"),
            beforeSend: function (xhr) {
                var result;
                asyncOnBeforeSend(xhr, method);
                result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
                if (result !== false) {
                    loading.show(duration);
                }
                return result;
            },
            complete: function () {
                loading.hide(duration);
                getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
            },
            success: function (data, status, xhr) {
                asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
                getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
            },
            error: function () {
                getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]).apply(element, arguments);
            }
        });

        options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" });

        method = options.type.toUpperCase();
        if (!isMethodProxySafe(method)) {
            options.type = "POST";
            options.data.push({ name: "X-HTTP-Method-Override", value: method });
        }

        $.ajax(options);
    }

Comments

[gardarvalur]

Thanks @DarinDimitrov I will propably use the Jquery UI Diloag. It was worth asking anyway :)

[gardarvalur]

hmm... this is an interesting solution. I must apply it for testing.

[Anup Sharma]

Also Please note that this was done in a project on MVC 5.