«

»

Jun
25
2013

ASP.NET/C# Ajax request replaces the whole page issue

ASP.NET ajax entire page refresh issueAjax functionalities becoming so important now a days as rich applications grows on web and consumers always prefer better performing websites and web apps. ASP.NET modern MVC framework designed to well utilize the ajax capabilities.

Not a big expert in .NET/C#, I always prefer to start with a default MVC template from the visual studio IDE.

As I was trying out the ajax functionality on a new MVC project, I have noticed a strange behavior. Every time I make an ajax request from my view to controller, the whole page was replaced with the received response instead of the portion of the page which supposed to be updated.

Everything seemed to be fine, no errors, the view was sending the data to controller and controller was properly responding back but yet, the whole view was replaced with the response.

Over the web, lot of people suggested to include one of the libraries MicrosoftAjax or jQuery unobtrusive (listed below).But even after including all these libs the issue was still not resolved.

<script src="/sample_mvc4/Scripts/MicrosoftAjax.js"></script>

<script src="/sample_mvc4/Scripts/MicrosoftMvcAjax.js"></script>

(or)

<script src="/sample_mvc4/Scripts/jquery.unobtrusive-ajax.min.js"></script>

<script src="/sample_mvc4/Scripts/jquery.validate.min.js"></script>

<script src="/sample_mvc4/Scripts/jquery.validate.unobtrusive.min.js"></script>

After banging my head on the wall for a while I have noticed that the core jQuery library by default added to the very end of the page (the very end of the <body> tag) after the footet (later I have read that it was included to the end to improve the page performance)

 

.Net/C# ajax request replaces the whole page

jQuery library inserted to the bottom of theby default (from _Layout.cshtml)

 

I have tried moving the jQuery library into <head> (above all the ajax and libraries listed above) and the application started working like a charm.

I am not sure including jQuery core library at the end of page has any other side effects like this. But I have decided to keep jQuery library on the <head> to be on the safer side.

 

The working structure (jQuery library moved to head)

The working structure (jQuery library moved to head)

I hope this tip helps someone out there.

 

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *