Question

我使用ajax post方法发布表单，如： -

$（function（）{

        $('#BtnName').submit(function () {
            $.ajax({
                url: 'Home/Index',
                type: "POST",
                data: $(this).serialize(),
                dataType: "json",
                async:false,
                contentType: 'application/json; charset=utf-8',
                success: function (data) { var message = data.Result; $("#Result").html(message); },


            });
            return false;
        });
    });

在动作控制器上我返回

返回Json（新{Result =“Success”}， JsonRequestBehavior.AllowGet）;

我无法在div中获得结果;而不是它将整个渲染页面作为完整文件返回。请告诉我该怎么做才能在页面上显示结果，并希望在不清除表格的同一页面上。

Answer 1

好的，你问题中包含的代码位绝对不足以得出任何结论。让我们做一个完整的例子。

型号：

public class MyViewModel
{
    public string Foo { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        // TODO : process the model ...

        return Json(new { Result = "Success" });
    }
}

查看：

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %>
    <%= Html.LabelFor(x => x.Foo) %>
    <%= Html.EditorFor(x => x.Foo) %>
    <input type="submit" value="Save" />
<% } %>

外部javascript以不引人注目的方式AJAX化表单：

$(function () {
    $('#myForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (data) {
                var message = data.Result; 
                $('#Result').html(message);
            }
        });
        return false;
    });
});

需要注意的事项：

我将.submit事件附加到表单（#myForm）的if，而在您的示例中，您正在使用#BtnName，该表单看起来是一个奇怪的可疑名称。遗憾的是，您没有显示您的标记，因此我们不知道它实际代表什么
我不再硬编码表单的网址（Home/Index），而是依赖Html.BeginForm生成的网址。这有两个好处：1。您现在可以将您的javascript放入单独的文件中=＆gt;你不再混合标记和脚本，你的HTML页面现在变得更小，更快加载（外部静态javascript文件被缓存）和2.当你在其他服务器上部署你的应用程序或者你决定改变你的路由它仍然会在你的js上没有任何修改的情况下工作。
我不再使用contentType: 'application/json'，因为当您使用$(this).serialize()时，这不会将表单序列化为JSON。它将其序列化为application/x-www-form-urlencoded样式。所以你基本上引入了一个矛盾：你告诉服务器你将发送一个JSON请求，但实际上你没有。
我删除了async: false属性，因为这会执行同步请求并在执行期间冻结浏览器。它不再是AJAX。所以除非你想要这个，否则不要使用它。
我删除了dataType: 'json'参数，因为jQuery足够聪明，可以从实际的响应Content-Type标头中推断出来，并自动解析返回的JSON并将其作为javascript对象传递给成功回调可以直接使用。

如何在Post中返回MVC2中的JSON结果

1 个答案: