ASP.NET AJAX

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.

ASP.NET: Event Log in IIS6/Server 2003

Brad — Thu, 06 Mar 2008 11:44:24 GMT

If you want to write to the Server's Event log from ASP.NET you'll first need to tweak some security settings. The first change is easy, however the second took me a while to find.

Step One:

Grant "Full Control" to the "IIS_WPG" group to the following registry key:

HKLM\SYSTEM\CurrentControlSet\Services\EventLog

Step Two:

One of the security restrictions added to IIS 6 under Windows Server 2003 was much tighter ACLs (Access Control Lists) on the event logs. This restricts what accounts can read and write to the logs (application, system & security). To overcome this you'll need to add the following value. Incase you're worried what security hole I'm opening up for you there's a breakdown of what it means at the end of the post.

(A;;0x0002;;;AU)

Add the above value to the end of the existing "CustomSD" value found at following path (pick relevant one):

HKLM\SYSTEM\CurrentControlSet\Services\EventLog\Application

HKLM\SYSTEM\CurrentControlSet\Services\EventLog\System

HKLM\SYSTEM\CurrentControlSet\Services\EventLog\Security

So mine went from:

O:BAG:SYD:(D;;0xf0007;;;AN)(D;;0xf0007;;;BG)(A;;0xf0007;;;SY)(A;;0x7;;;BA)(A;;0x7;;;SO)(A;;0x3;;;IU)(A;;0x3;;;SU)(A;;0x3;;;S-1-5-3)

to: (scroll to all the way to the right to see the change in bold):

O:BAG:SYD:(D;;0xf0007;;;AN)(D;;0xf0007;;;BG)(A;;0xf0007;;;SY)(A;;0x7;;;BA)(A;;0x7;;;SO)(A;;0x3;;;IU)(A;;0x3;;;SU)(A;;0x3;;;S-1-5-3)(A;;0x0002;;;AU)

The value being added is written in Security Descriptor Definition Language (SDDL) and is as follows:

A = Access allowed.
;; = token delimiter (don't know why there's two of them?)
0x0002 = Permission to write log files.
;;; = token delimiter (again - don't know why there's three of them?)
AU = Authenticated Users.

ASP.NET: Embed Images/JavaScript in a dll

Brad — Thu, 31 Jan 2008 08:42:57 GMT

Its good practice to separate out code that can be re-used into its own class library which can easy be referenced by other projects. Until now any resources such as images/JavaScript files that I'd created I needed to remember to copy to each web site that used the dll, ensuring that I created the correct directory structure so the paths would be correct. Then it dawned on me that you must be able to embed these files into the dll itself. Here's the steps I used to embed an image file for a AjaxControlTookit Calendar Extender that I was using in a custom server control (the same principle can be applied to any file you need - typically JavasScript and/or images will be embedded)

Step 1:

Add your file to the Class Library project

(in my example I added [PROJECT ROOT]/Resources/Calendar.png")

Step 2:

Select the newly added file and in the Properties window select:

Build Action = "Embedded Resource";

Step 3:

In the Project's AssemblyInfo.cs file add the following line:

//Replace "BradsNamespace" with the namespace of your project
//Replace "Resources" with the folder structure from the root of the project 
//to the file (using . instead of / )
//Replace "Calendar.png" with your file's name 
//Replace "img/png" with relevant type e.g. "text/javascript", "image/jpeg" etc
[assembly: System.Web.UI.WebResource(
    "BradsNamespace.Resources.Calendar.png", "img/png")]

Step 3:

Now retrieve the Url for the file:

Image CalendarImage = new Image();

CalendarImage.ImageUrl = Page.ClientScript.GetWebResourceUrl(
 this.GetType(),
 //Replace following with the string entered in AssemblyInfo.cs
 "BradsNamespace.Resources.Calendar.png");

Finished:

And that's it! Now when you run it .NET will generate the Url for you in the format:

src="/WebResource.axd?d=_Y_kbnu3Fp4-fBKDGxpOa-LgnKcgPOIASf1ExUjshsj3373650125705280"

AJAX: FileUpload control inside an UpdatePanel

Brad — Wed, 23 Jan 2008 21:53:31 GMT

UpdatePanels work fine with almost all controls, one control that it does 'break' however is FileUpload. If you try and upload a file it will seem to work - but if you check FileUpload.HasFile it will always return false. Rubbish if you've got an UpdatePanel in your MasterPage! However there is a solution, in fact it's not the UpdatePanel that breaks it, but the asynchronous PostBack instead. So a neat trick is to register the button you're using to cause the upload to use a normal PostBack. This can be done as follows:

this.ScriptManager.RegisterPostBackControl(btnUpload);

Then when the user clicks the upload button they'll get a normal PostBack (and therefore an uploaded file), while all the other controls on the page will continue to operate asynchronously - no need to re-jig the whole layout of the site.

AJAX: DataBinding Issue

Brad — Wed, 16 Jan 2008 17:22:30 GMT

I've just spent a while pulling my hair out trying to find out why some text in my repeater control wasn't updating after postback on one page but was on another. The repeater was in a UserControl I'd made, and the same control was on both pages - the only difference - once was inside an AJAX UpdatePanel and on the other page it wasn't.

Here's the offending code:

<ItemTemplate>
    <tr>
       <td><asp:Image runat="server" ImageUrl='<%# Eval("Image") "%>' ID="iImage" /></td>
       <td><%# Eval("Score") %></td>
       <td><%# Eval("Percentage") %></td>
    </tr>
</ItemTemplate>

Now what was strange is that the image was updating ok (this confused me a lot while viewing it as the image is a bar representing the percentage figure and i spent ages working out while the image was wrong - before i noticed that it was the figure that was wrong not the image!)

Once I changed it to the following it worked fine:

<ItemTemplate>
    <tr>
        <td><asp:Image runat="server" ImageUrl='<%# Eval("Image") "%>' ID="iImage" /></td>
        <td><asp:Literal runat="server" Text='<%# Eval("Score") %>' ID="lScore" /></td>
        <td><asp:Literal runat="server" Text='<%# Eval("Percentage") %>' ID="lPercent" /></td>
    </tr>
</ItemTemplate>

The page that wasn't working contained an UpdatePanel holding a Dropdown box that causes my UserControl to rebind its Repeater control... Does anyone know why rebinding in the standard page works in a normal postback but not when inside an AJAX UpdatePanel?

Firefox: Using an FCKeditor in an AJAX UpdatePanel

Brad — Mon, 14 Jan 2008 14:50:00 GMT

I've been using the .NET version of FCKeditor for some time, but recently changed the page layout, resulting in the FCKeditor instance now residing in an AJAX UpdatePanel. All was fine while using IE, but when I tested it in Firefox I noticed that the changed content in the FCKeditor wasn't getting saved to the database. It turns out its a JavaScript issue that effects Firefox and Safari.

I've been unable to find the perfect solution but in the meantime I discovered the following code does the trick - but unfortunately causes Firefox/Safari users to see a full post back - not just what's in the UpdatePanel.

if (Request.Browser.Browser.ToLower().Contains("firefox") || Request.Browser.Browser.ToLower().Contains("safari"))
        {
            ScriptManager sm = Master.FindControl("ScriptManager1") as ScriptManager;
            sm.RegisterPostBackControl(btnMySubmitButton);
        }

If anyone knows a better way to fix it please let me know!