submitting an asp.net MVC 3 form using jquery ajax

问题:

I am working on ASP.NET MVC 3 application and I have a jquery dialogue with Ok button. On click of OK I want to submit a form using jquery AJAX.

My ajax call looks like this:

$("#free-trial").dialog({
   autoOpen: false,
   autoResize: true,
   buttons: {
       "OK": function () {
           if (notvalid()) {
               $(".ui-dialog-titlebar").hide();
               $("#dialog-freetrial-insufficientdata").dialog({ dialogClass: 'transparent' });
               $("#dialog-freetrial-insufficientdata").dialog("open");
           }
           else {
               $('#frmCreateTrialAccount').live('submit', function (e) {
                   e.preventDefault();
                   $.ajax({
                       cache: false,
                       async: true,
                       type: "POST",
                       url: $(this).attr('action'),
                       data: $(this).serialize(),
                       success: function (data) {
                           alert(data);
                       }
                   });
               });
               jQuery(this).dialog('close');
           }
       }
   },
   open: function () {
       $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
       $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
   }

});

where as form looks like this:

@using (Html.BeginForm("CreateTrialAccount", "Home", FormMethod.Post, 
              new { Id = "frmCreateTrialAccount" } ))
{

}

and controller action looks like this:

[HttpPost]
public JsonResult CreateTrialAccount(FormCollection form) {
    return Json("dummy data");
}

but form is not submitted on this method.

I have these files included in layout page:

<link href="@Url.Content("~/Content/css/smoothness/jquery-ui-1.10.0.custom.css")" rel="stylesheet" type="text/css"  media="screen"/>
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Please suggest me solution to this.

回答1:

Oh sorry for that comment I made, your issue is that you are binding the form's submit action where you should have been submitting it already. If you want to bind the form's submit then declare it outside $("#free-trial").dialog({. Then you can have the ajax post method in a separate function so you can call it in both the binding code and in the $("#free-trial").dialog({.

var form = $('#frmCreateTrialAccount');
$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
        alert(data);
    }
});

So just to make it clear remove the following lines of code:

$('#frmCreateTrialAccount').live('submit', function (e) {
e.preventDefault();
// and the ending 
});