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.

return false...or preventdefault?

Hackerman
– Hackerman

2013-07-20 03:04:40 +00:00
Commented Jul 20, 2013 at 3:04 — Hackerman
– Hackerman, Commented Jul 20, 2013 at 3:04
Yes I put return false, no change in result.

Zeus
– Zeus

2013-07-24 23:21:54 +00:00
Commented Jul 24, 2013 at 23:21 — Zeus
– Zeus, Commented Jul 24, 2013 at 23:21

Darin Dimitrov · Accepted Answer · 2013-07-20 09:43:19Z

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;
    }); 
});

Hi, Thanks for response. I tried using both approach. Still getting same result. My ajax call is triggering and also my page postback is triggering.

Collectives™ on Stack Overflow

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

Update

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related