Jquery – Call custom confirm dialog in Ajax.Beginform in MVC3

ajaxasp.net-mvcasp.net-mvc-3jqueryrazor

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?

Best Solution

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.