C#

Updating EPiServer Version: Login Failed for User ''

Brad — Thu, 14 Aug 2008 14:27:16 GMT

I've just spent too long trying to upgrade EPiServer CMS 5 to SP2 but kept getting the following error:

Login failed for user ''. The user is not associated with a trusted SQL Server connection.

Turns out the problem was that EPiServerManager was pulling the connection string out of my web.config, but it appears it was ignoring the fact it specified an Integrated/Windows connection and was passing an empty SQL username to the database - hence the empty quote marks above. (cheers for your help Steve!)

Solution: Temporarily change the SQL connection string in the site's web.config to use an SQL username/password, perform the update and change the string back.

EPiServer: Dynamic SiteMap.xml generator for Google

Brad — Thu, 12 Jun 2008 10:09:22 GMT

Having stumbled across Google's Webmaster Tools a while ago it's been in the back of my mind to create a custom HttpHandler to dynamically create a (virtual) SiteMap.xml file that Google (and other search engines) can use as a reference when spidering my sites.

I thought I'd share the basic implantation as a starting point. Ideally you'd add a property to each EPiServer PageType page for "change frequency" and "priority" which the sitemap generator would then use, but for this basic version I've simply set the homepage to 1.0 (the maximum priority) with a daily change, and all other pages to 0.6 and weekly.

First declare the class and the required members:

