不显眼的 AJAX 错误：“未捕获的 ReferenceError：未定义 Sys”答案

【问题标题】：Unobtrusive AJAX error: "Uncaught ReferenceError: Sys is not defined"不显眼的 AJAX 错误：“未捕获的 ReferenceError：未定义 Sys”
【发布时间】：2015-01-16 11:23:46
【问题描述】：

示例代码：在 Visual Studio 的一个 MVC 5 项目中，我设置了以下控制器和视图：

控制器

TestController.cs

public class TestController : BaseController
{
    public ActionResult Index()
    {
        return View("Index");
    }

    public PartialViewResult MyPartialView1()
    {
        return PartialView("PartialView1");
    }

    public PartialViewResult MyPartialView2()
    {
        return PartialView("PartialView2");
    }
}

观看次数

Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <script src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
</head>
<body>
    <h1>Testing Unobtrusive AJAX</h1>
    @Ajax.ActionLink("Partial 1", "MyPartialView1", "Test",
                new AjaxOptions() { UpdateTargetId = "contentShouldLoadHere", InsertionMode = InsertionMode.Replace })
    |
    @Ajax.ActionLink("Partial 2", "MyPartialView2", "Test",
                new AjaxOptions() { UpdateTargetId = "contentShouldLoadHere", InsertionMode = InsertionMode.Replace })
    <div id="contentShouldLoadHere">
         <p>This will get replaced.</p>
    </div>
</body>
</html>

PartialView1.cshtml

<h1>Test 1</h1>

PartialView2.cshtml

<h1>Test 2</h1>

问题

如果我理解正确，单击“Partial 1”应该会将“PartialView1”的内容加载到 ID 为“contentShouldLoadHere”的 HTML 元素中。相反，单击“Partial 1”会导致 MyPartialView1 操作（~/Test/MyPartialView1)）的正常页面加载，并且在 Chrome 开发工具控制台中我收到以下 JavaScript 错误：

Uncaught ReferenceError: Sys is undefined

有谁知道这是为什么，我该如何解决？

注意事项 - 我已通过 Chrome 开发工具确认两个脚本都已正确加载。 - @Ajax 帮助器生成的链接的 HTML 是：

<a href="/Test/MyPartialView1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;contentShouldLoadHere&#39; });">Partial 1</a>

【问题讨论】：

你的 html 应该看起来像 <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#contentShouldLoadHere" href="/Test/Partial1">Partial 1</a> 所以这里有些奇怪
您是否加载了其他脚本。我认为这个标记与MicrosoftMvcAjax.js 一起使用
@StephenMuecke 不。在我的真实页面中我这样做了，但是我正在试验的示例页面只包含那些脚本，输出与视图文件中显示的完全一样，除了帮助程序生成的 HTML。
您是否禁用了不显眼的javascript，即设置UnobtrusiveJavaScriptEnabled=false？
@StephenMuecke 谢谢！你给了我在哪里看的线索。我的 web.config 中没有 <add key="UnobtrusiveJavaScriptEnabled" value="true"/>。我添加了它并修复了它。随意添加它作为答案，我会接受它。

标签： ajax asp.net-mvc asp.net-mvc-5 unobtrusive-ajax

【解决方案1】：

如果不显眼的 javascript 已被禁用，则会生成您为链接生成的 html。您可以在视图中启用它

@{HtmlHelper.UnobtrusiveJavaScriptEnabled = true;}

或用于应用程序（web.config）

<configuration>
  <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

您呈现的 html 应该看起来像

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#contentShouldLoadHere" href="/Test/Partial1">Partial 1</a>

并且将使用jquery.unobtrusive-ajax.js 文件

【讨论】：

你也可以把HtmlHelper.UnobtrusiveJavaScriptEnabled = true;放到Global.asax.cs中。

【解决方案2】：

对我来说，只需添加 'HtmlHelper.UnobtrusiveJavaScriptEnabled = true;'没有修复它。我还必须添加“HtmlHelper.ClientValidationEnabled = true;”。在 Global.asax 中为这两种设置添加代码修复了它。

【讨论】：