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 页面未找到错误。

澄清一下，当我点击按钮时，我得到一个弹出窗口说 "The scores were not recorded"，在开发者工具上我得到一个脚本错误，说找不到页面。

我在方法本身的 visusal studio 中也有一个断点，但由于从未调用过该方法，因此从未命中该点。

服务器端代码：

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 进行硬编码并不是一个好主意。您应该始终使用 Url.Action 或 Url.RouteUrl html 辅助方法来构建您正在访问的操作 methods/endpoints 的相对 url。这些辅助方法将负责正确构建 url，而不管您当前的 page/path.

此外，从您的评论来看，似乎 events 是 IIS 中的虚拟 directory/application 名称。 您不应在代码中使用这些来构建 urls，因为它可能会根据您的部署而改变。如果您想将代码副本部署到 "http://staging.yourSite.com" 怎么办？

只要您使用 Url.Action 辅助方法，它就会为您的应用程序构建正确的 url 并且您无需担心 IIS virutal directory/application 名称.

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" } 您的代码块未显示任何 return 语句，请确保等待您的 return 值。 IE。 return await "abc"

AJAX 调用 MVC5 ActionResult

AJAX Call to MVC5 ActionResult

javascript

asp.net-ajax

asp.net-mvc-5