public class SearchEngineSiteMap : IHttpHandler
{
    bool IHttpHandler.IsReusable
    {
        get { return true; }
    }
    void IHttpHandler.ProcessRequest(HttpContext context)
    {
        GenerateSiteMap(context);
    }

Next we need to configure the output stream, create an XmlTextWriter and the outer Xml block:

/// <summary>
/// Generate the SiteMap
/// </summary>
/// <param name="context"></param>
private void GenerateSiteMap(HttpContext context)
{
    //Set the response information
    context.Response.Expires = -1;
    context.Response.ContentType = "application/xml";
    Encoding encoding = new UTF8Encoding();
    context.Response.ContentEncoding = encoding;

    //Create an XMLTextWriter to build the XML, passing it the context's outputstream
    XmlTextWriter xmlTextWriter = new XmlTextWriter(context.Response.OutputStream, encoding);
    xmlTextWriter.Formatting = Formatting.Indented;
    xmlTextWriter.WriteStartDocument();

    //Write the root xml element
    xmlTextWriter.WriteStartElement("urlset");
    xmlTextWriter.WriteStartAttribute("xmlns");
    xmlTextWriter.WriteValue("http://www.sitemaps.org/schemas/sitemap/0.9");
    xmlTextWriter.WriteEndAttribute();

    //Get EPiServer's StartPage (not the RootPage!)
    PageData p = EPiServer.DataFactory.Instance.GetPage(PageReference.StartPage);

    //SiteMaps can only contain unique urls so maintain a list of added urls
    List<string> alreadyAddedUrls = new List<string>();

    //Now call recursive method to populate every published/visible etc page
    RenderNodesToSiteMap(
        context,
        xmlTextWriter,
        alreadyAddedUrls,
        p);

    //Close the root element
    xmlTextWriter.WriteEndElement();
    //end of document
    xmlTextWriter.WriteEndDocument();
    //finally close the XMLTextWriter
    xmlTextWriter.Close();
}

Finally we need to add a method that will be recursively called for each published page in the site:

/// <summary>
/// Recursively converts the given page into XML for use in the sitemap.
/// </summary>
/// <param name="context">Current Context</param>
/// <param name="xmlTextWriter">XMLTextWriter to write give page (p) to</param>
/// <param name="alreadyAddedUrls">List of Urls already added to the SiteMap</param>
/// <param name="p">The page to add to the sitemap</param>
private void RenderNodesToSiteMap(
    HttpContext context,
    XmlTextWriter xmlTextWriter,
    List<string> alreadyAddedUrls,
    PageData p)
{
    //Make sure the page is published
    if (PageDataUtilities.IsPagePublished(child))
    {
        //Get the page's 'Friendly' URL
        string url = PageDataUtilities.GetFriendlyUrl(p, true);

        // Make sure this URL is not in the XML already
        if (!alreadyAddedUrls.Contains(url))
        {
            //Add it ready to check later
            alreadyAddedUrls.Add(url);
            //Write the Url element
            xmlTextWriter.WriteStartElement("url");
            //Add the location (Url) attribute - making sure its encoded!
            xmlTextWriter.WriteElementString("loc", HttpUtility.HtmlEncode(url));
            //Add when it was last modified
            xmlTextWriter.WriteElementString(
                "lastmod",
                p.Changed.ToString("u", CultureInfo.InvariantCulture).Replace(" ", "T"));
            //If its the StartPage set the change frequency to daily
            //and the priority to 1
            if (p.PageLink == PageReference.StartPage)
            {
                xmlTextWriter.WriteElementString(
                "changefreq",
                "daily");
                xmlTextWriter.WriteElementString(
                    "priority",
                    "1.0");
            }
            else //Otherwise weekly and a lower priority
            {
                xmlTextWriter.WriteElementString(
                "changefreq",
                "weekly");
                xmlTextWriter.WriteElementString(
                 "priority",
                 "0.6");
            }
            //Close the URL node
            xmlTextWriter.WriteEndElement();
        }
        //Now loop through all the 
        foreach (PageData child in EPiServer.DataFactory.Instance.GetChildren(p.PageLink))
        {

            RenderNodesToSiteMap(
                context,
                xmlTextWriter,
                alreadyAddedUrls,
                child);

        }
    }

With all that done the last thing is to register it in the Web.config (inside the System.Web element) as follows:

<httpHandlers>
  ...
  <add 
    path="sitemap.xml" 
    verb="*" 
    type="MyLibrary.SearchEngineSiteMap, MyLibrary" />
  ...
</httpHandlers>

EPiServer: Get a Page's Friendly URL

Brad — Mon, 09 Jun 2008 11:33:10 GMT

As part of my Search Engine friendly SiteMap.xml generator (using a HttpHandler - expect a blog post shortly...) I needed to output the friendly URL for each page in the site. However a call to PageData.LinkURL returns the actual link to the page (example shown below), not a "friendly" one that gets displayed in the browser address bar, or in any Hyperlink within the site.

/MySite/Default.aspx?id=26&epslanguage=en-GB

I had a look through the EPiServer documentation and couldn't find anything obvious so resorted to creating my own method to do it (shown below). Simply pass the relevant PageData object to the function and it will return the page's Friendly URL. e.g. /mysite/en-GB/about-us

/// <summary>
/// Get a friendly URL for the given PageData object
/// </summary>
/// <param name="pd">The page to get the Friendly URL from</param>
/// <param name="Absolute">Return an absolute path</param>
/// <returns>The friendly Url for the given PageData object</returns>
public static string GetFriendlyUrl(PageData pd, bool Absolute)
{
    UrlBuilder url = new UrlBuilder(pd.LinkURL);
    //Call UrlRewriteProvider's ConvertToExternal method
    EPiServer.Global.UrlRewriteProvider.ConvertToExternal(
       url,
       pd.PageLink,
       UTF8Encoding.UTF8);
    if (!Absolute)
        return url.ToString();
    else
        return StringUtilities.GetBaseUrl() + url.ToString();           
}

If you want to use Absolute paths you'll need to add this method:

/// <summary>
/// Gets the base URL from the current Context.
/// </summary>
/// <returns></returns>
public static string GetBaseUrl()
{
    //First get the current port
    string Port = HttpContext.Current.Request.ServerVariables["SERVER_PORT"];
    if (Port == null || Port == "80" || Port == "443")
        Port = "";
    else //Its not a standard port so add it
        Port = ":" + Port;
    //Now get the protocol (http or https)
    string Protocol = HttpContext.Current.Request.ServerVariables["SERVER_PORT_SECURE"];
    if (Protocol == null || Protocol == "0")
        Protocol = "http://";
    else
        Protocol = "https://";
    //Finally combine the protocol, sever name and port
    string url = Protocol + HttpContext.Current.Request.ServerVariables["SERVER_NAME"] + Port;
    //EPiServer's url start with a / so remove the url if (when) it contains one
    if (url.EndsWith("/"))
        return url.Remove(url.LastIndexOf("/"));
    else
        return url;
}

C#: Google Map Server Control - Part 2 - Custom EPiServer Property

Brad — Mon, 09 Jun 2008 09:24:21 GMT

This post tells you how to take what I discussed in Part 1 and turn it into a custom EPiServer property, so CMS user's can simply enter a postcode and it will call of to Google's Local Search API, return the Coordinates for the postcode and plot a marker on the map. The user can then drag the marker for a more exact location, set the zoom level and finally the type of map (Normal, Satellite or Hybrid). The data is then rendered on the public site using the code from Part 1. The screenshot below show's how it will look in EPiServer (click the thumbnail for the full size version):

Creating a custom EPiServer property is relatively easy - although I think I've not quite got the hang of how to store the actual data. It must be converted to a string for storage in the database. I started to use an XmlSerializer but got confused (mainly as the JavaScript was doing my head in) as to where i should be doing the serialisation. Sadly the only example i could find on the net was how to create a custom property that was a string - about as much use as a chocolate fire guard! So here's my way of doing it - using a comma separated string (dirty I know!) - please feel free to show me the correct way.

EPiServer properties are split into two parts, the data and UI aspects. The first is how the data is persisted into the database, the second controls how the data is rendered to the page for both the public and on the edit page in the CMS.

1) CoordinateProperty.cs

Firstly mark your class with the following attribute:

[Serializable]
[PageDefinitionTypePlugIn(
    DisplayName = "Coordinate", 
    Description = "Coordinate for use with (Google) Map Control")]
public class CoordinateProperty : PropertyData

Next some properties to help control the map:

string _string;

public double? Latitude
{
    get
    {
        if (!string.IsNullOrEmpty(String) && String.Contains(','))
        {
            double temp = 0;
            if (double.TryParse(String.Split(',')[0].Trim(), out temp))
                return temp;
            else
                return null;
        }
        else
            return null;
     }
 }
public double? Longitude
{
    get
    {
        if (!string.IsNullOrEmpty(String) && String.Contains(','))
        {
            double temp = 0;
            if (double.TryParse(String.Split(',')[1].Trim(), out temp))
                return temp;
            else
                return null;
        }
        else
            return null;
    }
}
public int Zoom
{
    get
        {
        if (!string.IsNullOrEmpty(String) && String.Contains(','))
        {
            int temp = 0;
            if (int.TryParse(String.Split(',')[2].Trim(), out temp))
                return temp;
            else
                return 5;
         }
         else
            return 5;
    }
}
public string MapType
{
    get
    {
        if (!string.IsNullOrEmpty(String) && String.Contains(','))
            return String.Split(',')[3].Trim();
        else
            return "Map";
    }
}

Next the implementation for the abstract members of PropertyData.

public override PropertyDataType Type
{
    get { return PropertyDataType.LongString; }
}
public override Type PropertyValueType
{
    get { return this.GetType(); }
}
public override object Value
{
    get
    {
        if (this.IsNull)
            return null;
        else
            return this.String;
    }
    set
    {
        base.ThrowIfReadOnly();
        base.SetPropertyValue(value, delegate
        {
            this.String = value.ToString();
        });
    }
}
[XmlIgnore]
protected virtual string String
{
    get { return this._string; }
    set
    {
        base.ThrowIfReadOnly();
        if (PropertyData.QualifyAsNullString(value))
            base.Clear();
        else if ((this._string != value) || (this.IsNull))
        {
            this._string = value;
            base.Modified();
        }
    }
}
public override PropertyData ParseToObject(string str)
{
    XmlSerializer SerializerObj = new XmlSerializer(this.GetType());
    using (TextReader stream = new StringReader(str))
    {
        return (CoordinateProperty)SerializerObj.Deserialize(stream);
    }
}
public override void ParseToSelf(string str)
{
    String = str;
}
protected override void SetDefaultValue()
{
    this.String = ",,5,Map";
}
public override IPropertyControl CreatePropertyControl()
{
    return new CoordinatePropertyControl();
}

2) CoordinatePropertyControl.cs

