2014-11-19 12 views
7

Beispielcode: In einem MVC-5-Projekt in Visual Studio, ich habe folgende Controller und Ansichten ein:Unauffällig AJAX-Fehler: "Nicht abgefangene Reference: Sys ist nicht definiert"

-Controller

TestController.cs

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

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

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

Ansichten

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> 

Frage

Wenn ich richtig verstanden habe, sollte "Teil 1" den Inhalt von "PartialView1" in das HTML-Element mit der ID "contentShouldLoadHere" laden. Stattdessen verursacht ich die folgenden JavaScript-Fehler einen normalen Laden der Seite der MyPartialView1 Aktion (~/Test/MyPartialView1), und in der Chrome-Entwickler-Tools-Konsole „Partial 1“ klicken, erhalten:

Uncaught ReferenceError: Sys is undefined 

Wer weiß, warum das so ist und wie ich kann es beheben

Hinweise - ich habe über Chrome Dev-tools bestätigt, dass beiden Skripte korrekt geladen werden - der HTML-Code für den von dem @Ajax Helfer erzeugte Link lautet:?.

<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> 
+0

Sie sollten html wie 'Partial 1' so aussehen merhing hier seltsam –

+0

Haben Sie andere Skripte geladen. Ich denke, dieses Markup wurde mit 'MicrosoftMvcAjax.js' –

+0

@ StephenMuecke Nope verwendet. In meiner realen Seite tue ich, aber die Beispielseite, mit der ich experimentiere, enthält nur diese Skripte, die Ausgabe ist genauso wie in der View-Datei mit Ausnahme von Helfer-HTML. –

Antwort

22

Das HTML, das für den Link generiert wird, wird erzeugt, wenn unauffälliges Javascript deaktiviert wurde. Sie können es in der Ansicht ermöglichen, mit

@{HtmlHelper.UnobtrusiveJavaScriptEnabled = true;} 

oder für die Anwendung (in web.config) mit

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

Ihre gerenderte HTML dann wie

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

aussehen soll und wird mit der Arbeit jquery.unobtrusive-ajax.js Datei

+2

Sie können 'HtmlHelper.UnobtrusiveJavaScriptEnabled = true;' auch in Global.asax.cs einfügen. –