How to prevent full page refreshes with areas

Question

We started a modular MVC project at the beginning of the as described in this thread.

MVC Ninject: How to add NinJect bindings from an MVC Area project

One thing we've yet to figure out a good solution for is prevent a full page refresh when loading views from different areas.

A brief history, we use different web projects for all our areas. When the projects build, we copy all the files to an Area folder in the main web app project.

The main web app project the header portion of the application contains a menu which allows users to open any plugin.

Right now when a user clicks on a menu item, the menu as well as everything refreshes.

We've been experimenting with partial views in the plugin projects but still getting the page refreshes and most of the time losing css causing page layout problems.

At the very least the _Layout template we use in the main website, we need to find a way to where that doesn't refresh when loading views from any area.

Any ideas would be greatly appreciated.

Thanks

This is not something native to the MVC framework regardless of where your view is coming from (an MVC area or from the main/shared views folder). You need a front end javascript based framework to retrieve html fragments (MVC Views) from the server and then place those in the existing rendered HTML document. There are plenty of frameworks out there or, if there are a very limited number of locations this needs to happen, you can use JQuery to retrieve the server side views and place the results in the HTML document. — Igor, Oct 30 '15 at 20:07

score 0 · Answer 1 · answered Jan 19 '16 at 20:15

This has been an off and off thing but finally we found something that looks promising without having to resort changing a lot of code to a javascript framework. We use jQuery for UI manipulation but try to keep what we write down for productivity and quality considerations.

Right now we're working with MVC built in ajax helpers so this ability is actually native to the Asp.Net MVC.

Basically, the div which contains @RenderBody, we gave an ID.

Then we define AjaxOptions to replace html in this div. Then we use Ajax.ActionLink.

The beauty of it so far is we define ajaxStart & complete functions which handle a loading div while loading in a single place.

<script>
        $(document).ajaxStart(function () {
            $("#loading_div").show();
        });

        $(document).ajaxError(function (result) {
            $("#loading_div").hide();
            alert('Exception: ' + result);
        });

        $(document).ajaxComplete(function () {
            $("#loading_div").hide();
        });
</script>

Then in all our plugin applications, all controllers return partial views. One thing I noticed is, in our plugin projects, in the _ViewStart template, it is important to comment the Layout.

If not we found the more you clicked on links, the more you'd have controller actions running repeated loops.

It's imperative to load the jquery-Unobtrusive-ajax script in layout. We do so in the head.

We have a solution with 41 projects, 7 which are plugin projects. So far watching the dom and network traffic, everything in the initial tests is running nicely.

How to prevent full page refreshes with areas

1 Answers1