Asp.net avoid reload entire page

Question

I have a Master Page in a ASP.NET MVC 4 application. The master page has a menu with several items and each item is a link to a page.

The menu is a jQuery Accordion menu. When I select an item the entire page is reloaded and the accordion menu return to the original state.

To avoid this, I store the last menu opened and store it to an attribute of the header of the menu. On $(document).ready event I loop the headers and activate the menu but this makes an ugly effect to be seen.

How can I avoid reload of the entire page? I have to use the update panel in the MainContent of the ContentPlaceHolder of the Master Page? There is an example?

Master Pages and Content Placeholders are not part of the MVC framework. They are part of Asp.NET WebForms, a server side framework. If you want to avoid postbacks, I would move to a SPA framework such as AngularJs. — Eric Rohlfs, Oct 14 '16 at 14:08
Ok, Updatepanel are not applicable. MVC with ASPX engine (not Razor) support Master Page. There is no way to load the content page without refresh entire page? — Old-fashioned-dev, Oct 14 '16 at 14:17
Your solution for menu item is a harcoded and it is not recommanded. Lets say you want to add new item in future, are you going to update document.ready function every time? As Eric recommaned AngularJs is a good choice for single page application. Dont go for updatepanel it does have many side effect and also not applicable in MVC . — Sajed, Oct 14 '16 at 14:44

score 1 · Accepted Answer · answered Oct 14 '16 at 14:43

1

I'd suggest an Ajax method. You can find a tutorial here:

http://www.codeproject.com/Tips/886473/Implementing-AJAX-in-ASP-NET-MVC

Since you're already using jQuery, another option would be to use $.get(). You can find a lot of tutorials related to that method, like this.

answered Oct 14 '16 at 14:43

Ben Osborne

1,412
13
20

I agree. Ajax is the way to go. – BrilBroeder Oct 14 '16 at 15:39
Thank you for your answer. After a lot of search and study of what I heard from you, I discovered a lot of framework as angularJs to build a Single Page Application. My need is to have a web application that has a list of items on the left and each of them retrieve a list of other items from server that have to be showed in the central panel of the page. I would like to avoid the reload of the entire page. So I bind a click event on each menu item and with te .load() method I retrieve the page to put in the selected element. Is this correct? – Old-fashioned-dev Oct 28 '16 at 08:26
Yes you could use angular. Jquery would work as well. See the answer to this question: http://stackoverflow.com/questions/5942105/jquery-get-request-on-http-url – Ben Osborne Oct 28 '16 at 13:29
I've implemented the ajax solution with .load method to redirect the page to an element of the main page. I noted that the _Layout main page is always created also if the content page is created as partial. Can I avoid it? – Old-fashioned-dev Nov 07 '16 at 14:24
I think that question is beyond the scope of your original question. I'd suggest asking a new question. Including some sample code would help get is answered quickly! – Ben Osborne Nov 07 '16 at 14:49

score 1 · Answer 2 · answered Oct 14 '16 at 15:43

To make a difference when returning data between an 'normal' call to your action and one from an ajax-call use :

if (Request.IsAjaxRequest()) return PartialView("_Index", VM);
return View(VM);

The partial one will not include the lay-out. Otherwise you might get a funny looking page with the multiple top-bars.

Asp.net avoid reload entire page

2 Answers2