logo标签列表

不显眼的 AJAX 错误："未捕获的引用错误：Sys 未定义"

ajaxasp.net-mvcasp.net-mvc-5unobtrusive-ajax
15

示例代码： 在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");
    }
}

Views

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 Dev Tools确认两个脚本都正确加载。 - 由@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">部分1</a>，所以这里有些奇怪。 - user3559349
你是否已经禁用了不显眼的JavaScript，即设置UnobtrusiveJavaScriptEnabled=false？ - user3559349
@StephenMuecke 谢谢您！您给了我一个线索去寻找问题。我的web.config文件中没有 <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 这一行。我添加了它，问题得到了解决。请随意将其作为答案添加，我会接受它。 - Nick Coad
如果您感兴趣，在这篇博客中还有更多相关信息。 - user3559349
@StephenMuecke 非常感谢您提供的博客链接，太棒了。 - Nick Coad
显示剩余2条评论
2个回答
35

如果未启用无侵入式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 文件一起使用

5
您也可以在 Global.asax.cs 中添加 HtmlHelper.UnobtrusiveJavaScriptEnabled = true;。 - Pawel Krakowiak
0

对我来说，仅仅添加 'HtmlHelper.UnobtrusiveJavaScriptEnabled = true;' 并不能解决问题。我还必须添加 'HtmlHelper.ClientValidationEnabled = true;'。在 Global.asax 中添加这两个设置的代码可以解决问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接