Blog posts by Joe Mayberry2020-03-16T20:48:22.0000000Zhttps://world.optimizely.com/blogs/joe-mayberry/Optimizely WorldLessons Learned with my first Personalized Content Recommendations Implementation<p>As most of you know by now, in November 2019, Episerver acquired Idio, a content personalization and analytics platform that can provide a 1:1 content recommendations based on a user’s interests and journey through your site. This means that Episerver now offers an even more spectacular content recommendation platform, that puts the best individually tailored content in front of your users.</p>
<p>For more information about the acquisition please visit Episerver’s news release: <a href="https://www.episerver.com/company/press-room/episerver-signs-definitive-agreement-to-acquire-11-personalization-company-idio/">https://www.episerver.com/company/press-room/episerver-signs-definitive-agreement-to-acquire-11-personalization-company-idio/</a></p>
<h2>Getting started</h2>
<p>First, talk with your account manager. They will get the ball rolling and get you set up with an on-boarding team, who will facilitate the provisioning of the content recommendations environment, provide you with the API keys that you will need, as well as a login to the Content Recommendations dashboard, and ultimately helping to you understand the entire process.</p>
<h2>Collecting metadata or What should you track?</h2>
<p>The Content Recommendations engine does a lot of great things behind the scenes. It uses Natural Language Processing (NLP) to understand the meaning and to determine the topics of your content. It also looks at the metadata set on the content, such as the OpenGraph (og) properties that Facebook uses. If those properties are on the page, they will be picked up automatically.</p>
<p>In addition, you can set other data values that you want to be tracked by including additional metadata tags in the header of your content. For example the client I was working with wanted to track the page type and categories for all of their content.</p>
<p><a href="/link/6c395125fee8467eae7bc88605aef0f5.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/collecting-metadata/</a></p>
<p>Once this data is tracked, it can be used in a variety of ways, such as setting up your Flows in order to filter the content that would be available in the recommendations group. The data will also be included in the response returned to the recommendations block, so it can be used for the rendering in the Mustache template (more on that later)</p>
<p><span style="background-color: #ffff99;"><strong>IMPORTANT: </strong>If you are looking to have an image displayed in the recommendations, then one needs to be set into the meta tags, such as the og:image tag. The indexing process will <strong>NOT</strong> pick an image from the content automatically. Only from the meta tags.</span></p>
<p><strong>Pro tip:</strong> A little bit of planning at this point in the process will save a lot of time later. Look at the end-result designs you want to use for the recommendations. What information do you want to display? Where that information is coming from? It's easier to add these metatags before you start tracking, rather than after.</p>
<h2></h2>
<h2>The Tracking Script</h2>
<p>The tracking script is one of the key parts to this whole thing. It’s a JavaScript tag that goes on every page, making an API call back to the indexing engine to the index the piece content and to track the visitor activity for that URL.</p>
<p>There are two ways to add the tracking script, the first is by using a tag management solution, such as <a href="https://marketingplatform.google.com/about/tag-manager/">Google Tag Manager</a>, or by using the tracking script that is included with the EPiServer.Personalization.Content.UI NuGet package.</p>
<p><strong>Adding via Tag Management System:</strong><br /><a href="/link/653bee4fd8b14c81a023ac436d2288d7.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/installing-content-recommendations/</a></p>
<p><strong>Installing the EPiServer.Personalization.Content.UI NuGet package:</strong><br /><a href="/link/5eb1d145db804031bf509cb6349a7ab8.aspx">https://world.episerver.com/documentation/developer-guides/CMS/personalization/installing-and-configuring-content-recommendations-integration-package/</a><br /><br /></p>
<p><span style="background-color: #ffff99;"><strong>IMPORTANT:</strong> If you use a tag management system, set the episerver:personalization.content.DisableDefaultTracking key equal to "<strong>true"</strong> in your appSettings.</span></p>
<p>If you are using the script rendered from the NuGet package then the domain IP address that you are tracking, will need to be whitelisted.</p>
<p><span style="background-color: #ffff99;"><strong>IMPORTANT: </strong>While both methods are valid, it’s important to only use one or the other. Using both at the same time could result in duplicate tracking, or other issues, and skew the tracking results.</span></p>
<p>Once you have the tracking script installed and deployed to production, the content will start to be tracked and indexed. The tracking process is very organic in nature, meaning that the content is indexed and tracked as it is accessed by the users. You will almost immediately start to see what content is the most used, which in itself, is very valuable information.</p>
<h2>The Dashboard</h2>
<p>The Content Recommendations dashboard provides you with a lot of information about your content, how well it is performing, and what people are really looking at.</p>
<p>When you install the <a href="/link/5eb1d145db804031bf509cb6349a7ab8.aspx">EPiServer.Personalization.Content.UI NuGet package</a> you will get Content Recommendations connector installed to view the dashboard from the CMS Admin UI.</p>
<p><strong>Note:</strong> at this point, there is not a trusted sign-on from the Episerver Admin UI to the Content Recommendations dashboard, but that is coming.</p>
<p><img src="/link/86e8a2a91de7490abe4bdb0df2d024de.aspx" /></p>
<p><img src="/link/42254f88866c49f9b8f18382086d24ed.aspx" /></p>
<h2>Going with the Flow </h2>
<p>Once your content has been indexed and tracked, the next step is to set up some sections and flows to help organize the recommendations. A flow is a set of rules that you can define to match content into logical groups to provide better focused recommendations.</p>
<p>The Content Recommendations dashboard provides an easy way to set up and refine the flows and sections over time.</p>
<p><span>Setting up sections and flows<br /></span><a href="/link/3c89b4d3fcd647bd80fdcb7dff1cc5ed.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/setting-up-sections-and-flows/</a></p>
<h2>Show me the Recommendations!</h2>
<p>With your flows set up, it’s time to focus on the delivery. This is where the electronic rubber meets the digital road. Remember, the recommendations are personalized for the user, based on their journey through your site, with the items pulled from the available indexed content groups you have defined in your flows.</p>
<p>First thing to do is to create some delivery widgets. These components will feed into the recommendations block, to return the personalized recommendations for the user. World.episerver.com already has some great documentation on setting up the sections, flows, and delivery widgets.</p>
<p><a href="/link/3c89b4d3fcd647bd80fdcb7dff1cc5ed.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/setting-up-sections-and-flows/</a></p>
<p><a href="/link/875d19d6db0f4a5282640ff61abe0311.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/setting-up-deliveries/</a></p>
<p>If you haven’t already, you will need to install the <a href="/link/5eb1d145db804031bf509cb6349a7ab8.aspx">EPiServer.Personalization.Content.UI NuGet package</a>. In addition to installing the Content Recommendations connector, and adding the tracking scripts to your pages, it also adds a new block type model and view for rendering the recommendations.</p>
<p><img src="/link/23b060ceadb745978a246aa66d5f252c.aspx" /></p>
<p><img src="/link/242c576ef2d6458881b855e1e7ea1455.aspx" /></p>
<p>The Content Recommendations block has three new properties:</p>
<ul>
<li>Number of recommendations – how many items to show at a time. You can have as many as you need, just make sure that the design can handle them.</li>
<li>Delivery widget – this is where you select what recommendations group (flow) will be used for this instance of the recommendations. You should see a list of all the delivery widgets that have been set up in the dashboard.</li>
<li>Recommendation template – this is a <a href="https://mustache.github.io/">Mustache</a> template that defines the repeating pattern for the markup.</li>
</ul>
<h2>Recommendations Template</h2>
<p>The Recommendations Template field is the workhorse of the rendering. Everything inside the {{#content}} {{/content}} mustache markup will be repeated for each recommendation item, and additional markup can also be included. Keep in mind that the recommendation template is rendered in the front-end and has no access to the back-end CMS APIs, or content object data. It only knows the JSON that is being returned from the recommendation server.</p>
<p>You can use the custom metadata that you set up for tracking earlier in the template. For the client I worked with, they needed to display specific category and description content, so we set it up to track in custom tags, and then rendered those values in the template.</p>
<p>To use the custom metadata, use the mustache syntax to traverse the JSON nested property values.</p>
<p>For example:</p>
<pre class="language-markup"><code>{{#metadata}}
{{#tags}}
{{#og}}
{{description}}
{{/og}}
{{/tags}}
{{/metadata}}
</code></pre>
<p><img src="/link/0ab95a0da5084f1a80d51bd3905da9d3.aspx" /></p>
<p>One nice thing is that if you put your markup inside of the nested structure, if nothing is passed, then the markup will not be rendered. In the following example, if no description is passed in the response, then the p tags will not be rendered either.</p>
<pre class="language-markup"><code>{{#metadata}}
{{#tags}}
{{#og}}
<p>{{description}}</p>
{{/og}}
{/tags}}
{{/metadata}}
</code></pre>
<h2>I’ve got the block, now what?</h2>
<p>The great thing about a block approach, and the way this one is set up is that you can use the same delivery widget with different blocks to easily change the recommendations template markup, but return the same recommendations for different uses across your site.</p>
<p>Since it’s a block, you can drop it right into the middle of a XHtml block or add a content reference or content area property to your page models and render using Html.PropertyFor in your view. And if your users have JavaScript turned off, or for some reason no data is returned to from the recommendations engine, then the block doesn’t break. It just doesn’t show on the page.</p>
<p>As far as using a content reference or a content block, that is up to you and your needs. But I have four words for you: <strong>Personalization and Visitor Groups</strong> </p>
<h2>Using Visitor Groups for Personalization</h2>
<p>The 1:1 personalized recommendations sounds great, but what if you want to change the recommendations based on a visitor group? The recommendations engine doesn’t know anything about your visitor groups, but there is a way.</p>
<p>Let’s take a scenario where you want a certain group of recommendations to be used if the visitor falls into a specific visitor group, and a more generic recommendations group if they do not. You would set up two flows and delivery widgets, one with the generic, and one with more targeted rules.</p>
<p>In CMS, create two recommendations blocks, one pointing to the targeted delivery widget, and one to the generic widget. Then in a content area, add the two recommendation blocks, and add the personalization visitor groups as you normally would. If the visitor falls into the group, they will get the targeted recommendations.</p>
<h2>Wrapping things up</h2>
<p>The new Content Recommendations functionality is a great addition to any Episerver website. It will help you understand what content people are looking at, while helping get the right content in front of your users. And while there are several steps in the process, along with a few bumps in the road as I learned what I think is the proper order to do things, it still seemed to go smoothly, without a lot of complications. </p>
<p>The thing that probably takes the longest out of the whole process is getting the content indexed, since it is an organic process of indexing the content as it is being accessed by your users. But the biggest lesson I learned was that a little bit of planning to determine the data you want to have tracked at the beginning will save you a lot of time later.</p>
<p>There is some great documentation already set up on world.episerver.com (<a href="/link/6afe1eb606dc41b7803b29b495f821bf.aspx">https://world.episerver.com/documentation/developer-guides/personalization/content-recommendations/</a>), and this will continue to be refined and updated over time.</p>2020-03-16T20:48:22.0000000ZBlog postClearing the Local Object Cache<p>We all know that one of the best ways to improve site performance is to implement a successful caching strategy, and Episerver employs an aggressive one. However, caching can be frustrating during development, and sometimes it’s nice to be able to remove some, or all the cached objects on-demand.</p>
<p>A couple of years ago I worked on a Web Forms based solution to remove the cache items for an Episerver site. It was okay, but you had to make sure the files were on the server correctly (not always a sure thing with the mix of MVC and Web Forms and site publishing, at least in my experience), and you had to remember a special URL to get to the page. Sure, it all worked, but it was a hassle, there was very little security, and it wasn’t MVC.</p>
<p>When I went through the Episerver Development Fundamentals course by Mark Price (which I highly recommend, even if you are a seasoned developer), one of the exercises (exercise G1) included steps for building an MVC page template for viewing the object cache. I remember thinking that this would be a much better solution than the web forms example that I had used before and could be modified easily to include functionality for not just showing the cached items but removing them as well. Then in the Episerver Advanced Development course, Module F talked about plugins, with an exercise building an admin tool plug-in.</p>
<p>Ding! Ding! Ding! It hit me like a lightbulb full of bricks…I could make an admin plugin to view and remove items from the cache. As a plugin, it would be easy to include in deployments. It would be in a logical, secure location, and I wouldn’t have to remember a special URL to get to it. Bonus!</p>
<p>It’s important to note that this example is primarily focused on the local object cache. It does provide a method for servers in a load balanced environment, although this is not the preferred way of clearing cache items for remote servers. Episerver provides functionality and documentation about the recommended way to invalidate cache across multiple servers:</p>
<p><span><a href="/link/d8535ea8672442888befed8959dc8b7b.aspx">https://world.episerver.com/documentation/developer-guides/CMS/caching/Object-caching/</a></span></p>
<h2></h2>
<h2>The Route</h2>
<p>First thing we need to do is to create a new Initialization Module, to set up a custom route so that we can access the controller functions and make this thing work without having a page object.</p>
<pre class="language-csharp"><code>using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using System.Web.Mvc;
using System.Web.Routing;
namespace LOC.Cache.Business.Initialization
{
[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class LocalObjectCacheInitialzationModule : IInitializableModule
{
private bool initialized = false;
public void Initialize(InitializationEngine context)
{
if (!initialized)
{
RouteTable.Routes.MapRoute(
name: "LocalObjectCache",
url: "localobjectcache/{action}",
defaults: new { controller = "LocalObjectCache", action = "Index" });
initialized = true;
}
}
public void Uninitialize(InitializationEngine context) { }
}
}</code></pre>
<p> This module creates a new route named “LocalObjectCache”, that will call the LocalObjectCacheController’s Index function by default.</p>
<p> </p>
<h2>The ViewModel</h2>
<p>Next, we need a viewmodel to pass to the data to the view for rendering.</p>
<pre class="language-csharp"><code>using System.Collections;
using System.Collections.Generic;
using System.Web.Mvc;
namespace LOC.Cache.Models.ViewModels
{
public class LocalObjectCacheViewModel
{
public IEnumerable<DictionaryEntry> CachedItems { get; set; }
public string FilteredBy { get; set; }
public IEnumerable<SelectListItem> Choices { get; set; }
}
}</code></pre>
<p>Here we are setting an IEnumerable of type DictionaryEntry to store the cache object data, a string value for filtering the CachedItems list, and a select list for the filter choices.</p>
<h2></h2>
<h2>The Controller</h2>
<p>Now we get into the Controller. The workhorse of this plug-in.</p>
<p>Full credit where it’s due…if this code looks familiar, it’s because it’s based on the code from exercise G1 in the Development Fundamentals course, and exercise F3 in the Advanced Developers course, both taught by Mark Price (<span><a href="/link/5341f632537c4b0ab6b8fb651bd310f8.aspx?userid=9ec4e873-a200-e611-9afb-0050568d2da8">https://world.episerver.com/System/Users-and-profiles/Community-Profile-Card/?userid=9ec4e873-a200-e611-9afb-0050568d2da8</a></span>).</p>
<pre class="language-csharp"><code>using System.Linq;
using System.Web.Mvc;
using LOC.Cache.Models.ViewModels;
using EPiServer.PlugIn;
using System.Collections;
using EPiServer.Core;
using EPiServer.Framework.Cache;
namespace LOC.Cache.Controllers
{
[Authorize(Roles = "CmsAdmins")]
[GuiPlugIn(Area = PlugInArea.AdminMenu, Url = "~/localobjectcache", DisplayName = "Clear Local Object Cache")]
public class LocalObjectCacheController : Controller
{
private readonly ISynchronizedObjectInstanceCache cache;
public LocalObjectCacheController(ISynchronizedObjectInstanceCache cache)
{
this.cache = cache;
}
public ActionResult Index(string FilteredBy)
{
var viewmodel = new LocalObjectCacheViewModel();
var cachedEntries = HttpContext.Cache.Cast<DictionaryEntry>();
switch (FilteredBy)
{
case "pages":
viewmodel.CachedItems = cachedEntries.Where(item => item.Value is PageData);
break;
case "content":
viewmodel.CachedItems = cachedEntries.Where(item => item.Value is IContent);
break;
default:
viewmodel.CachedItems = cachedEntries;
break;
}
viewmodel.FilteredBy = FilteredBy;
viewmodel.Choices = new[]
{
new SelectListItem { Text = "All Cached Objects", Value = "all" },
new SelectListItem { Text = "Any Content", Value = "content" },
new SelectListItem { Text = "Pages Only", Value = "pages" }
};
return View("~/Features/LocalObjectCache/LocalObjectCache.cshtml", viewmodel);
}
[HttpParamAction]
public ActionResult RemoveLocalCache(string[] cacheKey, LocalObjectCacheViewModel model)
{
if (cacheKey != null)
{
foreach (string key in cacheKey)
{
cache.RemoveLocal(key);
}
}
return RedirectToAction("Index");
}
[HttpParamAction]
public ActionResult RemoveLocalRemoteCache(string[] cacheKey)
{
if (cacheKey != null)
{
foreach(string key in cacheKey)
{
cache.RemoveLocal(key);
cache.RemoveRemote(key);
}
}
return RedirectToAction("Index");
}
}
}</code></pre>
<p>The controller has a few key areas that we should go over.</p>
<pre class="language-csharp"><code>[Authorize(Roles = "CmsAdmins")]
[GuiPlugIn(Area = PlugInArea.AdminMenu, Url = "~/localobjectcache", DisplayName = "Clear Local Object Cache")]
public class LocalObjectCacheController : Controller</code></pre>
<p>The Authorize decorator sets the permissions for who can use this plugin. This should be set to an administrators role, since it will be on the Admin UI.</p>
<p>The GuiPlugin is part of the <a href="/link/55fe410f4f65482cab72fb59d47c7561.aspx?documentId=cms/11/B8E2A80A">EPiServer.Plugin namespace</a>. This is where you define where the plugin will be displayed, the route URL it will use when clicked, and the text to be displayed.</p>
<p>When you build the project, Episerver will look at the decorators, and add a link to the Admin Tools menu.</p>
<p>Next is the Index ActionResult function.</p>
<pre class="language-csharp"><code>public ActionResult Index(string FilteredBy)
{
var viewmodel = new LocalObjectCacheViewModel();
var cachedEntries = HttpContext.Cache.Cast<DictionaryEntry>();
switch (FilteredBy)
{
case "pages":
viewmodel.CachedItems = cachedEntries.Where(item => item.Value is PageData);
break;
case "content":
viewmodel.CachedItems = cachedEntries.Where(item => item.Value is IContent);
break;
default:
viewmodel.CachedItems = cachedEntries;
break;
}
viewmodel.FilteredBy = FilteredBy;
viewmodel.Choices = new[]
{
new SelectListItem { Text = "All Cached Objects", Value = "all" },
new SelectListItem { Text = "Any Content", Value = "content" },
new SelectListItem { Text = "Pages Only", Value = "pages" }
};
return View("~/Features/LocalObjectCache/LocalObjectCache.cshtml", viewmodel);
}</code></pre>
<p>This is the function that is called when you click the link in the Tools menu.</p>
<p>It first creates a new instance of the LocalObjectCacheViewModel, gets the list of cached items, filters the list of a filter is passed to it if appropriate, and sets up the filter options in the Choices select list IEnumerable. Then returning the view to be rendered.</p>
<p>And then we come to the RemoveLocalCache and RemofeLocalRemoteCache functions. These functions take an array of the cache keys from the selected items, and loops over the array to remove each key from the cache using the ISynchronizedObjectInstanceCache.RemoveLocal or ISynchronizedObjectInstanceCache.RemoveRemote functions.</p>
<pre class="language-csharp"><code>[HttpParamAction]
public ActionResult RemoveLocalCache(string[] cacheKey, LocalObjectCacheViewModel model)
{
if (cacheKey != null)
{
foreach (string key in cacheKey)
{
cache.RemoveLocal(key);
}
}
return RedirectToAction("Index");
}
[HttpParamAction]
public ActionResult RemoveLocalRemoteCache(string[] cacheKey)
{
if (cacheKey != null)
{
foreach(string key in cacheKey)
{
cache.RemoveLocal(key);
cache.RemoveRemote(key);
}
}
return RedirectToAction("Index");
}</code></pre>
<p>There is also a function to remove the Local and Remote cache items, although as I mentioned above, this is not necessarily the best way to clear the remote cache, although it should work. Please be aware that this option will generate a lot of traffic between the servers that could negatively affect the site performance. Use this option with caution.</p>
<p>I’m using a foreach loop to target specific keys, which is handy, but is also the reason why the RemoveLocalRemoteCache acts on both the local and remote servers. If you were to clear the local cache first, you wouldn’t have the cache keys to send to the remote server.</p>
<p>Another element that I need to mention is the [HttpParamAction] decorator. One of the challenges that I faced here was that I wanted to have two separate submit buttons, that submitted the same data to different ActionResult functions in the controller.</p>
<p>A quick check on Google and StackOverflow showed several possible answers, but I thought the <a href="http://blog.ashmind.com/2010/03/15/multiple-submit-buttons-with-asp-net-mvc-final-solution/">solution by Andrey Shchekin was the best one. (This is an old blog, but it works great in this instance)</a></p>
<p>To make this functionality work, we need to add a new class to work with the HttpParamAction attribute.</p>
<pre class="language-csharp"><code>using System;
using System.Reflection;
using System.Web.Mvc;
namespace LOC.Cache
{
public class HttpParamActionAttribute : ActionNameSelectorAttribute
{
public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
{
if (actionName.Equals(methodInfo.Name, StringComparison.InvariantCultureIgnoreCase))
return true;
if (!actionName.Equals("Action", StringComparison.InvariantCultureIgnoreCase))
return false;
var request = controllerContext.RequestContext.HttpContext.Request;
return request[methodInfo.Name] != null;
}
}
}</code></pre>
<p>Here, we are looking for a controller action name of “Action”. If that is not found, it passes everything through as it was. If it is found, then it submits to the ActionResult function with the same name as the button, decorated with the [HttpParamAction] decorator. Slick!</p>
<p> </p>
<h2>The View</h2>
<p>Finally, the RAZOR view. This is based on the plug-in view template that was introduced in the Advanced Development course, to ensure that the page looks like it belongs in the Episerver Admin UI, and outputs that current local cached item keys and their type. If a filter is applied, the Name, ID, and Published date will be displayed.</p>
<p>This is also where we set the actionName value for the Html.BeginForm to the generic “Action” value, to get the correct function using the HttpParamAction class.</p>
<pre class="language-markup"><code>@using EPiServer.Framework.Web.Resources
@using System.Collections
@using EPiServer.Core
@model LOC.Cache.Models.ViewModels.LocalObjectCacheViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Local Object Cache</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Shell -->
@Html.Raw(ClientResources.RenderResources("ShellCore"))
<!-- Light Theme -->
@Html.Raw(ClientResources.RenderResources("ShellCoreLightTheme"))
<link href="~/App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
<link href="~/App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">
<style type="text/css">
.table-column-width {
width: 30%;
}
.stripe tbody tr:nth-child(even) {
background-color: #f0f2f2;
}
</style>
</head>
<body id="body">
@Html.Raw(Html.ShellInitializationScript())
<div class="epi-contentContainer epi-padding">
<div class="epi-contentArea">
<h1 class="EP-Prefix">
Local Object Cache
</h1>
<p class="EP-systemInfo">This tool shows all of the current local object cache, and allows the deletion of one or more cached items.</p>
</div>
<div class="epi-contentArea epi-formArea">
@using (Html.BeginForm("Index", "LocalObjectCache", FormMethod.Post))
{
<table class="table">
<tr>
<td>Filter By</td>
<td>@Html.DropDownListFor(m => m.FilteredBy, Model.Choices)</td>
<td>
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Refresh" type="submit" name="filter" id="filter" value="Filter" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" />
</span>
</td>
</tr>
</table>
}
@using (Html.BeginForm("Action", "LocalObjectCache", FormMethod.Post))
{
<div class="epi-buttonDefault">
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Delete" type="submit" name="RemoveLocalCache" id="RemoveLocalCache" value="Remove Local Cache Items" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" />
</span>
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Delete" type="submit" name="removeLocalRemoteCache" id="removeLocalRemoteCache" value="Remove Local and Remote Cache Items" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" />
</span>
</div>
<table class="table table-condensed table-bordered table-condensed stripe">
<thead>
<tr>
<th><input type="checkbox" id="clearAll" name="clearAll" onClick="toggle(this)" value="true" /></th>
<th class="table-column-width">Key</th>
<th class="table-column-width">Type</th>
<th class="table-column-width">@(string.IsNullOrWhiteSpace(Model.FilteredBy) ? "Value" : "Name (ID) Published")</th>
</tr>
</thead>
<tbody>
@foreach (DictionaryEntry item in Model.CachedItems)
{
<tr>
<td class="center"><input type="checkbox" id="@item.Key" name="cacheKey" value="@item.Key" /></td>
<td>@item.Key</td>
<td>@item.Value.GetType()</td>
<td>
@if (item.Value is IContent)
{
@((item.Value as IContent).Name)
<span class="badge badge-warning">@((item.Value as IContent).ContentLink.ID)</span>
}
@if (item.Value is PageData)
{
@((item.Value as PageData).StartPublish)
}
</td>
</tr>
}
</tbody>
</table>
<div class="epi-buttonDefault">
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Delete" type="submit" name="RemoveLocalCache" id="RemoveLocalCacheBottom" value="Remove Local Cache Items" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" />
</span>
<span class="epi-cmsButton">
<input class="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Delete" type="submit" name="removeLocalRemoteCache" id="removeLocalRemoteCacheBottom" value="Remove Local and Remote Cache Items" onmouseover="EPi.ToolButton.MouseDownHandler(this)" onmouseout="EPi.ToolButton.ResetMouseDownHandler(this)" />
</span>
</div>
}
</div>
</div>
<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('cacheKey');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
</body>
</html></code></pre>
<p> </p>
<p>Alright, it’s time to build and run the site. Log in as an administrator and navigate to the Admin UI. You should now see an option in the Admin -> Tools section labeled "Clear Local Object Cache".</p>
<p><img src="/link/69c448a9bce84d36b227080327acc245.aspx" /></p>
<p>If you want to remove a specific object, select the checkbox next to the key, and click the “Remove Local Cache Items” button. The RemoveLocalCache or RemoveLocalRemoteCache ActionResult functions in the LocalObjectCacheController will loop over all the selected cache keys and remove them.</p>
<p>Since this list can be very long, there is also a simple JavaScript function to check or uncheck all the checkboxes.</p>
<p>One other thing to note is that for this plug-in I am grouping all the code files together into a Features folder for easy maintenance and convenience. You don’t have to do that. These files can be organized into the standard MVC structure (Business, Controllers, Models, Views) if you prefer. If you do use the Features folder, then it would be a good idea to update the _ViewStart.cshtml and web.config files in the Features folder with the ones from your Views folder.</p>
<p>That’s it. There are probably several ways to accomplish this same functionality, and I would be excited to see something that uses the CacheEvictionPolicy and master keys for clearing cache on a remote server. Hopefully someone will find this useful. I know that I did.</p>
<p>All of the code is available on GitHub</p>
<p>https://github.com/jaytem/Episerver-LocalObjectCache</p>2019-02-28T17:42:35.0000000ZBlog post