从 JavaScript 向不同文件夹中的 C# 控制器进行 ajax 调用

Question

问题底部的更新说明

我在进行从 JavaScript 到 C# 控制器的 AJAX 调用时遇到问题。我很确定我的问题是我对 javascript 文件的 AJAX 调用的连接 url。如果连接 url 不是问题，那么我认为这可能是我的 C# 控制器中的问题。我知道 jQuery 已正确加载，因为我能够在 RunDemo 函数中的 AJAX 调用之前控制日志信息。

以下是对我要完成的工作的解释：

我有一个带有一个按钮的简单 html 页面。单击按钮时，我需要对我的 c# 控制器进行 ajax 调用并检索一个字符串。在 AJAX 成功后，我会在 html 页面上提醒用户从 C# 控制器检索到的消息。这是我的“TheDemo”存储库的图片：

这是我的“索引”html 页面：

<!DOCTYPE html>
<html>
<head>
  <title>The Demo</title>
  <script type="text/javascript" src="../Scripts/jquery-3.6.min.js"></script>
  <script type="text/javascript" src="../Scripts/demo.js"></script>
</head>
<body>
    <div class="demo-container">
        <h1>Demo</h1>
        <button type="button" id="SubmitButton">Submit</button>
    </div>
</body>
</html>

这里是 "demo.js" javascript 文件：

//Function makes an ajax to the controller
function RunDemo(){
    $.ajax({
        url: '/Demo/RunDemo',
        type: 'POST',
        dataType: 'json',
        success: function (retData)
        {
            console.log(retData);
            alert(retData.Message);
        },
        error: function (retData)
        {
            console.log(retData);
        }
    });
}

//Event handles the "Submit" button
$(document).on("click", "#SubmitButton", function () {
    RunDemo()
});

这里是“DemoController.cs”C#文件：

using System;

class DemoController : Controller
{
    [HttpPost]
    public JsonResult RunDemo()
    {
        object obj = new { Message = "Return From Controller" };
        return Json(obj, JsonRequestBehavior.AllowGet);
    }   
}

这是我在 Google Chrome 控制台中的错误图片：

更新：

我已经修复了 ajax 连接 url。还是不行，我已经更新了谷歌浏览器控制台的镜像。

更新 2：

我注意到这可能是我打开文件的方式。目前，我正在使用 Google Chrome 检查器打开 html 页面。我不是在 Visual Studio 代码中“运行”一个进程。我需要在什么地方托管 C# 控制器吗？

谢谢！

Answer 1

您的 AJAX URL 与您的 HTML 文件相关，该文件本身位于您的本地磁盘上。因此，它不会转到您的控制器，它可能在 localhost 上运行，而是根据错误消息转到 file:///Demo/RunDemo。

AJAX 请求最好通过浏览器开发工具的“网络”选项卡进行调试。

tl;dr -- 通过您的 ASP.NET 应用程序托管的 URL 调用您的页面。应该是http://localhost/View/index.html。

Answer 2

您为 ajax 调用指定的 url 不正确。在 ASP.NET mvc 中，我们只指定了没有控制器后缀的控制器名称，并且 url 的格式也不正确。尝试以下网址：

url: '/Demo/RunDemo'

Answer 3

修复你的 ajax 文件

$.ajax({
        url: '/Demo/RunDemo',
        type: 'POST',
        success: function (retData)
        {
            console.log(retData);
            alert(retData.Message);
        },
        error: function (retData)
        {
            console.log(retData);
        }
    });

Answer 4

嗯，您的问题不在于 AJAX 调用，而在于后端的 CORS 权限，以确保跨源资源共享的系统安全。您会看到，即使它允许同一 URL 上的资源，但您的浏览器会阻止来自不同 URL 的所有资源。

    using System;
    using System.Web.Http.Cors;
    class DemoController : Controller
    {
      [EnableCors(origins: "http://yourlocalhost:", headers: "*", methods: "*")]
      [HttpPost]
      public JsonResult RunDemo()
    {
        object obj = new { Message = "Return From Controller" };
        return Json(obj, JsonRequestBehavior.AllowGet);
    }   
}

如果上面的代码没有帮助，请尝试查看此文档：

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api