Geek Answers Handbook

Unobtrusive AJAX error: "Unused ReferenceError: Sys not defined"

Sample code: In an MVC 5 project in Visual Studio, I configured the following controller and views:

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"); } }

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>

Question

If I understand correctly, clicking "Partial 1" should load the contents of "PartialView1" into the HTML element with the identifier "contentShouldLoadHere". Instead, clicking "Partial 1" causes the MyPartialView1 action page ( ~/Test/MyPartialView1) , and in the Chrome dev tool console, I get the following JavaScript error:

 Uncaught ReferenceError: Sys is undefined

Does anyone know why this is so, and how can I fix it?

Notes - In Chrome Dev Tools, I confirmed that both scripts are loaded correctly. - HTML for the link generated by @Ajax helper:

 <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>
+7
ajax asp.net-mvc asp.net-mvc-5 unobtrusive-ajax
source share
1 answer

The html created for this link is generated if unobtrusive javascript is disabled. You can enable it in a view using

 @{HtmlHelper.UnobtrusiveJavaScriptEnabled = true;}

or for an application (in web.config ) with

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

Your processed html should look like

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

and will work with the jquery.unobtrusive-ajax.js

+22
source share

More articles:


All Articles