在 ASP.NET CORE 表单中使用 AJAX 返回 JSON

Question

我无法从控制器返回 JSON 以响应 AJAX 表单帖子。表单发布，但在响应之后，它只是将当前视图的标记替换为写入页面的 JSON 字符串："{"test":"test1","test2":"test2","test3":"test3" }"

我正在使用 .NET Core 3.1，并且在我的布局页面中安装并引用了 jQuery JavaScript Library v3.3.1 和 jquery.validate.unobtrusive v3.2.11。

我正在从 Asp.Net MVC 5 过渡到 Asp.Net Core MVC。过去我会像这样使用 Ajax.Beginform，我认为我可以在 Core MVC 中做类似的事情。我已经搜索了一些关于这个主题的不同教程，但我不确定我哪里出错了。我确实在 Startup.cs 中添加了“AddMvc()”引用，但结果却发生了同样的事情。

我想要完成的事情：我有一个弹出的模式窗口来上传文件。我正在寻找它正确上传以提醒用户的反馈。所以我想我会使用 Ajax 来响应 JSON。

表格：

<form asp-controller="Home" asp-action="Upload" data-ajax="true" data-ajax-begin="onBegin" 
                            data-ajax-complete="onComplete" data-ajax-failure="onFailure">

函数（测试的基本设置）：

function onFailure(result) {
    alert("onFailure ");
};

function onComplete(result) {
    alert("onComplete " + result.test + " " + result.test2 + " " + result.test3);
};

function onSuccess(result) {
    alert("onSuccess " + result.test + " " + result.test2 + " " + result.test3);
};

function onBegin(result) {
    alert("onBegin ");

};

控制器：

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Upload(UploadViewModel model)
{
    //File handling logic..

    return Json(new
    {
        test = "test1",
        test2 = "test2",
        test3 = "test3"
    });
}

Answer 1

首先，你需要添加jquery.unobtrusive-ajax.min.js或'jquery.unobtrusive-ajax.js'。如果你想发布文件，你需要添加enctype="multipart/form-data"。这是一个演示（它会触发onBegin和onComplete):

查看：

<form asp-controller="Home" asp-action="Upload" data-ajax="true" data-ajax-begin="onBegin"
      data-ajax-complete="onComplete" data-ajax-failure="onFailure" enctype="multipart/form-data">
    <input type="submit" value="submit"/>
 </form>

js:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
<script>
    function onFailure(result) {
        alert("onFailure ");
    };

    function onComplete(result) {
        alert("onComplete " + result.responseJSON.test + " " + result.responseJSON.test2 + " " + result.responseJSON.test3);
    };


    function onSuccess(result) {
        alert("onSuccess " + result.responseJSON.test + " " + result.responseJSON.test2 + " " + result.responseJSON.test3);
    };

    function onBegin(result) {
        alert("onBegin ");

    };
</script>

型号：

public class UploadViewModel
    {
        public IFormFile File { get; set; }
    }

结果：