With that done we now need to control how the above class is rendered. First we need to add the four Textboxes:

TextBox latitiude;
TextBox longitude;
TextBox zoom;
TextBox mapType;

Next some basic methods, the first just makes it easier further down the line, the second is required:

/// <summary>
/// Gets the CoordinateProperty instance for this IPropertyControl.
/// </summary>
/// <value>The property that is to be displayed or edited.</value>
public CoordinateProperty CoordinateProperty
{
    get { return PropertyData as CoordinateProperty; }
}
/// <summary>
/// Does the property support in page edit
/// </summary>
public override bool SupportsOnPageEdit
{
    get { return false; }
}

Next we need to provide code to display the Google Map in VIEW (public) mode, here we'll simply use the class we created in Part 1 of this post:

/// <summary>
/// Inherited. Create a controls for rendering the property in view mode.
/// </summary>
public override void CreateDefaultControls()
{
    //Check if the Latitude and Longitude have values
    if (this.CoordinateProperty.Latitude.HasValue && this.CoordinateProperty.Longitude.HasValue)
    {
        GoogleMap map = new GoogleMap();
        map.ID = "map";
        if (Width.IsEmpty)
            map.Width = new Unit(100, UnitType.Percentage);
        else
            map.Width = Width;
        if (Height.IsEmpty)
            map.Height = new Unit(400, UnitType.Pixel);
        else
            map.Height = Height;

        map.Latitude = this.CoordinateProperty.Latitude.Value;
        map.Longitude = this.CoordinateProperty.Longitude.Value;
        map.Zoom = this.CoordinateProperty.Zoom;
        map.MapType = this.CoordinateProperty.MapType;
        Controls.Add(map);
    }
}

Right that's the basics out of the way, now its time to control how the property is rendered in EDIT mode in the CMS, but first we need to add the JavaScript:

private const string JAVASCRIPT = @"
<script src=""http://maps.google.com/maps?file=api&amp;v=2&amp;key={0}"" type=""text/javascript""></script>
<script src=""http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key={1}"" type=""text/javascript""></script>
<script type=""text/javascript"">
var map;
var localSearch = new GlocalSearch();

function usePointFromPostcode(postcode, callbackFunction) {{
    localSearch.setSearchCompleteCallback(null, 
        function() {{
            if (localSearch.results[0])
            {{        
                var resultLat = localSearch.results[0].lat;
                var resultLng = localSearch.results[0].lng;
                var point = new GLatLng(resultLat,resultLng);
                callbackFunction(point, 17);
            }}else{{
                alert(""Postcode not found!"");
            }}
        }});    
    localSearch.execute(postcode + "", UK"");
}}

function mapLoad() {{
    if (GBrowserIsCompatible()) {{
    //check map not already created!
        if(!map)
        {{
        map = new GMap2(document.getElementById(""{5}""));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        var mType = document.getElementById(""{7}"").value;
        if(mType == ""Hybrid"")
            map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_HYBRID_MAP);
        else if(mType == ""Satellite"")
            map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_SATELLITE_MAP);
        else
            map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_NORMAL_MAP);

        GEvent.addListener(map, ""zoomend"", function(oldLevel, newLevel) {{
            //alert(""Old Zoom: "" + oldLevel + "" New Level: "" + newLevel);
            document.getElementById(""{6}"").value = newLevel;
        }});

        GEvent.addListener(map, ""maptypechanged"", function() {{
            document.getElementById(""{7}"").value = map.getCurrentMapType().getName();
            document.getElementById(""{6}"").value = map.getZoom();
        }});
        
        }}
    }}
}}

function addLoadEvent(func) {{
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {{
    window.onload = func;
  }} else {{
    window.onload = function() {{
      oldonload();
      func();
    }}
  }}
}}

