如何将JSON结果返回给Ajax.BeginForm

Question

我有这个简单的形式:

@using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , 
                  null, 
                  new AjaxOptions() {  HttpMethod = "post", OnSuccess = "getresult" },
                  null))
{
    @Html.EditorFor(m => m)
    <hr />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-info" value="Next" />
        </div>
    </div>
}  

而且,为了测试,一个简单的控制器:

    [HttpPost]
    public JsonResult CreateProductFromAjaxForm(CreateProductModel model)
    {
        if (!ModelState.IsValid)
        {
            return new JsonResult()
            {
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                Data = new { result = "error" }
            };
        }

       //add to database

        return new JsonResult()
        {
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            Data = new { result = "success"}
        };
    }  

我已将这些添加到Web.Config:

 <add key="ClientValidationEnabled" value="true" />
 <add key="UnobtrusiveJavaScriptEnabled" value="true" />

这些到我的脚本包:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js"
                    ));

单击"提交"按钮后,结果页面显示:

{"result":"success"}

我希望我可以在OnSuccess="getresult"处理程序中处理结果,但它似乎不起作用.

基本上我Ajax.BeginForm主要用于客户端验证.

你能告诉我什么是错的吗？

更新:我添加 HttpMethod = "post"了AjaxOptions.

更新:getresult以上定义Ajax.BeginForm如下:

<script type="text/javascript">
    var getresult = function (data) {
        alert(data.result);
    };
</script> 

Answer 1

你需要包含jquery.unobtrusive-ajax.js文件.

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Answer 2

JsonResult只是一种ActionResult派生类,它表示此操作将返回JSON而不是视图或其他内容.

例如:

 @using (Ajax.BeginForm("CreateProductFromAjaxForm","Product" , null, 
              new AjaxOptions() {  OnSuccess = "getresult" }, null))

这将生成一个元素,该元素将在提交给操作时发送AJAX请求.为此,您需要在页面中包含以下脚本:

现在剩下的就是写这个onSuccess javascript函数并处理服务器返回的JSON结果:

<script type="text/javascript">
var onSuccess = function(data) {
    alert(data.result);
};
</script

Answer 3

在页面中

new AjaxOptions() {  
    OnSuccess = "getresult", 
}

在javascript中

function getresult(data){
   alert(data.x);
}

在c#中

[HttpPost]
public ActionResult CreateProductFromAjaxForm(CreateProductModel model)
{
    if (!ModelState.IsValid)
    {
        return Json("error", JsonRequestBehavior.AllowGet);
    }

   //add to database

    return Json(model, JsonRequestBehavior.AllowGet);
}