AJAX 调用 MVC5 ActionResult

Question

我正在尝试找出以下代码有什么问题：

$(".ReportScore").click(function () {
    $.ajax({
        type: "GET",
        url: "/events/Tournaments/ReportScore",
        success: function() {
            location.reload();
        },
        error: function() {
            alert("The scores were not recorded");
        }
    });
});

当我在栏中键入 url 时，它可以正常工作，但是当我尝试进行 ajax 调用时，我得到 404 Page not found 错误。

澄清一下，当我点击按钮时，我会弹出一个提示“分数未记录”的弹出窗口，而在开发人员工具上，我会收到一个脚本错误提示页面未找到。

我在可视化工作室中也有一个方法本身的断点，但该点永远不会被命中，因为该方法永远不会被调用。

服务器端代码：

public async Task<ActionResult> ReportScore()
{
    var a = "abc"
}

var 永远不会命中一行。

编辑：

我有另一个来自同一个脚本的 ajax 调用，没有问题：

$("#InvitedMember").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "POST",
            url: "/events/Teams/Members",
            data: { id: $("#InvitedMember").val() },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.CustomUrl, value: item.CustomUrl
                    };
                }));
            }
        });
    },
    create: function () {
        $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
            return $('<li>')
                .append("<a><div>" + item.label + "</div></a>")
                .appendTo(ul);
        };
    },
    select: function (event, ui) {
        //you can access ui.item to get the selected item object.
        $("#InvitedMember").val(ui.item.value);
        return false;
    }
});

Answer 1

这样硬编码你的网址不是一个好主意。您应该始终使用 Url.Action 或 Url.RouteUrl html 辅助方法来构建您正在访问的操作方法/端点的相对 url。无论您当前的页面/路径如何，这些帮助方法都将负责正确构建 url。

另外，根据您的评论，似乎 events 是您的 IIS 中的虚拟目录/应用程序名称的名称。 您不应在代码中使用这些来构建网址，因为它可能会根据您的部署而改变。如果您想要一份部署到 "http://staging.yourSite.com" 的代码副本怎么办？

只要您使用Url.Action 辅助方法，它就会为您的应用构建正确的相对url，您无需担心您的IIS 虚拟目录/应用程序名称。

var url = "@Url.Action("ReportScore","Tournaments")";

$.ajax({
    type: "GET",
    url:url,
    success: function (res) {
        alert('success happened');
        //location.reload();
    },
    error: function () {
        alert("The scores were not recorded");
    }
});

如果您将上面的代码放在剃须刀视图中，它就可以工作。但是，如果您的 ajax 调用代码在外部 js 文件中，您可以将相对 url 构建到应用程序根目录并将其传递给您的 js 文件并使用它来构建 url。您可以使用@Url.Content("~") 构建应用程序根目录的 url。如果需要，您可以构建特定操作方法本身的 url。

<script>
    var myApp = myApp || {};  
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';   
    myApp.Urls.reportScoreUrl=  '@Url.Action("ReportScore","Tournaments")';  
</script>
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

在您的PageSpecificExternalJsFile.js 文件中，您可以像这样阅读它

var myUrlToUser = myApp.Urls.reportScoreUrl;
alert(myUrlToUser);

或使用基本 url 构建。

var myUrlToUser= myApp.Urls.baseUrl+"Tournaments/ReportScore";
alert(myUrlToUser);

Answer 2

问题似乎不在于您的 javascript 代码，而在于您的控制器操作方法 （如果它确实是这样编写的）

public async Task<ActionResult> ReportScore() { var a = "abc" } 您的代码块没有显示任何返回语句，请确保等待您的返回值。 IE。 return await "abc"