function addUnLoadEvent(func) {{
    var oldonunload = window.onunload;
    if (typeof window.onunload != 'function') {{
      window.onunload = func;
    }} else {{
      window.onunload = function() {{
        oldonunload();
        func();
      }}
    }}
}}

function placeMarkerAtPoint(point, zoom)
{{
    if(!map)
    {{
        mapLoad();
    }}
    var marker = new GMarker(point, {{draggable: true}});
    GEvent.addListener(marker, ""dragstart"", function() {{
        map.closeInfoWindow();
    }});
    GEvent.addListener(marker, ""dragend"", function() {{
        LoadCoordinates(marker.getPoint(), document.getElementById('{2}'), document.getElementById('{3}'));
        marker.openInfoWindowHtml(""Lat: "" + marker.getPoint().lat() + ""<br />Lng: "" + marker.getPoint().lng());
    }});
    map.clearOverlays();
    map.addOverlay(marker);
    setCenterToPoint(point, zoom);
    LoadCoordinates(point, document.getElementById('{2}'), document.getElementById('{3}'));
}}

function setCenterToPoint(point, zoom)
{{
    map.setCenter(point, parseInt(zoom));
}}

function showPointLatLng(point)
{{
    alert(""Latitude: "" + point.lat() + ""\nLongitude: "" + point.lng());
}}
function LoadCoordinates(point, txtLat, txtLng)
{{
    txtLat.value = point.lat();
    txtLng.value = point.lng();
}}

addLoadEvent(mapLoad);
addUnLoadEvent(GUnload);
</script>";

private const string EXISTING = @"
<script type=""text/javascript"">
    placeMarkerAtPoint(new GLatLng({0},{1}),{2});
</script>";

/// <summary>
/// Create the controls needed to edit the property
/// </summary>
public override void CreateEditControls()
{
    //Create controls required to edit the property
    latitiude = new TextBox();
    longitude = new TextBox();
    zoom = new TextBox();
    mapType = new TextBox();
    Label lLat = new Label();
    Label lLong = new Label();
    Label lZoom = new Label();
    Label lMapType = new Label();
    Literal brk1 = new Literal();
    Literal brk2 = new Literal();
    Literal brk3 = new Literal();
    Literal brk4 = new Literal();
    Label lPost = new Label();
    TextBox txtPostCode = new TextBox();
    Button btn = new Button();
    Panel Div = new Panel();

    //Set the line break text.
    brk1.Text = "<br />";
    brk2.Text = "<br />";
    brk3.Text = "<br />";
    brk4.Text = "<br />";

    //Set the Latitude TextBox properties
    latitiude.ID = "latitiude";
    latitiude.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginLeft, "20px");
    latitiude.Width = new Unit(140, UnitType.Pixel);

    //Set the Longitude TextBox properties
    longitude.ID = "longitude";
    longitude.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginLeft, "20px");
    longitude.Width = new Unit(140, UnitType.Pixel);

    //Set the Postcode TextBox properties
    txtPostCode.ID = "postcode";
    txtPostCode.Width = new Unit(140, UnitType.Pixel);
    txtPostCode.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginLeft, "20px");
    txtPostCode.Style.Add("text-transform", "uppercase");

    //Set the MapType TextBox properties
    mapType.ID = "maptype";
    mapType.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginLeft, "20px");
    mapType.Width = new Unit(65, UnitType.Pixel);

    //Set the Zoom TextBox properties
    zoom.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginLeft, "20px");
    zoom.Width = new Unit(65, UnitType.Pixel);

    //Set the latitude label properties
    lLat.Text = "Latitude";
    lLat.Width = new Unit(60, UnitType.Pixel);
    lLat.Style.Add("float", "left");

    //Set the longitude label properties
    lLong.Text = "Longitude";
    lLong.Width = new Unit(60, UnitType.Pixel);
    lLong.Style.Add("float", "left");

    //Set the map type label properties
    lMapType.Text = "Map Type";
    lMapType.Width = new Unit(60, UnitType.Pixel);
    lMapType.Style.Add("float", "left");

    //Set the postcode label properties
    lPost.Text = "Post Code";
    lPost.Width = new Unit(60, UnitType.Pixel);
    lPost.Style.Add("float", "left");

    //Set the zoom label properties
    lZoom.Text = "Zoom";
    lZoom.Width = new Unit(60, UnitType.Pixel);
    lZoom.Style.Add("float", "left");
                    
    //Set the button properties
    btn.Text = "Look Up";
    
    //Set the map canvas
    Div.ID = "mapDiv";
    Div.Style.Add(System.Web.UI.HtmlTextWriterStyle.MarginTop, "20px");
    Div.Width = new Unit(400, UnitType.Pixel);
    Div.Height = new Unit(400, UnitType.Pixel);

    this.ApplyControlAttributes(latitiude);
    this.ApplyControlAttributes(longitude);
    this.ApplyControlAttributes(zoom);

    //Add the controls to the controls collection
    Controls.Add(lPost);
    Controls.Add(txtPostCode);
    Controls.Add(btn);
    Controls.Add(brk1);
    Controls.Add(lLat);
    Controls.Add(latitiude);
    Controls.Add(brk2);
    Controls.Add(lLong);
    Controls.Add(longitude);
    Controls.Add(brk3);
    Controls.Add(lZoom);
    Controls.Add(zoom);
    Controls.Add(brk4);
    Controls.Add(lMapType);
    Controls.Add(mapType);
    Controls.Add(Div);

    //Add the JavaScript required to render the google map
    if (!Page.ClientScript.IsClientScriptIncludeRegistered(typeof(CoordinatePropertyControl), "MAP"))
        Page.ClientScript.RegisterClientScriptBlock(typeof(CoordinatePropertyControl), "MAP", 
            string.Format(JAVASCRIPT,
            WebConfigurationManager.AppSettings["GoogleMapKey"], //0
            WebConfigurationManager.AppSettings["GoogleMapKey"], //1
            latitiude.ClientID, //2
            longitude.ClientID, //3
            "", //4
            Div.ClientID, //5
            zoom.ClientID, //6
            mapType.ClientID, //7
            PropertyData.Name //8
            ));

    //Add the onclick javascript to the postcode
    //lookup button
    btn.Attributes.Add("onclick", 
        string.Format("usePointFromPostcode(document.getElementById('{0}').value, placeMarkerAtPoint); return false;",
        txtPostCode.ClientID));

    //Make the map type and zoom textboxes
    //readonly as they are set by the google
    //map control.
    zoom.Attributes.Add("readonly", "true");
    mapType.Attributes.Add("readonly", "true");

    //Lastly populate the edit controls with values from the underlying CoordinateProperty
    this.SetupEditControls();
}

With that done we need to override the method which will populate the edit controls with values from the underlying CoordinateProperty (either default of from the database)

/// <summary>
/// Inherited. Initialize the value of the TextBox control.
/// </summary>
protected override void SetupEditControls()
{
    //Set the zoom and map type textbox values
    zoom.Text = CoordinateProperty.Zoom.ToString();
    mapType.Text = CoordinateProperty.MapType;

    //If the Latitude/Longitude have values set the relevant
    //textbox properties and add the GoogleMap Javascript
    if (CoordinateProperty.Latitude.HasValue && CoordinateProperty.Longitude.HasValue)
    {
        latitiude.Text = CoordinateProperty.Latitude.Value.ToString();
        longitude.Text = CoordinateProperty.Longitude.Value.ToString();

        if (!Page.ClientScript.IsStartupScriptRegistered(typeof(CoordinatePropertyControl), 
            "EXISTING"))
        {
            Page.ClientScript.RegisterStartupScript(typeof(CoordinatePropertyControl), 
                "EXISTING",
                string.Format(EXISTING,
                    latitiude.Text,
                    longitude.Text,
                    zoom.Text));
        }
    }
}

Finally we must override the method which sets the value of the underlying CoordinateProperty with values entered in the UI by the user:

/// <summary>
/// Inherited. Applies changes for the posted data to the page's properties when the RenderType property
/// is set to Edit.
/// </summary>
public override void ApplyEditChanges()
{
    base.SetValue(string.Format(CultureInfo.InvariantCulture, "{0},{1},{2},{3}", this.latitiude.Text, this.longitude.Text, this.zoom.Text, this.mapType.Text));
}

And that's it - put it all together and you'll be able to configure a Google Map 'widget' in EPiServer.

Oh - one small thing to note - the above JavaScript will only allow for ONE CoordinateProperty to be added to a PageType. If you add more than one to the same PageType it will break. If I get time I'll change it, but our current requirement is only for one map per page - sorry!

C#: Google Map Server Control - Part 1

Brad — Fri, 06 Jun 2008 15:17:03 GMT

Following on from my Google Analytics server control, I wanted make something "cooler", so creating a Server Control to render a Google Map control seemed ideal. Part 1 covers the creation of the this control, stay tuned for part 2 which will focus on creating a custom EPiServer property so it can be used in the EPiServer edit area, featuring Geocoding to lookup the coordinates from a UK post code, Map type selection and zoom level.

Anyway here's the generic bit that can be used on any site...

First off we need a set of basic properties to hold Latitude, Longitude, Zoom Level and Map Type:

public double Latitude
{
    get { return GetPropertyValue("Latitude", (double)0); }
    set { SetPropertyValue("Latitude", value); }
}
public double Longitude
{
    get { return GetPropertyValue("Longitude", (double)0); }
    set { SetPropertyValue("Longitude", value); }
}
public int Zoom
{
    get { return GetPropertyValue("Zoom", 5); }
    set { SetPropertyValue("Zoom", value); }
}
public string MapType
{
    get { return GetPropertyValue("MapType", "Map"); }
    set { SetPropertyValue("MapType", value); }
}

Next come's the rather complex looking JavaScript code. I've done it so that it will allow multiple controls to be placed on the same page. IMPORTANT: Make sure you {0} in COMMONJAVASCRIPT is your unique Google Maps/API Key, which is generated on a per domain basis.

