Join Jess Chadwick for an in-depth discussion in this video Avoid page refreshes with partial rendering, part of Learn ASP.NET Core MVC: The Basics.
- In this chapter, I'm going to show you a few different ways to avoid wasting user's bandwidth by sending as little data over the wire as possible. And I'll start by showing you how to combine the partial view concept with AJAX to send only the parts of the page that change as the user interacts with it, a technique called partial rendering. Take a look at the blog landing page. This page is designed to render the five most recent blog posts on the server along with the rest of the page including the layout.
This page looks like a great opportunity to use AJAX to enhance the user's experience by allowing them to page through all of the blog posts a couple at a time without leaving the page. Let me quickly implement this paging functionality using full-page navigation first with techniques that I've show elsewhere in the course. Since I've already shown these techniques, I'm not going to walk you through it step by step. However, all the code that I show will be available in the assets folder in the exercise files for this video.
Now that we have these changes in place, we can test it out by running the application and clicking on these new navigation buttons. As you'd expect, what happens is a complete refresh of the entire page due to a full-page navigation which we can see by the url changing with each click. Now, let's turn this into an AJAX call with partial rendering to avoid that full-page refresh every time. In order to implement this functionality, I'll need to add some jquery code, so I'll start by copying the jquery library into my project.
That's because right now the controller action is using the view method to return the entire fully rendered view complete with its layout. So, let's go ahead and fix that. The first thing that's causing a problem is that the index.cshtml view includes this call on line three which sets the layout every single time the view is rendered. In order to fix this, I'll move this code to a special view called the view start view. The view start view is a view that gets run before every single other view in this site which makes it a great place to put any common logic such as setting the layout property for every page in the site.
To implement the view start view, simply add a new file to your views folder named _viewstart.cshtml Note that the name of this file, including the underscore, really does matter this time. So just be sure that that's correct. Once you have this file, you can simply cut and paste the layout property line from the index page and into this page. From this point on, the layout property will be set on every single view without each view having to explicitly set it itself.
With that in place, let's move on to updating the controller action to look for AJAX requests. The first step is determining whether the request is an AJAX call or not. Jquery adds a special header named X-Requested-With on every single one of its AJAX requests. So all we'll need to do is check to see if that header is there, and then we'll know that it's an AJAX request. Then when it is an AJAX request instead of calling the view method, like we're doing now, to return the full view including the layout, we'll instead call the partial view method which will skip the layout and render only the view as a partial view.
Now when we switch back to the browser and refresh the page to try it out, everything works great. And there you have it. Partial page rendering using AJAX and server side rendering with Razor.
- Building blocks of ASP.NET Core applications
- Creating a new project
- Responding to HTTP requests
- Serving static files
- Understanding the MVC pattern
- Handling requests with controllers
- Rendering HTML with Razor
- Rendering data, view markup, and view logic
- Creating HTML forms
- Validating form data
- Reading and writing from a database with Entity Framework
- Improving the user experience
- Exposing data with a web API
- Securing your ASP.NET application