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

Posted 2023-03-31

【中文标题】在 ASP.NET CORE 表单中使用 AJAX 返回 JSON

【英文标题】：Return JSON using AJAX in ASP.NET CORE form

【发布时间】：2021-04-01 23:34:02

【问题描述】：

我无法从控制器返回 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"
    );

【参考方案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; 
    

结果：

【讨论】：

完美！谢谢你。我最初确实添加了 enctype，但我必须在故障排除期间将其删除。我不会回来工作几天尝试，但是缺少 jquery.unobtrusive-ajax.js 很可能是我的问题，因为我忽略了这一点！一旦我将您的答案标记为已接受或有其他问题，我会跟进。再次感谢！

效果很好！谢谢！我意识到我的错误是在我使用 Nuget 安装 Microsoft.jQuery.Unobtrusive.Ajax 时。它从未更新 wwwroot，我认为它确实更新了。没想到我拖入了对 jquery.validate.unobtrusive 的引用，这一切都从那里走下坡路。我最终使用 Add Client-Side Library 选项通过 cdnjs 安装。不管怎样，谢谢你让我走上正轨。