从 JavaScript 向不同文件夹中的 C# 控制器进行 ajax 调用
Posted
技术标签:
【中文标题】从 JavaScript 向不同文件夹中的 C# 控制器进行 ajax 调用【英文标题】：Make an ajax call from JavaScript to C# controller in a different folder 【发布时间】：2021-08-10 23:17:20 【问题描述】：问题底部的更新说明
我在进行从 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# 控制器吗？
谢谢！
【问题讨论】：
控制器的 url 由路由定义，而不是由名称定义。默认路由使用名称，因此可能看起来像名称一样，但您可以在不更改名称的情况下更改路由。 【参考方案1】：您的 AJAX URL 与您的 HTML 文件相关，该文件本身位于您的本地磁盘上。因此，它不会转到您的控制器，它可能在 localhost 上运行，而是根据错误消息转到 file:///Demo/RunDemo。
AJAX 请求最好通过浏览器开发工具的“网络”选项卡进行调试。
tl;dr -- 通过您的 ASP.NET 应用程序托管的 URL 调用您的页面。应该是http://localhost/View/index.html。
【讨论】：
哦，这可能是问题所在。我正在打开 html 文件，通过“使用谷歌浏览器打开”，我没有“运行任何东西”我需要做一些不同的事情吗？ 好吧，您需要运行 ASP.NET MVC 应用程序才能响应您的 AJAX 请求。 哦，我认为这可能是问题所在！我以为我可以自己打开html文件。谢谢您的帮助！目前我无法再进行任何更改。但我会在大约 4 小时后报告。非常感谢您的帮助！【参考方案2】：您为 ajax 调用指定的 url 不正确。在 ASP.NET mvc 中，我们只指定了没有控制器后缀的控制器名称，并且 url 的格式也不正确。尝试以下网址：
url: '/Demo/RunDemo'
【讨论】：
您好，感谢您的回复！不幸的是，它并没有奏效，我用新的控制台错误更新了原始问题，并添加了我最初没有提到的其他内容。谢谢！【参考方案3】：修复你的 ajax 文件
$.ajax(
url: '/Demo/RunDemo',
type: 'POST',
success: function (retData)
console.log(retData);
alert(retData.Message);
,
error: function (retData)
console.log(retData);
);
【讨论】：
您好，感谢您的回复！它不太奏效，我用新的控制台错误更新了原始问题，并添加了我最初没有提到的其他内容。再次感谢！【参考方案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
【讨论】：
以上是关于从 JavaScript 向不同文件夹中的 C# 控制器进行 ajax 调用的主要内容，如果未能解决你的问题，请参考以下文章
如何使用javascript从数据库中向动态表中添加不同的列
如何从 javascript 中的 C# HttpResponseMessage 读取内容？
如何从 .cs 文件 (C#) 调用 JavaScript/jQuery 函数