How to call ajax call to form submit from ASP.NET MVC/ jQuery Dialog?

Question

When user clicks on a hyperlink , I want to run a background process. Before I run that I want to ask user's permission using jQuery dialogbox (form). When user clicks "ok" on the form , I want to run the action using jQuery ajax. If process fails then I want to update that popup with "Error". How do I do this in asp.net MVC using jQuery AJAX. Below is the code I tried

Here is my MVC Ajax begin form code

@using (Ajax.BeginForm("Action1", "Controller1", new AjaxOptions { UpdateTargetId = "eProcess" }, new { id = "eProcess" }))
{
    @Html.Hidden("eID", eId);                                                                                  
    @Html.Hidden("processName", "processName");                                                                                                                                                
    <div class="hide" id="dialog" title="Confirmation Required">
        Are you sure you want to update this record? <br />                       
        <input type="button" value="Hit" id="btnHit" />                    
    </div>    
}

and below is my dialog code

$("#dialog").dialog
({
    dialogClass: "ee-detail-info",
    closeOnEscape: false,
    height: 200,
    width: 300,
    modal: true,
    autoOpen: false,
    open: function (event, ui) {

        $("#btnHit").click(function () {

            $('#processName')[0].value = processName;
            document.forms.eProcess.submit();  

        });
        }

});

I even tried using the .ajax method but still its doing full post back. I double checked my jQuery files. They are linked correctly on the page.

$("#eProcess")[0].submit(function () {
    $.ajax({
        url: $("#eProcess")[0].action,
        success: function (res) {
            alert("Success");
        }
    });
});

Update

I got it working with your solution. I had bug in my code.

Answer 1

I double checked my jQuery files. They are linked correctly on the page.

Make sure that you have included the jquery.unobtrusive-ajax.js script after jquery.

If this is the case you don't need to be manually be subscribing to any .click events. Simply leave the Ajax.BeginForm to send the AJAX request.

And if you don't want to rely on the Ajax.BeginForm then simply write a normal form:

@using (Html.BeginForm("Action1", "Controller1", FormMethod.Post, new { id = "eProcess" }))
{
    @Html.Hidden("eID", eId);                                                                                  
    @Html.Hidden("processName", "processName");                                                                                                                                                
    <div class="hide" id="dialog" title="Confirmation Required">
        Are you sure you want to update this record? <br />                       
        <input type="button" value="Hit" id="btnHit" />                    
    </div>    
}

and then:

$(function() {
    $("#dialog").dialog({
        dialogClass: "ee-detail-info",
        closeOnEscape: false,
        height: 200,
        width: 300,
        modal: true,
        autoOpen: false
    });

    $('#dialog').on('submit', '#eProcess', function() {
        // here you could set the value of the the hidden field
        // if you wanted to pass some additional information
        // to the controller

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                $('#eProcess').html(result);
            }
        });
        return false;
    }); 
});