How to fix : Ajax.BeginForm doing full postback instead of partial.

I realised that in my MVC5 project  in Visual Studio I could not get the Ajax.BeginForm to work properly. It will always do a full postback.

 

I was trying to complete a Video Rating Page, where there are buttons to rate a video and once the user presses one of the rating button, it should thank the user and display the new rating value. I wanted this to shown on the same page without reloading the page, So I considered using AJAX.BeginForm which will simply work fine.

 

In order to have this AJAX functionality you will have to download the AJAX from NUGET.

 

Step 1

Install the following two highlighted packages from NUGET. Click here to check how to load Packages from NUGET in Visual Studio

 

Nuget

 

Step 2

Once you have installed the above two packages through NUGET then do the following.

Go to the _Layout file in your _shared  folder in the Views. ( Note that I am using VB.NET but the example will work for C# also.

 

_Layout in the Shared Folder

_Layout in the Shared Folder

 

Open the _Layout.vbhtml file and browse to the bottom.

 

You will see the following two lines.

@Scripts.Render(“~/bundles/jquery”)
@Scripts.Render(“~/bundles/bootstrap”)

 

Now add the following line after the above two lines.
<script src=”~/Scripts/jquery.unobtrusive-ajax.min.js”></script>

 

I made a mistake of adding this script at the top of my page and my AJAX calls refused to work.

Then I realised that the AJAX has to be loaded after loading the jquery. So I added it at the last.

 

 

 

 

AjaxCallsinMVC5

Add the script at the exact position show.

 

 

Step 3

Run your application.

Your AJAX Calls should work fine.