14

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: &#39;contentShouldLoadHere&#39; });">Partial 1</a>
Nick Coad
  • 3,346
  • 4
  • 25
  • 61
  • You html should look like `Partial 1` so something weird here –  Nov 19 '14 at 03:46
  • Do you have any other scripts loaded. I think this markup was used with `MicrosoftMvcAjax.js` –  Nov 19 '14 at 03:53
  • @StephenMuecke nope. In my real page I do, but the sample page I'm experimenting with has only those scripts included, the output is exactly as shown in the View file with the exception of helper generated HTML. – Nick Coad Nov 19 '14 at 03:59
  • Have you disabled unobtrusive javascript i.e. set `UnobtrusiveJavaScriptEnabled=false`? –  Nov 19 '14 at 04:26
  • @StephenMuecke thank you! You gave me a clue on where to look. My web.config did not have `` in it. I added that and it fixed it. Feel free to add that as an answer and I'll accept it. – Nick Coad Nov 19 '14 at 05:00
  • Also found a bit more about it [in this blog](http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html) if your interested. –  Nov 19 '14 at 05:19
  • @StephenMuecke The blog link is excellent, cheers mate. – Nick Coad Nov 19 '14 at 22:48

1 Answers1

34

The html your generating for the link is generated if unobtrusive javascript has been disabled. You can enable it in the view with

@{HtmlHelper.UnobtrusiveJavaScriptEnabled = true;}

or for the application (in web.config) with

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

Your rendered html should then 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 file