private const string COMMONJAVASCRIPT = @"
        <script src=""http://maps.google.com/maps?file=api&amp;v=2&amp;key={0}"" type=""text/javascript""></script>
        <script src=""http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key={0}"" type=""text/javascript""></script>";
        
        private const string JAVASCRIPT = @"
        <script type=""text/javascript"">
        function GoogleMapLoad{6}() {{
          if (GBrowserIsCompatible()) {{
            var map = new GMap2(document.getElementById(""{3}""));
        
                if(""{5}"" == ""Hybrid"")
                   map.setCenter(new GLatLng({1},{2}), parseInt({4}), G_HYBRID_MAP);
                else if(""{5}"" == ""Satellite"")
                   map.setCenter(new GLatLng({1},{2}), parseInt({4}), G_SATELLITE_MAP);
                else
                   map.setCenter(new GLatLng({1},{2}), parseInt({4}), G_NORMAL_MAP);
                
                var point = new GLatLng({1},{2});
                map.addOverlay(new GMarker(point));
                map.addControl(new GMapTypeControl());
                map.addControl(new GLargeMapControl());
            }}
        }}
        </script>";

Next we need to override the default tag that the server control would typically render (span) with a div, so that the Google map has a "canvas".

//Google map must be rendered inside a <DIV> tag, so we'll override the default <SPAN>.
protected override HtmlTextWriterTag TagKey
{
    get
    {
        //Return DIV not SPAN
        return HtmlTextWriterTag.Div;
    }
}

