asp.net mvc json打开对话框问题答案

【问题标题】：asp.net mvc json open dialog box problemasp.net mvc json打开对话框问题
【发布时间】：2010-06-02 10:42:43
【问题描述】：

 function postForm()

{

 $.ajax({ 

     type: "POST",  

     data: $("#myForm").serialize(),  

     dataType: "json",

     url: '<%= Url.Action("JSONRequest","Home") %>',


     success: function(result)  
     {  
         window.alert(result.name);  
     },                  
     error : function()  
     {  
         window.alert('error');  
     }  
 });

}

 Html.BeginForm("JSONRequest", "Home", FormMethod.Post, new { id = "myForm" });
 Html.TextBox("mazhar")  
 <input type="submit" onclick="postForm" />  
 Html.EndForm();



 public ActionResult JSONRequest(FormCollection form)
    {

        string a = form["mazhar"];
        var data = new { name = "aaaa", Success = "Record is Succesfully Saved", ErrorMessages = "abc" };
        return Json(data);  
    }

好的，问题是运行此代码后对话框正在打开，要求保存文件。有人可以告诉我如何解决这个问题吗？为什么会出现这个盒子？

【问题讨论】：

标签： asp.net javascript ajax json

【解决方案1】：

您需要通过在按钮onclick处理程序内返回false来取消默认表单提交：

<input type="submit" onclick="postForm(); return false;" />

话虽如此，我会建议你一个更好的解决方案。使用jquery.form 插件，它使您能够对 HTML 表单进行 ajaxify。这样可以简化代码中的大部分重复：

Html.BeginForm("JSONRequest", "Home", FormMethod.Post, new { id = "myForm" });
    Html.TextBox("mazhar")  
    <input type="submit" value="OK" />  
Html.EndForm();

在 javascript 中：

$(function() { 
    $('#myForm').ajaxForm({
        success: function(result) {  
            window.alert(result.name);  
        },                  
        error : function() {  
            window.alert('error');  
        }  
    }); 
});

这样您不再需要指定 url、方法、手动序列化表单字段等...您也不需要使用 javascript 函数污染您的 HTML 标记。这是不显眼的javascript。这种方法的另一个优点是，现在您可以将此 javascript 外部化到一个单独的静态 .js 文件中，因为它不再依赖于服务器端代码 (<%= Url.Action("JSONRequest","Home") %>)，您将受益于减少带宽和缓存静态资源.

【讨论】：

【解决方案2】：

我认为您将表单发布了两次。您应该使用 Ajax.BeginForm 而不是普通表单。并删除 jQuery Ajax 调用。

这是一个使用 Ajax 表单的非常好的示例。

http://davidhayden.com/blog/dave/archive/2009/05/19/ASPNETMVCAjaxBeginForm.aspx

或者你也可以尝试替换

<input type="submit" onclick="postForm" />

与

<input type="button" onclick="postForm" />

【讨论】：