Json结果在浏览器中提示"另存为"对话框而不是被处理.ASP.NET MVC

Question

我知道这对其他人来说是一个问题,但我还没有找到解决我问题的方法.

我有一个部分视图显示在灯箱(彩盒)中.这是一个简单的形式.我希望表单提交并返回一些数据.数据将用于调用后续函数,我希望主DIV只是用"成功"消息更新.以下是局部视图的完整代码:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Solution2.Models.Category>" %>

<script type="text/javascript">
    $('propcatform').submit(function(e) {
        e.preventDefault();

        $.ajax({
            type: "POST",
            url:  $(this).attr("action"),
            data: $(this).serialize(),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function(data) { document.getElementById('main1').innerHTML = "Success"; },
            failure: function() { document.getElementById('main1').innerHTML = "Failure"; }
        })
    });
    </script>

    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "propcatform", name = "propcatform" }))
       {%>
        <div id="main1">
        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="CatTitle">Category Title:</label>
                <%= Html.TextBox("CatTitle") %>
                <%= Html.ValidationMessage("CatTitle", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
        </div>

    <% } %>

这是我的控制器代码.代码工作,因为它成功地将表单数据添加到表/数据库.我的"返回"行究竟应该是什么样的？

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Create(Category propcat)
        {

            Category resultcat = new Category();
            _db.Categories.InsertOnSubmit(propcat);
            _db.SubmitChanges();
            resultcat = propcat;
            return Json(new { CatID = resultcat.CatID, CatTitle = resultcat.CatTitle, message = "Category successfully created!" });
        }

目前我实际上并没有在我的部分视图代码中使用任何结果数据(即使我在"success"参数中引用它).我只是想让它工作(而不是提示我保存结果).

谢谢.

Answer 1

通常,您不会通过正常的表单提交直接将Json返回到用户的浏览器.这是传递您计划在内部消化的信息的一种很好的方式(正如您所描述的那样),但是执行上面显示的内容会将Json数据吐回到看起来像的用户.... Javscript - 它不是有效的HTML并取决于如何配置浏览器,它可能会弹出一个"另存为"对话框.

在您的示例中,您可以尝试让默认操作返回Create视图并进行如下检查:

if (Request.IsAjaxRequest())
{
  return Json(.......);
}
else
{
  return View(....);
}

...并将您的函数返回类型更改为ActionResult.

这将确保页面的初始加载显示实际的视图.Ajax对同一页面的调用(来自页面上的按钮)将只返回您感兴趣的Json数据.

更新:

如果操作应显示除更新的Json内容之外的相同页面,我建议不要使用"提交"按钮.只需使用普通输入按钮并将点击操作绑定到您的jQuery.ajax通话即可.数据将从操作中接收Create/POST,并将success:根据Ajax调用中的子句进行填充.