Egil Hansen » ASP.NET

Simple Ping/Reply Service for Unit Testing AJAX/XHR requests

Egil Hansen — Thu, 09 Sep 2010 07:58:13 +0000

To make it easier for me to unit test a OData JavaScript library I am working, I created a small HTTP handler that will reply back to a AJAX request with the headers, HTTP verb and query string it received. My initial thought was to do this through a WCF service, and while this is certainly possible, I found it much easier just to create a simple HTTP handler.

The code for the AjaxPingHandler.cs handler looks like this:

using System.IO;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Web;
  
namespace ODataJS.services
{
    public class AjaxPingHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            var request = context.Request;
            var response = context.Response;
  
            // serialize PingReply object
            string jsonText = string.Empty;
            using (var ms = new MemoryStream())
            {
                var jsonSerializer = new DataContractJsonSerializer(typeof(PingReply));
                jsonSerializer.WriteObject(ms, new PingReply(request));
                jsonText = Encoding.Default.GetString(ms.ToArray());
            }
  
            // set content type to json
            response.ContentType = request.AcceptTypes.Contains("application/json") ? "application/json" : "text/javascript";
  
            // wrap in d object to avoid script injection
            jsonText = "{\"d\":{" + jsonText.Substring(1, jsonText.Length - 1) + "}";
  
            // output content
            response.Write(jsonText);            
        }
  
        public bool IsReusable
        {
            // To enable pooling, return true here.
            // This keeps the handler in memory.
            get { return false; }
        }
    }
}

As you can see, it uses the native .net DataContractJsonSerializer to serialize a custom class called PingReply. The ContentType return header is determined by the AcceptTypes request header. If the AcceptTypes array contains "application/json" the ContentType header is set to the same, otherwise we set the ContentType header to "text/javascript".

Just for good measure, the result data is wrapped in a dummy object { "d" : . }, just like .net’s JSON enabled services does it. It is not because I am terrible worried about script injection attacks when doing unit tests, but it makes the service behave more like other .net JSON services, which makes things consistent.

The PingReply.cs class:

using System.Linq;
using System.Runtime.Serialization;
using System.Web;
  
namespace ODataJS.services
{
    [DataContract]
    public class PingReply
    {
        [DataMember]
        public string HTTPVerb { get; set; }
  
        [DataMember]
        public JsonDictionary Headers { get; private set; }
  
        [DataMember]
        public JsonDictionary QueryString { get; private set; }
  
        public PingReply(HttpRequest request)
        {
            Headers = new JsonDictionary();
            QueryString = new JsonDictionary();
            foreach (var key in request.Headers.AllKeys.Where(x => x != null))
                Headers.Add(key, request.Headers[key]);
            foreach (var key in request.QueryString.AllKeys.Where(x => x != null))
                QueryString.Add(key, request.QueryString[key]);
  
            HTTPVerb = request.HttpMethod;
        }
    }
}

The only thing interesting about the PingReply class is that it uses the JsonDictionary class to return the headers and query string instead of the native .net Dictionary collection class. I decided to use the JsonDictionary class because it serializes to a proper JavaScript object, and not a array of one-element objects like the .net Dictionary. Carlos Figueira first published the JsonDictionary class over at the msdn forums.

The JsonDictionary.cs class:

using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
  
namespace ODataJS.services
{
    [Serializable]
    public class JsonDictionary : ISerializable
    {
        readonly Dictionary<string, object> _dict = new Dictionary<string, object>();
        public JsonDictionary() { }
        protected JsonDictionary(SerializationInfo info, StreamingContext context)
        {
            foreach (var entry in info)
            {
                _dict.Add(entry.Name, entry.Value);
            }
        }
  
        public void GetObjectData(SerializationInfo info, StreamingContext context)
        {
            foreach (string key in _dict.Keys)
            {
                info.AddValue(key, _dict[key], _dict[key] == null ? typeof(object) : _dict[key].GetType());
            }
        }
  
        public void Add(string key, object value)
        {
            _dict.Add(key, value);
        }
    }
}

To make it all work, you simply need to add the following to your web.config file:

<configuration>
  <system.web>
    <httpHandlers>
      <add verb="*" path="AjaxPing.ashx"
        type="ODataJS.services.AjaxPingHandler"/>
    httpHandlers>
  system.web>
  <system.webServer>
    <handlers>
      <add verb="*" path="AjaxPing.ashx"
        name="AjaxUnittestService"
        type="ODataJS.services.AjaxPingHandler"/>
    handlers>
  system.webServer>
