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

我正在开发ASP.NETMVC3应用程序，我有一个带有Ok按钮的jquery对话框。单击OK，我想使用jQueryAjax提交一个表单

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

}))

其中，as表单如下所示：

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

控制器操作如下所示：

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

---

请向我建议解决方案。

哦，很抱歉我的评论，您的问题是您正在将表单的提交操作绑定到您应该已经提交的位置。如果要绑定表单的submit，请在

$（“#免费试用”）.dialog（{

）之外声明它。然后可以在单独的函数中使用ajax post方法，以便可以在绑定代码和

$（“#免费试用”）.dialog（{

中调用它

因此，为了清楚起见，请删除以下代码行：

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

---

哦，很抱歉我的评论，您的问题是您正在将表单的提交操作绑定到您应该已经提交的位置。如果您想绑定表单的提交，请在

$（“#免费试用”）之外声明。对话框({

。然后可以在单独的函数中使用ajax post方法，以便在绑定代码和

$（“#免费试用”）对话框中调用它

因此，为了清楚起见，请删除以下代码行：

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

看起来一切正常。您检查过提交事件是否命中了吗？是否发出警报或控制台。登录
$（''frmcreatetriaaccount'）。live（'submit'，
）。是的，我尝试过，但它没有显示警报。是否检查过提交事件是否命中了？是否发出警报或控制台。登录
$（'frmcreatetriaaccount'）。live（'submit'，
。是的，我尝试了，但它没有显示alertHi von:感谢您的回复。如果我删除了它，然后单击Ok按钮就会打开一个弹出窗口，其中包含页面的所有html。只是为了澄清，Ok按钮不在表单内部。它是jquery ui对话框Ok按钮，表单位于jquery ui对话框yes我知道
Ok
按钮是。我不明白的是为什么会出现“所有html页面”。如果
if（notvalid（）），就会出现ajax帖子
不是真的。当帖子发生时，你只是在提醒结果，至少现在是这样。除非你写出了帖子的结果，而你没有在代码中显示出来。顺便说一句，你试过了吗？嗨，冯：我没有写任何东西。控制器操作只是返回我发布的json，成功方法会提醒itOka那么，我的建议有什么问题？您已经尝试过了吗？如果您尝试过，它会有什么问题？在ajax调用中，我使用url:$（this.attr（'action'），data:$（this.serialize（）），$（this）是什么意思意思是，我想它应该是表单id？Hi von:谢谢你的回复。如果我删除了它，然后点击Ok按钮就会弹出一个包含页面所有html的弹出窗口。只是为了澄清一下，Ok按钮不在表单内部。它是jquery ui对话框Ok按钮，表单位于jquery ui对话框是的，我知道
Ok
按钮在哪里。Wh首先，我不明白为什么会出现“所有html页面”。如果
if（notvalid（）），就会出现ajax帖子
不是真的。当帖子发生时，你只是在提醒结果，至少现在是这样。除非你写出了帖子的结果，而你没有在代码中显示出来。顺便说一句，你试过了吗？嗨，冯：我没有写任何东西。控制器操作只是返回我发布的json，成功方法会提醒itOkay那么我的建议有什么问题吗？您已经尝试过了吗？如果您尝试过，它会有什么问题？在ajax调用中，我使用url:$（this.attr（'action'），data:$（this.serialize（）），$（this）是什么意思，我认为它应该是表单id？