提交使用jquery ajax的asp.net MVC 3表单

Question

我正在ASP.NET MVC 3应用程序和我有一个jQuery对话框与确定按钮。点击确定我想使用jQuery AJAX提交表单。

我的AJAX调用看起来是这样的：

$("#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"); 
} 

，但形式并不在此法提交。

我已经包含在页面布局这些文件：

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

请建议我解决这个。

Answer 1

哦，对于我提出的评论感到抱歉，你的问题是，你已经绑定了表单的提交行为，你应该已经提交它。如果你想绑定表单的提交，然后在$("#free-trial").dialog({之外声明它。然后，您可以在单独的函数中使用ajax post方法，以便您可以在绑定代码和$("#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); 
    } 
}); 

所以只是为了清楚删除下面的代码行：

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