15

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>
7
  • You html should look like <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#contentShouldLoadHere" href="/Test/Partial1">Partial 1</a> so something weird here
    – user3559349
    Nov 19, 2014 at 3:46
  • Do you have any other scripts loaded. I think this markup was used with MicrosoftMvcAjax.js
    – user3559349
    Nov 19, 2014 at 3: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, 2014 at 3:59
  • Have you disabled unobtrusive javascript i.e. set UnobtrusiveJavaScriptEnabled=false?
    – user3559349
    Nov 19, 2014 at 4:26
  • @StephenMuecke thank you! You gave me a clue on where to look. My web.config did not have <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 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, 2014 at 5:00

2 Answers 2

35

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

1
  • 5
    You can put HtmlHelper.UnobtrusiveJavaScriptEnabled = true; in Global.asax.cs, too. Dec 18, 2015 at 17:01
0

For me, just adding the 'HtmlHelper.UnobtrusiveJavaScriptEnabled = true;' did not fix it. I had to also add the 'HtmlHelper.ClientValidationEnabled = true;'. Adding code in Global.asax for both settings fixed it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.