configuration>

Then it is just a matter of querying AjaxPing.ashx and unit test against the reply from the service.

I hope this helps others who also want to produce better JavaScript code.

How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control

Egil Hansen — Sun, 30 Nov 2008 11:22:49 +0000

The problem is pretty simple. When using ASP.NET Themes you do not have much say in how your style sheets are rendered to the page.

The render engine adds all the style sheets you have in your themes folder in alphabetic order, using the

We all know the order of the style sheets are important, luckily asp.net’s shortcomings can be circumvented by prefixing the style sheets with 01, 02, … , 99, and thus forcing the order you want (see Rusty Swayne blog post on the technique for more information).

This is especially important if you use a reset style sheet, which I highly recommend; it makes it much easier to style a site in a consistent form across browsers (take a look at Reset Reloaded from Eric Meyer).

You also miss out of the possibility to specify a media type (e.g. screen, print, projection, braille, speech). And if you prefer to include style sheets using the @import method, you are also left out in the cold.

Another missing option is Conditional Comment, which is especially useful if you use an “ie-fix.css” style sheet.

Before I explain how the StylePlaceHolder and Style control resolve the above issues, credit where credit is due, my solution is inspired by Per Zimmermann’s blog post on the subject.

The StylePlaceHolder control is placed in the header section of your master page or page. It can host one or more Style controls, and will remove styles added by the render engine by default, and add its own (it will only remove styles added from the current active theme).

The Style control can both host inline styles in-between it’s opening and closing tags and a reference to a external style sheet file through its CssUrl property. Through other properties you control how the style sheet it renders to the page.

Let me show an example. Consider a simple web site project with a master page and a theme with three style sheets – 01reset.css, 02style.css, 99iefix.cs. Note: I have named them using prefixing technique described earlier, as it makes for a better design time experience. Also, the tag prefix of the custom controls is “ass:”.

In the master page’s header section, add:

 ID="StylePlaceHolder1" runat="server" SkinID="ThemeStyles" />

In your theme directory, add a skin file (e.g. Styles.skin) and add the following content:

 runat="server" SkinId="ThemeStyles">
     CssUrl="~/App_Themes/Default/01reset.css" />
     CssUrl="~/App_Themes/Default/02style.css" />
     CssUrl="~/App_Themes/Default/99iefix.css" ConditionCommentExpression="[if IE]" />
>

That is basically it. There are a more properties on the Style control that can be used to control the rendering, but this is the basic setup. With that in place, you can easily add another theme and replace all the styles, since you only need to include a different skin file.

The following is the code for the Style control:

using System.ComponentModel;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
 
[assembly: TagPrefix("Assimilated.Extensions.Web.Controls", "ass")]
namespace Assimilated.WebControls.Stylesheet
{
    [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
    [AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
    [DefaultProperty("CssUrl")]
    [ParseChildren(true, "InlineStyle")]
    [PersistChildren(false)]
    [ToolboxData("<{0}:Style runat=\"server\">")]
    [Themeable(true)]
    public class Style : Control
    {
        public Style()
        {
            // set default value... for some reason the DefaultValue attribute do
            // not set this as I would have expected.
            TargetMedia = "All";
        }
 
        #region Properties
 
        [Browsable(true)]
        [Category("Style sheet")]
        [DefaultValue("")]
        [Description("The url to the style sheet.")]
        [UrlProperty("*.css")]
        public string CssUrl
        {
            get; set;
        }
 
        [Browsable(true)]
        [Category("Style sheet")]
        [DefaultValue("All")]
        [Description("The target media(s) of the style sheet. See http://www.w3.org/TR/REC-CSS2/media.html for more information.")]
        public string TargetMedia
        {
            get; set;
        }
 
        [Browsable(true)]
        [Category("Style sheet")]
        [DefaultValue(EmbedType.Link)]
        [Description("Specify how to embed the style sheet on the page.")]
        public EmbedType Type
        {
            get; set;
        }
 
        [Browsable(false)]
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public string InlineStyle
        {
            get; set;
        }
 
        [Browsable(true)]
        [Category("Conditional comment")]
        [DefaultValue("")]
        [Description("Specifies a conditional comment expression to wrap the style sheet in. See http://msdn.microsoft.com/en-us/library/ms537512.aspx")]
        public string ConditionalCommentExpression
        {
            get; set;
        }
 
        [Browsable(true)]
        [Category("Conditional comment")]
        [DefaultValue(CommentType.DownlevelHidden)]
        [Description("Whether to reveal the conditional comment expression to downlevel browsers. Default is to hide. See http://msdn.microsoft.com/en-us/library/ms537512.aspx")]
        public CommentType ConditionalCommentType
        {
            get; set;
        }
 
        [Browsable(true)]
        [Category("Behavior")]
        public override string SkinID { get; set; }
 
        #endregion
 
        protected override void Render(HtmlTextWriter writer)
        {            
            // add empty line to make output pretty
            writer.WriteLine();
 
            // prints out begin condition comment tag
            if (!string.IsNullOrEmpty(ConditionalCommentExpression))
                writer.WriteLine(ConditionalCommentType == CommentType.DownlevelRevealed ? "" : "");
            }
        }
    }
 
    public enum EmbedType
    {        
        Link = 0,
        Import = 1,
    }
 
    public enum CommentType
    {
        DownlevelHidden = 0,
        DownlevelRevealed = 1
    }
}

And the code for the StylePlaceHolder control:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
 
[assembly: TagPrefix("Assimilated.Extensions.Web.Controls", "ass")]
namespace Assimilated.WebControls.Stylesheet
{
    [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
    [AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
    [DefaultProperty("SkinID")]
    [ToolboxData("<{0}:StylePlaceHolder runat=\"server\" SkinID=\"ThemeStyles\">")]
    [ParseChildren(true, "Styles")]
    [Themeable(true)]
    [PersistChildren(false)]
    public class StylePlaceHolder : Control
    {
        private List<Style> _styles;
 
        [Browsable(true)]
        [Category("Behavior")]
        [DefaultValue("ThemeStyles")]
        public override string SkinID { get; set; }
 
        [Browsable(false)]
        public List<Style> Styles
        {
            get
            {
                if (_styles == null)
                    _styles = new List<Style>();
                return _styles;
            }
        }
 
        protected override void CreateChildControls()
        {
            if (_styles == null)
                return;
 
            // add child controls
            Styles.ForEach(Controls.Add);
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
 
            // get notified when page has finished its load stage
            Page.LoadComplete += Page_LoadComplete;
        }
 
        void Page_LoadComplete(object sender, EventArgs e)
        {
            // only remove if the page is actually using themes
            if (!string.IsNullOrEmpty(Page.StyleSheetTheme) || !string.IsNullOrEmpty(Page.Theme))
            {
                // Make sure only to remove style sheets from the added by
                // the runtime form the current theme.
                var themePath = string.Format("~/App_Themes/{0}",
                                              !string.IsNullOrEmpty(Page.StyleSheetTheme)
                                                  ? Page.StyleSheetTheme
                                                  : Page.Theme);
 
                // find all existing stylesheets in header
                var removeCandidate = Page.Header.Controls.OfType<HtmlLink>()
                    .Where(link => link.Href.StartsWith(themePath)).ToList();
 
                // remove the automatically added style sheets
                removeCandidate.ForEach(Page.Header.Controls.Remove);
            }
        }
 
        protected override void AddParsedSubObject(object obj)
        {
            // only add Style controls
            if (obj is Style)
                base.AddParsedSubObject(obj);
        }
 
    }
}

So what do you guys think? Is this a good solution to the asp.net theme problem? And what about the code? These two controls are my first attempt at writing custom server controls, so any input is very much welcome.

Get the code, including Visual Studio 2008 solution and .dll if you just want to use the controls.

Simply way of adding a default item to a data bound DropDownList

Egil Hansen — Thu, 31 Jul 2008 09:55:53 +0000

I have always found it too difficult to add a “Choose xxxxx” item to the top of a DropDownList, when the DropDownList binds to a ObjectDataSource, SqlDataSource or similar. I almost always ended up just feeding the DropDownList its content from the code behind, even though it felt like something that should be possible directly. The control do have a AppendDataBoundItems property, but most of the time you just end up with duplicated items.

Today I discovered the simplest and most elegant solution I’ve seen to date. One line of code in the code behind file is still required, but the elegance of DataSource controls is kept. In short, once the DropDownList has bound to its data source, add the “Choose xxxxx” item to the items collection of the DropDownList. The trick is to use the Insert method instead of the Add method, since the Insert method allows you to specify where the new item should be inserted, and not just added to the end of the item list.

In this example I use the OnDataBound event to insert the new item:

<asp:DropDownList ID="ddlCustomer" runat="server" 
    DataSourceID="odsCustomer" DataTextField="DisplayName" 
    DataValueField="CustomerId" OnDataBound="ddlCustomer_DataBound">
asp:DropDownList>

The code behind is just one line of code (excluding the method definition):

protected void ddlCustomer_DataBound(object sender, EventArgs e)
{
    ddlCustomer.Items.Insert(0, new ListItem("Choose a Customer", "0"));
}

System.Diagnostics + ASP.Net Web Site – remember to set compilerOptions=”/d:TRACE”

Egil Hansen — Tue, 03 Jun 2008 21:18:42 +0000

Today I was looking at Ukadc.Diagnostics, an extension to the System.Diagnostics namespace, and decided to build a test website myself to get more familiar with it. After reading through Ukadc.Diagnostics Reference Example I thought it would be a homerun in the first try, but it turns out that without adding compilerOptions="/d:TRACE" to each compiler in the compilers section in the Web.config, the tracing code is never compiled into the assemblies at runtime. Needless to say, I was scratching my head since my sample console application worked as expected the first time.

My compilers section ended up looking like this (it is located in the system.codedom section)

>
	 language="c#;cs;csharp" extension=".cs" 
            compilerOptions="/d:TRACE"
            warningLevel="4"
            type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
		 name="CompilerVersion" value="v3.5"/>
		 name="WarnAsError" value="false"/>
	>
	 language="vb;vbs;visualbasic;vbscript"
            compilerOptions="/d:Trace=true"
            extension=".vb"
            warningLevel="4" 
            type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
		 name="CompilerVersion" value="v3.5"/>
		 name="OptionInfer" value="true"/>
		 name="WarnAsError" value="false"/>
	>
>

Do note that this is not an issue with ASP.Net Web Applications, since they are precompiled. For more on the subject, MSDN has a great article which certainly saved me in this instance.

Safe way to convert UTC time to local time when databinding

Egil Hansen — Mon, 29 Oct 2007 17:43:18 +0000

After reading Scott Mitchell’s article Using Coordinated Universal Time (UTC) to Store Date/Time Values, I decided to do as he suggest and use UTC for a web application I’m building at work. All in all it is fairly easy to deal with UTC in the .NET Framwork. There is a DateTime.UtcNow you can use instead of the regular DateTime.Now property, and there is a DateTime.ToLocalTime method that will convert your UTC DateTime value to the local server time zone, even taking daylight savings time in to consideration. When converting the other way, the DateTime.ToUniversalTime method is provided.

With MsSQL’s getutcdate() function (instead of getdate()), just about everything is smooth sailing. The only problem I have encountered is when binding a to a ASP.NET server control. Scott suggests doing like this:

((DateTime) Eval("DateUpdated")).ToLocalTime()

This only works when DateUpdated is not null, which is not always the case in my application. To get around this, I created the following simple class and stuck it in my App_Code folder.

public static class Extensions
{
    /// 
    /// If object is a DateTime, it will convert
    /// the DateTime to local time.
    /// 
    /// 
    /// 
    public static object ToLocalTime(this object obj)
    {
        if (obj is DateTime)
            return ((DateTime)obj).ToLocalTime();
        else
            return obj;
    }
}

The method ToLocalTime(this object obj)uses the extension method feature in .NET 3.0, that allows you to extend the functionality of other class. Here I extend upon Object, adding a .ToLocalTime() method to it. This allows me to use it in ASP.NET server controls like this:

Eval("DateUpdated").ToLocalTime()

This works because Eval() returns a object, which is also the reason why I did not extend a more specific class.

Updating a control in a MasterPage from a UserControl

Egil Hansen — Thu, 05 Jul 2007 17:16:09 +0000

Problem: You have a control, for example a Label, in a MasterPage that you want to update from a UserControl added to a page that resides in the MasterPage’s ContentPlaceHolder control (see figure 1).

Figure 1: From MasterPage to UserControl

I was facing this problem a few months back on a project, where I had many different UserControls that was added to a limited number of pages, and all the pages had the same master page. I wanted an elegant way of updating the status label in my MasterPage while limiting the amount of redundant code. After googling around a bit, I ended up combining a few different solutions into the following.

Solution: The idea is to use the event system in .NET and give each UserControl an event that the UserControl can fire whenever it wants to update the status label. Pages that host the UserControl can then subscribe to the event and update the status label on the MasterPage when the event fires.

Here’s an overview of the solution

Declare a new event in the UserControl.
Declare a new event argument.
On the ASPX page, subscribe to the UserControls event and make an event handler that updates the status label on the master page.
Create a public property on the MasterPage for each access to the status label.

1: Declare a new event in the UserControl
To avoid declaring the event each time I added a new UserControl to my project, I created a new class UserControlBase, which extends System.Web.UI.UserControl, and made all UserControls extend this class, instead of the default System.Web.UI.UserControl. This way I could put all the redundant UserControl code in one file, and be done with it.

// Declare the event handler

public event EventHandler StatusLabelUpdateEvent;

/// 

/// Method for triggering the UpdateStatusEventArgs.

/// 

/// Status message to pass to the subscribers

protected void UpdateStatusLabel(string message)

{

    // Copy to a temporary variable to be thread-safe.

    EventHandler temp = StatusLabelUpdateEvent;

    if (temp != null)

        temp(this, new UpdateStatusEventArgs(message));

}

And here is the code for the UserControl (notice the new : UserControlBase in the class declaration):

public partial class UserControls_UpdateStatusUserControl : UserControlBase

{

    protected void Page_Load(object sender, EventArgs e) { }

    protected void submitButton_Click(object sender, EventArgs e)

    {

        base.UpdateStatusLabel(messageTextBox.Text);

    }

}

2: Declare a new event argument
I also needed to create an new class â€“ UpdateStatusEventArgs, which extends System.EventArgs, so the UserControls would be able to pass an message back to the ASPX page that can then update the status label.

/// 

/// A status label event args class.

/// 

public class UpdateStatusEventArgs : EventArgs

{

    // private fields

    private string _message;

    /// 

    /// Create an Status Label Event Args with a string

    /// message and default type is StatusType.OK.

    /// 

    public UpdateStatusEventArgs() { }

    /// 

    /// Create an Status Label Event Args with a

    /// string message and default type is StatusType.OK.

    /// 

    /// Update message

    public UpdateStatusEventArgs(string message)

    {

        _message = message;

    }

    /// 

    /// Get/set status message

    /// 

    public string Message

    {

        get { return _message; }

        set { _message = value; }

    }

}

3: On the ASPX page, subscribe to the UserControls event.
On my ASPX page I do two simple things. First I declare my master page through the MasterPage directive, just below Page directive, like so:

<%@ MasterType VirtualPath=”~/MasterPage.master” %>

This provides me with a strongly typed reference to my master page, which makes it a breeze to access properties and methods on it.

In the code behind file I subscribe to the user controls update event, and in my event handler update the status label on the master page.

protected void Page_Load(object sender, EventArgs e)

{

    LoadUserControl();

}

/// 

/// Loads user control in to the ContentPlaceHolder.

/// 

private void LoadUserControl()

{

    // Declare usercontrol

    UserControlBase userControl;

    // Load correct usercontrol

    userControl =

    Page.LoadControl("~/UserControls/UpdateStatusUserControl.ascx")

    as UserControlBase;

    // Subscribe to StatusLabelUpdateEvent

    userControl.StatusLabelUpdateEvent +=

    new EventHandler(UpdateStatusLabelEvent);

    // Add it to the page

    PlaceHolder.Controls.Add(userControl);

}

// Event handler, used when a status label

// update request is being triggered

protected void UpdateStatusLabelEvent(object sender, UpdateStatusEventArgs e)

{

    Master.StatusLabel.Text = e.Message;

}

4: Create a public property on the MasterPage for each access to the status label.
The last thing I needed to make was a public property on the master page that returns a reference to the status label.

public Label StatusLabel

{

    get { return statusLabel; }

}

That’s it!

Please excuse the horrible source code in this blog post, I haven’t found a good plugin to do this probably for me yet. I have created a Visual Studio example project, it might be easier to read the code if you just download that and view the source code from Visual Studio.