Example code: In an MVC 5 project in Visual Studio, I have set up 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 have understood correctly, clicking "Partial 1" should load the contents of "PartialView1" into the HTML element with an ID of "contentShouldLoadHere". Instead, clicking "Partial 1" causes a normal page load of the MyPartialView1 action (~/Test/MyPartialView1), and in the Chrome dev tools console I get the following JavaScript error:
Uncaught ReferenceError: Sys is undefined
Does anyone know why this is, and how I can fix it?
Notes - I have confirmed via Chrome Dev Tools that both scripts are being correctly loaded. - The HTML for the link generated by the @Ajax helper is:
<a href="/Test/MyPartialView1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'contentShouldLoadHere' });">Partial 1</a>
The html your generating for the link is generated if unobtrusive javascript has been disabled. You can enable it in the view with
or for the application (in
web.config) withYour rendered html should then look like
and will work with the
jquery.unobtrusive-ajax.jsfile