Implement an Ajax call using the tags data-*

Question

I'm trying to implement an Ajax call using the tags data-* as described at jquery-ajax-unobtrusive

I know that I can use a javascript function with $.ajax() but my purpose is to experiment with the tags data-ajax...

I tried this code in the cshtml file

<a class="btn btn-primary" data-ajax-url="/Home/AjaxSample" data-ajax="true" data-ajax-success="AjaxSuccess" data-ajax-failure="AjaxError" data-ajax-method="GET">Ajax</a>

// other code...

function AjaxSuccess() { alert('AjaxSuccess'); }
function AjaxError() { alert('AjaxError'); }

The browser shows the button of course, but nothing happens when I click it. I can't discover any error in the browser debugger. Nothing happens apparently.

Intellisense doesn't show the tags data-ajax and friends. Did I forget to include something?

Are there any complete working examples?

Answer 1

The answer from the comments (since no-one has added it):

<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.j‌​s"></script>
<!-- the ~ is to symbolize your project's wwwroot folder

Add the above to your master layout with all of your other scripts (_Layout.cshtml by default).

What this does is include the jQuery unobtrusive ajax file into all of your pages, so that the main script that does all the work is included.

Before doing this, make sure you have installed the package Microsoft.Jquery.Unobtrusive.Ajax