Click here to Skip to main content
14,970,493 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have been working on a web application in MVC. i have a partial view ,which contains a navigation menu. The problem i that while on submitting values to grid it gets refreshed and all the navigation get collapsed. I am a newby to MVC while googling Ajax Call will do the work but i don't know how to work it out.

Thanks in Advance,
Updated 19-Aug-15 23:31pm

1 solution

Ajax calls are simple asynchronous requests to the servers to load the resources for your application. In this example I will consider that your page (which will handle the ajax request) has the partial view loading code present, and the view only generates the HTML content for the menu.

Ajax requests are available natively in the browsers, you only need to configure your ASP.NET web application to accept the ajax requests and return the response which is configured to be sent as a snippet (do not send entire HTML DOM in ajax requests, there is no purpose of ajax requests if you have to download entire HTML markup). Same thing for sending the resources to the server. To submit a form using ajax (because your purpose to send ajax requests is to ignore the form postback, stopping page reloading) you can add an event.preventDefault() to the ajax handler so that the form doesn't submit and you send your own data to the server.

event.preventDefault(); // Inside the function for button handler
  url: 'ajax-controller/form-handler',
  data: $('#myform').serialize(), // Serialize the form and submit as data for request
  success: function (data) {
    // Data submitted

I have written a post for beginners in topics such as, Ajax in ASP.NET MVC. It covers how you should perform these actions in ASP.NET MVC, perhaps a separate controller is best choice! Also you may return a string in case of ajax controllers, so that HTML DOM is not returned by the layouts and so.

A tip for ajax developers in ASP.NET MVC framework[^]
Alok Nair 20-Aug-15 8:37am
Thank you Afzaal Ahmad Zeeshan for quick reply. I will check it.

Thanks Again :)
Afzaal Ahmad Zeeshan 20-Aug-15 8:39am
You are most welcome, Alok.
Alok Nair 21-Aug-15 1:27am
Hey Afzaal,
Could you please point an example for the same ??? Sorry i am a noob to Ajax.

My Partial View:
<div id='cssmenu'>
<li class='active has-sub'><span>Products</span>
<li class='has-sub'><span>Product 1</span>
<li><span>Sub Product</span></li>
<li class='last'><span>Sub Product</span></li>
<li class='has-sub'><span>Product 2</span>
<li><span>Sub Product</span></li>
<li class='last'><span>Sub Product</span></li>
<li class='last'><span>Contact</span></li>

I have successfully implemented Partial View and it is working but, while clicking on navigation it gets refreshed.

Please help me with this.
Thanks in Advance.
Sorry to disturb you.
Afzaal Ahmad Zeeshan 21-Aug-15 6:48am
Please consider reading the article, it gives you a template overview of how to do that. If you have any question while understanding the post please comment it under the article.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900