使用jquery ajax提交asp.net MVC 3表单 [英] submitting an asp.net MVC 3 form using jquery ajax

问题描述

我正在使用ASP.NET MVC 3应用程序，并且使用确定"按钮进行了jquery对话.单击确定后，我想使用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.

我的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');
   }

});

形式如下:

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

}

和控制器动作如下:

[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>

请为我建议解决方案.

推荐答案

抱歉，我的评论是，您的问题是您将表单的Submit操作绑定到了本应提交的位置.如果要绑定表单的提交，请在$("#free-trial").dialog({外部声明它.然后，您可以在单独的函数中使用ajax post方法，以便可以在绑定代码和$("#free-trial").dialog({中调用它.

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

这篇关于使用jquery ajax提交asp.net MVC 3表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！