不引人注意的AJAX错误:“未捕获的ReferenceError:未定义系统”

时间:2014-11-19 03:25:55

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

示例代码: 在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元素中。相反,单击“部分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>

1 个答案:

答案 0 :(得分:30)

如果禁用了不显眼的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文件