And last but not least, the overloaded CreateChildControls(). Firstly we check to see if there are (valid) Latitude and longitude values, if there is we register two blocks of JavaScript. Notice the second block's key includes the controls ID - which allows multiple maps to be used on the same page. The first 'common' block will only be registered once regardless of how many maps on the page. The second block has five strings passed to it which include the Google API Key (stored in the AppSettings) the control's ClientID (so the map's canvas can be accessed) along with the lat/lng/zoom etc.

protected override void CreateChildControls()
{
    if (Latitude != 0 && Longitude != 0)
    {
        //Check if the COMMON google map javascript block has been registered
        if (!Page.ClientScript.IsClientScriptBlockRegistered(typeof(GoogleMap), "GoogleMap"))
            Page.ClientScript.RegisterClientScriptBlock(typeof(GoogleMap), "GoogleMap", COMMONJAVASCRIPT);

        //Check if the google map javascript block for THIS map has been registered
        if (!Page.ClientScript.IsClientScriptBlockRegistered(typeof(GoogleMap), "GoogleMap" + ID))
            Page.ClientScript.RegisterClientScriptBlock(typeof(GoogleMap), "GoogleMap" + ID, 
                string.Format(CultureInfo.InvariantCulture, JAVASCRIPT,
                        WebConfigurationManager.AppSettings["GoogleMapKey"], //0
                        Latitude,  //1
                        Longitude, //2
                        this.ClientID, //3
                        Zoom, // 4
                        MapType, //5
                        ClientID //6), 
                    false);

        //Now we need to add the google maps onload JavaScript function for THIS MAP ONLY (it its not be added already)
        if (!Page.ClientScript.IsStartupScriptRegistered(typeof(GoogleMap), "GoogleMapLoad" + ID))
            Page.ClientScript.RegisterStartupScript(typeof(GoogleMap), "GoogleMapLoad" + ID, string.Format("GoogleMapLoad{0}();", ClientID), true);

        //Now we need to add the google maps onUNload JavaScript function (it its not be added already)
        if (!Page.ClientScript.IsStartupScriptRegistered(typeof(GoogleMap), "GoogleMapUnload"))
            Page.ClientScript.RegisterStartupScript(typeof(GoogleMap), "GoogleMapUnload", "window.onunload = function () { GUnload(); };", true);
    }
    //now call the base controls Create Child Controls
    base.CreateChildControls();
}

UPDATED: Check out part 2 for how to use this with EPiServer.

C#: Google Analytics Server Control

Brad — Wed, 04 Jun 2008 11:20:35 GMT

Today I've been consolidating UserControls that I've found myself using in one EPiServer project after another into a nice Server Control library. One such control that gets used on every site (even non-EPiServer ones) is one which adds the Google Analytics JavaScript code to the page. I decided this would be the first UserControl to migrate.

Firstly I created a constant GoogleAnalyticsJavaScript which holds the JavaScript string to be added to the page. The only change I needed to make was to dynamically add the unique Google Analytics tracking code that was generated specifically for my domain. I could have stored this as a dynamic property in EPiServer, but decided that since it would hardly change, if ever, that the AppSettings would be a more suitable place. (This also makes the code more portable - sorry EPiServer!)

So I simply overrided the CreateChildControls and perform a quick check to make sure that there is a AppSetting with a Key of GoogleAnalyticsKey and that the script hasn't already been added to the page. Next i had to register it as a startup script (I chose startup script so it would be rendered near the end of body tag - perfect for situations where I want to add specific custom Google tracking to links within my page - I.e. downloads, RSS feeds etc. Registering a standard script block would appear at the top of the body meaning that custom link tracking wouldn't work).

The code listing is shown below:

public class GoogleAnalytics : InteraktingServerControl
{
    public const string GoogleAnalyticsJavaScript = @"
        <script type=""text/javascript"">
        /* Google TRACKING CODE */
        var gaJsHost = ((""https:"" == document.location.protocol) ? ""https://ssl."" : ""http://www."");
        document.write(unescape(""%3Cscript src='"" + gaJsHost + ""google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E""));
        </script>
        <script type=""text/javascript"">
        var pageTracker = _gat._getTracker(""{0}"");
        pageTracker._initData();
        pageTracker._trackPageview();
        /* Google TRACKING CODE */
        </script>";

    protected override void CreateChildControls()
    {
        //Make sure the Google Analytics key is set in the AppSettings
        //Also make sure the script hasn't been registered already
        if (!string.IsNullOrEmpty(WebConfigurationManager.AppSettings["GoogleAnalyticsKey"])
             && Page.ClientScript.IsStartupScriptRegistered(typeof(GoogleAnalytics), "GoogleAnalyticsKey" + ID))
        {
            Page.ClientScript.RegisterStartupScript(
                typeof(GoogleAnalytics),
                "GoogleAnalyticsKey" + ID,
                string.Format(
                    GoogleAnalyticsJavaScript, 
                    WebConfigurationManager.AppSettings["GoogleAnalyticsKey"]
                    )
                );
         }
        base.CreateChildControls();
    }
}

C# Register onUnload JavaScript programmatically in code-behind

Brad — Tue, 03 Jun 2008 14:22:59 GMT

Having just created a Google Map server control I spent some time trying to register the relevant unload scripts that the Google API demands. However there was no easy way to get access to the body tag, and I certainly didn't want to have to edit the body tag, adding runat="server" as that would ruin my nicely "wrapped" control, I simply want a developer to drag it out of their Visual Studio Toolbox and it work...

So after some thought I tried the following, which worked a treat:

//Now we need to add the google maps 
//ONUNLOAD JavaScript function (it its not be added already)
if (!Page.ClientScript.IsStartupScriptRegistered(
                 typeof(MyControl), "GoogleMapUnload"))
{
    Page.ClientScript.RegisterStartupScript(
        typeof(MyControl), 
        "GoogleMapUnload", 
        "window.onunload = function () { GUnload(); };", 
        true); 
}

So simply replace the GUnload(); with your own custom JavaScript - you get the idea....

EPiServer Language Selector

Brad — Wed, 28 May 2008 12:55:54 GMT

Today I needed to create a UserControl to allow a user to select to view the current page from a list of enabled languages. To begin with I thought it would be a fairly easy task, by simply calling GetLanguageBranches() in the DataFactory class. However this ONLY returns the versions of the page that have been translated, which didn't suit me as our requirement was that ALL (enabled) languages should be displayed in the language selector, and if a language version doesn't exist for the specific page then the fallback language be used.

So next I tried looping through the results from EPiServer.DataAbstraction.LanguageBranch.ListEnabled(); This seemed to be just what I needed, so I set about looping through all the languages, displaying a hyperlink for each, with the Text being the name of the language. The NavigateUrl property was much trickier - why is nothing ever simple!

So next I set about trying to return a language specific version of a page for each of my enabled languages, at first I tried using:

EPiServer.DataFactory.Instance.GetPage(
new LanguageSelector( [Language code here] )).LinkURL

This caused two problems, firstly this only works if the page exists in that language, with a LanguageNotFound exception thrown otherwise. So in the Catch block I tried:

EPiServer.DataFactory.Instance.GetPage(
LanguageSelector.FallBack( [Language code here] )).LinkURL

Much to my annoyance however, it always rendered to the currently selected language. My first thought was EPiServer's TemplatePage or a ControlAdapter were causing this when they generate the "FriendlyUrl", however while debugging I realised that the LinkUrl property of the PageData class had the incorrect language code as part of the query string. So it must use the current culture when generating the URL string, regardless of the actual page.

Enter Steve, who suggested I try setting the culture to that of the SPECIFIC language before getting a reference to the page and getting it's LinkUrl property, and bingo it worked! The only thing to remember is to make sure I set the culture back to the correct one at the end of the loop to make sure I didn't break anything further down the response.

Here's the code. I've not included the code listing for the LanguageItem class to keep the post short, but you should get the gist of what's going on...

if (!IsPostBack)
{
    //Create a list to hold LanguageItem's (which simply has 'Name'/'Url'/'ImageUrl' properties)
    List<LanguageItem> langs = new List<LanguageItem>();
    //Get the current culture as we'll need it later
    string currentCulture = EPiServer.Globalization.GlobalizationSettings.CultureLanguageCode;
    //Loop through every enabled language
    foreach (LanguageBranch lang in EPiServer.DataAbstraction.LanguageBranch.ListEnabled())
    {
        //Set the culture to the language of the link being constructed.
        EPiServer.Globalization.ContentLanguage.Instance.SetCulture(lang.LanguageID); 
        langs.Add(new LanguageItem(
        //The name of the language
        lang.Name,
        //Get the current page (but as we've set a new culture it will get the 
        //relevant lanaguage if it exists, or the fallback if doesn't.
        EPiServer.DataFactory.Instance.GetPage(CurrentPage.PageLink).LinkURL,
        //Finally generate the url to the Language's Image (e.g. a flag)
        string.Format("~/App_Themes/{0}/Images/Languages/{1}.gif", Page.Theme,  lang.LanguageID)));
    }
    //Finally set the culture back to the what it was at the beginning.
    EPiServer.Globalization.ContentLanguage.Instance.SetCulture(currentCulture); 
    //Set the LanguageItem list as the DataSource for the repeater and bind
    rLanguages.DataSource = langs;
    rLanguages.DataBind();
}

If anyone happens to know of a 'better' way of doing this please let me know... i spent ages trying to get it to work, and sadly EPiServer's documentation was non-existent. I also couldn't find any blogs/articles on how to do it, which is why i decided to share it with you all...

C#: Getting round the "Indexed Pixel Format Issue" in GDI+

Brad — Wed, 21 May 2008 09:49:04 GMT

If you've ever tried to manipulate images in C# using GDI+ you'll almost certainly have come across the following error at some point:

a graphics object cannot be created from an image that has an indexed pixel format

I know I have, and it took a fair bit of effort to find the solution so I thought I'd share it.

Here's a quick background on Pixel Formats... In 'Non Indexed' images, each pixel represents ONE colour. So a pixel might have a value &h0000FF (Red). In 'Indexed' images each pixel value is an index to a so-called 'palette' or 'colour table'. So a pixel might have a value of 3, which means use the colour in palette entry #3 for that pixel.

For some reason GDI+ doesn't support editing Indexed images (that use the palette/colour table approach).

Here's a simple work around which, if the Pixel Format is Indexed, will create a new (non-indexed) Bitmap image from the original image instance

Image original = Image.FromFile(SourceImagePath);

switch (original.PixelFormat)
{
   case System.Drawing.Imaging.PixelFormat.Undefined:
   case System.Drawing.Imaging.PixelFormat.Format1bppIndexed:
   case System.Drawing.Imaging.PixelFormat.Format4bppIndexed:
   case System.Drawing.Imaging.PixelFormat.Format8bppIndexed:
   case System.Drawing.Imaging.PixelFormat.Format16bppGrayScale:
   case System.Drawing.Imaging.PixelFormat.Format16bppArgb1555:

       // Create a new BitMap object using original Image instance
       original = new Bitmap(original);
       break;
}

URL Rewriting: ASP.NET HyperLink ImageUrl Bug

Brad — Tue, 20 May 2008 08:12:28 GMT

I've been experimenting with writing my own C# URL Rewriter using a HttpModule. It's surprisingly simple as .NET kindly has the following (where newURL is the path to the actual file) :

HttpContext.RewritePath(string newURL)

So this allows a URL such as:

/my-friendly-url

to actually point to:

/pages/content.aspx?id=5

Problem:

All was going well, but some pages were giving the following error for no apparent reason:

Cannot use a leading '..' to exit above the top directory.

After some investigation I tracked the problem down to any asp.net HyperLink controls that had an ImageUrl property set. More specifically those starting with a '~/', if I removed the tilde the problem went away. Suffice to say I wasn't entirely happy about this 'workaround' so set about looking for an answer to why it was happening, and a better solution.

Cause:

After what seemed like hours of googling I came across a great article (link at the end of this post) on 4guysfromRolla.com. The problem turns out to be a bug in the HyperLink control, whereby it 'double-resolves' the ImageUrl property (basically it doesn't check if the path has already been resolved further down the stack and calls base.ResolveClientUrl(imageUrl) every time).

Solution:

Thankfully the solution is impressively simple through the use of a .NET ControlAdapter. If you've not come across them before, ControlAdapters let you hook into (and/or alter) the rendering process of any control, without having to the change the implementation of it in every page (I don't want to have to change all my <asp:HyperLink /> definitions throughout my solution).

So to fix the problem i'm going to create a ControlAdapter (for all browsers - typically you'd use them for Browser specific rendering differences) that will override the HyperLink's render method, crucially not calling base.ResolveClientUrl(imageUrl), instead leaving the ImageUrl value 'as-is'. (see below)

public class HyperLinkControlAdapter : ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            HyperLink hyperlink = this.Control as HyperLink;
            if (hyperlink == null)
            {
                base.Render(writer);
                return;
            }

            // This code is copied from HyperLink.RenderContents (using
            // Reflector). References to "this" have been changed to
            // "hyperlink", and we have to render the begin and end tags.
            string imageUrl = hl.ImageUrl;
            if (imageUrl.Length > 0)
            {
                // Let the HyperLink render its begin tag
                hyperlink.RenderBeginTag(writer);

                Image image = new Image();

                // I think the next line is the bug. The URL gets
                // resolved here, but the Image.UrlResolved property
                // doesn't get set. So another attempt to resolve the
                // URL is made in Image.AddAttributesToRender. It's in
                // the callstack above that method that the exception
                // or improperly resolved URL happens.
                //image.ImageUrl = base.ResolveClientUrl(imageUrl);
                image.ImageUrl = imageUrl;

                imageUrl = hl.ToolTip;
                if (imageUrl.Length != 0)
                {
                    image.ToolTip = imageUrl;
                }

                imageUrl = hl.Text;
                if (imageUrl.Length != 0)
                {
                    image.AlternateText = imageUrl;
                }

                image.RenderControl(writer);

                // Wrap up by letting the HyperLink render its end tag
                hyperlink.RenderEndTag(writer);
            }
            else
            {
                // HyperLink.RenderContents handles a couple of other
                // cases if its ImageUrl property hasn't been set. We
                // delegate to that behavior here.
                base.Render(writer);
            }
        }
    }

Next we need to tell the web site to use the ControlAdapter, this is done by creating a .browser file in the App_Browsers folder:

<browsers>
    <browser refID="Default">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.HyperLink"
                     adapterType="MyProject.HyperLinkControlAdapter" />
        </controlAdapters>
    </browser>
</browsers>

And that's it, no more bug!

Worryingly Microsoft were first told about the bug in November 2006, yet in January 2007 set it's status to 'Closed (won't fix)'. Thankfully there is a nice fix/work-around.

Click here to read the 4guysfromRolla.com article.