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);
}

Answer 4

尝试指定HTTP方法：

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

示例：

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

Answer 5

我的项目遇到了同样的问题。没有加载Ajax库是问题所在。当我检查了我的bundleconfig和我的布局文件时，它确实包含了包含但我包括ajax库的绝对名称，如

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
"~/Scripts/jquery.unobtrusive-ajax.min.js"));

我的朋友让我改用外卡。出奇 bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include("~/Scripts/jquery.unobtrusive-ajax*"));开始包含ajax库。

现在我的OnSuccess函数按预期加载，而不是查看带有json响应的空白屏幕。

Answer 6

而不是：

var getresult = function (data) {
    alert(data.result);
};

尝试

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

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

6 个答案: