Force clients to refresh JS/CSS files

6 March 2018

It's a common problem with an easy solution. You make some changes to a JavaScript of CSS file, but your users still report an issue due to the old version being cached.

You could wait for the browsers cache to expire, but that isn't a great solution. Worse if they have the old version of one file and the new version of another, there could be compatibility issues.

The solution is simple, just add a querystring value so that it looks like a different path and the browser downloads the new version.

Manually updating that path is a bit annoying though so we use modified time from the actual file to add the number of ticks to the querystring.

UrlHelperExtensions.cs

1using Utilities;
2using UrlHelper = System.Web.Mvc.UrlHelper;
3
4namespace Web.Mvc.Utils
5{
6    public static class UrlHelperExtensions
7    {
8        public static string FingerprintedContent(this UrlHelper helper, string contentPath)
9        {
10            return FileUtils.Fingerprint(helper.Content(contentPath));
11        }
12    }
13}

FileUtils.cs

1using System;
2using System.IO;
3using System.Web;
4using System.Web.Caching;
5using System.Web.Hosting;
6
7namespace Utilities
8{
9	public class FileUtils
10    {
11        public static string Fingerprint(string contentPath)
12        {
13            if (HttpRuntime.Cache[contentPath] == null)
14            {
15                string filePath = HostingEnvironment.MapPath(contentPath);
16
17                DateTime date = File.GetLastWriteTime(filePath);
18
19                string result = (contentPath += "?v=" + date.Ticks).TrimEnd('0');
20                HttpRuntime.Cache.Insert(contentPath, result, new CacheDependency(filePath));
21            }
22
23            return HttpRuntime.Cache[contentPath] as string;
24        }
25    }
26}

Sitecore: Data binding to a datasource rather than the context

16 January 2015

By default when you place a Sitecore control. e.g. on a page it will bind to the pages context item even if the rendering has had a Data Source set against it.

MVC - View Renderings

If your Sitecore solution is MVC based and you are using a View Rendering then this is simple. Make sure your view's model is set to Sitecore.Mvc.Presentation.RenderingModel and then pass Model.Item as the item parameter to the Sitecore HTML helper function for rendering a field.

1@using Sitecore.Mvc
2@using Sitecore.Mvc.Presentation
3 
4@model Sitecore.Mvc.Presentation.RenderingModel
5 
6<div>
7    <h2>@Html.Sitecore().Field("Title", Model.Item)</h2>
8    <div>@Html.Sitecore().Field("Content", Model.Item)</div>
9</div>

WebForms - Sublayouts

However if your Sitecore solution is using WebForms with sub-layouts then thing's get a little trickier. Unlike with the View Rendering there is no equivalent of Model.Item so a bit of work is required to get the Data Source Item.

If you check to see if the controls parent is a sublayout, you can then cast it as a sublayout and access the datasource property from their. You will then need to set the Item property of each of the Sitecore Controls in your sublayout. In this example the Sitecore Control is being referenced by controlled in the code.

1Item DataSource;
2if (Parent is Sublayout)
3   DataSource = Sitecore.Context.Database.GetItem(((Sublayout)Parent).DataSource);
4 
5controlId.Item = DataSource;

Sitecore MVC Page Editor: Combining a General Link with an Image

23 October 2014

Sitecore's Page Editor provides content authors a simple way to edit content, visually seeing the changes as they make them. To make fields on a page editable though the Page Editor simply use the field renderer function to put a field's content on the page. When the page is viewed in page editor mode the function will output all the necessary html and JavaScript to make the page editor functionality work.

1@Html.Sitecore().Field("Title", Model.Item)

But what if your page needs to render the contents of one field inside another? e.g. You could have a link on an image or a link surrounding a combination of other fields.

In an xslt rendering you could simply nest one tag within another:

1<sc:link field="Image Link">
2   <sc:image field="Image" />
3</sc:link>

When you click the item in the Page Editor the toolbar would then combine the icons for the General Link field and the Image field so that you can edit the image and update the link. But with a ViewRendering in MVC, the Razer syntax used for views doesn't support nesting items in this way.

Thankfully Sitecore have considered this and rather than using the Field function they have included a BeginField and EndField function. Between the two you can place your nested fields:

1@Html.Sitecore().BeginField("Image Link", Model.Item)
2@Html.Sitecore().Field("Image", Model.Item)
3@Html.Sitecore().EndField()

Unfortunately it doesn't quite work right. The page will render correctly and the toolbar will show both options, however editing anything results in the content disappearing until you refresh the page. Thankfully there is a work around to get it to work:

1@Html.Sitecore().BeginField("Image Link", Model.Item, new { haschildren = true })
2@Html.Sitecore().Field("Image", Model.Item)
3@Html.Sitecore().EndField()