Click here to Skip to main content
14,149,668 members
Click here to Skip to main content
Add your own
alternative version

Stats

7.2K views
5 bookmarked
Posted 28 Feb 2016
Licenced CPOL

MVC Output Cache And Cache Profiling

, 29 Feb 2016
Rate this:
Please Sign up or sign in to vote.
In this post we will discuss one of the easiest ways to cache an output in MVC and output cache attributes.

Introduction

MVC provides users a way to cache any output (view/data) from any controller for a definite time. This feature can also be used at action level. We will write a quick code to see this, in the following sections. 

We will also create some cache profile and will be using them for caching different sections. This will make the caching strategy easy to cater to some extent of changes going further, without fresh deployment. 

Let’s dive in to code now.

Lets start with a blank MVC application 

Open Visual Studio 2013 IDE, and create a new project as shown below:

create a new project

Select ASP.NET Web Application:

ASP.NET Web Application

 

Select Empty template and check MVC (so that MVC folders are created in code structure). Click on OK, no need to change any other option.

Empty template

This will give us a blank MVC application where we can add the code required for this demo.

 

Add the code to see it happening:

Let’s add a Home controller in the controller folder and add the following code in that: 

 

namespace MVCCache.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [OutputCache(Duration = 5)]
        public string GetHeaderData()
        {
            return "Header data is returned at " + DateTime.Now.ToString();
        }

        [OutputCache(Duration = 10)]
        public string GetFooterData()
        {
            return "Footer data is returned at " + DateTime.Now.ToString();
        }
    }
}

 

Here we have three action methods:

  1. Index – This return index view.
     
  2. GetHeaderData – This return header data. For testing our cache code, we have also added date time there. This will tell us at what time this data has been fetched fromthe server. Ideally it should go to server to fetch the data only after the header cache is expired. 

    If you notice on the top of action method, we have added [OutputCache(Duration = 5)]. 

    This tells the application to cache this data for 5 seconds and for any request for this data before cache is expired fetch the data from cache itself. Once cache is expired it should fetch the data again from the server. 
     
  3. GetFooterData – This returns footer data. For testing our cache code, we have also added date time there. This will tell us at what time this data has been fetched from server. Ideally it should go to the server to fetch the data only after the footer cache is expired. 

    If you notice on the top of action method, we have added [OutputCache(Duration = 10)]. 

    This tells the application to cache this data for 10 second and for any request for this data before cache is expired fetch the data from cache itself. Once cache is expired it should fetch the data again from the server.

Now let’s create index view inside Home folder in view and add Head and body section as described below: 

Head section code

This section just contais a couple of classes to differentiate header and footer fromthe  rest of the data. (it can be replaced with any other style code).

 

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Main</title>
    <style>
        header 
        {
            height: 200px;
            background: orange;
            text-decoration: solid
        }
        footer 
        {
            height: 200px;
            background: green;
            text-decoration: solid
        }
    </style>
</head>

 

Body section code

Now here, header section is calling "GetHeaderData" action method and showing whatever is returned from this method. Keep in mind we have cached this data for five seconds. 

Footer section is just calling "GetFooterData" action method and showing whatever is returned from this method. Keep in mind we have cached this data for 10 seconds.

In between header and footer, this view also rendering some data on its own, which is not cached at all. 

Notice, all these sections are displaying data fetching time at the top of the respective section.

 

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Main</title>
    <style>
        header 
        {
            height: 200px;
            background: orange;
            text-decoration: solid
        }
        footer 
        {
            height: 200px;
            background: green;
            text-decoration: solid
        }
    </style>
</head>

 

Test the Application

Test the application 

OK, the basic code required for caching is now completed, (cache profile code is remaining, we will discussthat at the end) so let’s test the application we have created. 

Now remember, we have cached header for five seconds, footer for 10 seconds, and content is not cached at all. So we should expect the header code to go to the server and get the fresh data every five seconds, and until then if a request comes it should show the data from cache. Similarly footer code should do this for 10 seconds as it is cached for 10 seconds. 

The rest of the content is not cached, hence, for every refresh it should go to the server and get fresh data. 

Now let’s run the application and see if it behaves as we are expecting. When we run this application it will be showing a page like below:

run the application

In summary, what we have done in this code is, we cached two section of our web page for two different time periodsand kept one section live with no caching for that part of the data. 

Cache Profiling 

The only thing left in this code is to make it a bit more deployable. As of now if we need to change header cache time to 30 seconds from five, we need to change the code base and that will require a deployment. To avoid this we can use cache profiling. It’s nothing but moving the cache duration setting to configuration and giving it a name. This cache profile name can be used instead of defining the duration in controller. Let’s see the code to add cache profiles in the code we have already added above.

In web.config of your project, add caching section inside <system.web> section, as shown below:

system.web

Now we have two caching profiles ready, which we can use instead of defining cache properties in controllers. 

Let’s change the controller code as mentioned below: 

[OutputCache(Duration = 5)] - [OutputCache(CacheProfile = "HeaderCache")]
[OutputCache(Duration = 10)]  [OutputCache(CacheProfile = "FooterCache")]


Whenever we want to change the time of cache for header or footer, we can just change the duration in webconfig and get that effected with no deployment needed.

License

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

Share

About the Author

Suraj Pant
IBM India
India India
A Development Consultant, Solution Development Lead and Architect with 13 years of experiences in envisioning, planning, designing, development and delivery methodologies using Microsoft technology.

You may also be interested in...

Comments and Discussions

 
QuestionThanks Pin
lmcgs28-Jun-16 23:00
memberlmcgs28-Jun-16 23:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190518.1 | Last Updated 29 Feb 2016
Article Copyright 2016 by Suraj Pant
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid