无法从我可以在本地执行的脚本文件进行相同的 AJAX 调用

Question

我正在使用 C# MVC 5

我有一个 Main.cshtml 页面，其中包含许多部分视图。
其中一个部分视图 Child 会加载更多部分视图 Grandchild 到自身中

if (Model.ChildViewModel.GrandchildViewModels.Count == 0)
{
    { Html.RenderPartial("_PartialGrandchild", new GrandchildViewModel()); }
}
else
{
    foreach (var grandchildViewModel in Model.ChildViewModel.GrandchildViewModels)
    {
        { Html.RenderPartial("_PartialGrandchild", grandchildViewModel); }
    }
}
<div id="newGrandchild"></div>
<div class="row">
    <button class="btn btn-xs btn-primary btn-block" type="button" onclick="addGrandchild('#newGrandchild')">Add A Grandchild</button>
</div>

如果查看倒数第二行，您会看到一个带有onclick 事件的按钮链接到addGranchild('#newGrandchild')。这会调用我的 AJAX 函数在我的 newGrandchild div 上方添加另一个孙子部分视图。

AJAX 函数如下所示：

function addGrandchild(divToReplace) {
    $.ajax({
        url: '@Url.Action("AddGrandchild", "Home")',
        data: {},
        type: "POST",
        error: function (xmlHttpRequest, textStatus, errorThrown) {
            alert("Request: " + xmlHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        success: function (data) {
            $(divToReplace).before(data);
        }
    });
}

这反过来又调用了我的HomeController的方法AddGrandchild，如下所示：

[HttpPost]
public PartialViewResult AddGrandchild()
{
    return PartialView("_PartialGrandchild", new GrandchildViewModel());
}

我的问题：
我没有在HomeController 中达到断点，并且在我的 AJAX 警报中收到此错误：

请求：[对象对象]
状态：错误
错误：未找到

之前，我将这个 JavaScript 放在底部的 Main.cshtml 部分的 <script> 中。现在我将它移到了一个名为 mainFunctions.js 的文件中，我在 Main.cshtml 中引用它，底部的 <script src="~/Scripts/Custom/mainFunctions.js"></script> 是最后加载的脚本。

到目前为止，我的其他功能看起来还不错，但只有我的 AJAX 调用停止工作。

这是为什么呢？

Answer 1

在Jonathon Chase 和charlietfl cmets 的帮助下，我意识到我在我的JavaScript 文件中使用了Razor 语法，导致我的AJAX 的url 属性被按字面意思理解并将我发送到https://{whateverMyUrlMyBe.com}/@Url.Action("AddGrandchild", "Home")，这不能'找不到并返回 404 错误。

要解决此问题，我只需将 url 值更改为：

$.ajax({
    url: '/Home/AddGrandchild',
    ...
});