Cost

There once was a time when the standard IDE for developing ASP.NET apps, Visual Studio, was prohibitively expensive for the average Joe. In late 2007, Microsoft released its first versions of ‘Express’ software, aimed at students and hobbyists. Though Express incarnations have fewer features than their full version cousins, they do offer the possibility of exploring ASP.NET. The Microsoft website offers a download page for Visual Web Developer 2008 Express Edition. An express version of SQL Server is also available, and can be downloaded from the SQL Server 2008 download page.

MVC Support

The MVC pattern is an established and well-recognised way of building web applications, and is familiar to RoR, Java and PHP developers. For many years, MVC was not available as a standard approach to developing ASP.NET websites, but Microsoft has recognised the deficiency and have (at the time of writing) released version 1.0 Release Candidate of ASP.NET MVC. The release has had a mixed response from the ASP.NET community, many of whom are used to the traditional code-behind model. Despite the inevitable squabbles as to which way is best, many have welcomed the MVC approach for its separation of concerns and finer control over JavaScript and markup. To find out more about the release candidate, head over to Scott Guthrie’s blog post.

Learning Resources

A big advantage for anybody learning a new technology is the wealth of learning material that is available. Although you can rely on a large number of books, the ASP.NET learn website contains many videos on both traditional and MVC ASP.NET as well as data access.

Intrinsic jQuery Support

The lightweight open source JavaScript library that’s taken the web by storm is now fully supported by Microsoft. As well as full intellisense support in Visual Studio, Microsoft will be using the library as-is, without forking or changing the code from the main jQuery branch. What’s more, Microsoft will be using jQuery as a basis for future ASP.NET and ASP.NET AJAX features. I feel this counters the argument of Microsoft not supporting open-source software.

Career Prospects

Microsoft’s ubiquity means that learning ASP.NET and supporting technologies will do no harm to your career prospects. .NET skills are ranked as some of the most in-demand in the UK.

An updated version of this post, containing full source for the control and explanation is available here.

Original Post

The guys over at Gravatar.com have been hard at work updating their service, and I’ve updated the ASP.NET control I developed to reflect the changes.

The maximum size of Gravatars has now been increased from 80 to 512, so there’s a code change in the Render method:

// if the size property has been specified, and in the range
// 1..512:
try
{
    // if it's not in the allowed range, throw an exception:
    if (Size < 1 || Size > 512)
        throw new ArgumentOutOfRangeException();
}
catch
{
    Size = 80;
}

So, a default of 80 will still be used if the value specified is not within the 1 to 512 range, or it is not specified, but allows for a larger size.

The avatar.php URL serving the images now supports abbreviation, but the code in the control has not been changed.

The image shows the Design time view of the control, with the width set at the default value of 80. I’ve checked the control at 512 pixels, but my Gravatar doesn’t look too good expanded out to that size, so I’ve decided to stick at size 80 for the screenshot!

An updated version of this post, containing full source for the control and explanation is available here.

Original Post

I just got myself a freshclickmedia.com Gravatar over at gravatar.com. A Gravatar is a little avatar associated with an email address, and quite a few blogs use them to decorate post comments. Signing up is easy – all you need to do is supply an email address, and image, and give your image a content rating.

The source of the gravatar image tag points to gravatar.com’s image generator and includes an MD5 hash of the email address to prevent email harvesting. A ‘max rating’ parameter prevents the display of unsavoury content.

There are a wide number of blogging gravatar plugins, so I decided to write an ASP.NET custom control to do the job. Here I present the control and its features.

Using the Control

To get up and running, the control requires an email address:

<fcm:Gravatar ID='Gravatar1' runat='server' Email='username@domain.com' />

For my email address, I get the following:

And if we look at the generated source:

<a id="Gravatar1" href="http://www.gravatar.com" title="Get your avatar"><img width="80" height="80" src="http://www.gravatar.com/avatar.php?gravatar_id=ccf3b8c638f15d005e5d070aeb1a3923&rating=G&size=80" alt="Gravatar" /></a>

The default produces a hyperlink off to the Gravatar site with a title “Get your avatar”. The image contains the MD5 email hash, a rating of “G” (suitable for all audience types), and a size of 80.

Customisation

The control supports a number of properties supporting the customisation of its output.

Size

The size property of the control can be in the range 1 to 80. If it is outside this range, a default of 80 will be used.

MaxAllowedRating

The ‘highest’ allowed rating of image.

• A G rated gravatar is suitable for display on all websites with any audience type.
• PG rated gravatars contain may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
• R rated gravatars may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
• X rated gravatars may contain hardcore sexual imagery or extremely disturbing violence.

OutputGravatarSiteLink

True by default, determines whether a hyperlink linking to the gravatar website will be output around the image.

LinkTitle

“Get your avatar” by default, allows the customisation of the ‘title’ attribute of the link (obviously doesn’t apply if OutputGravatarSiteLink property is set to false.)

DefaultImage

URL encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that gravatar has a rating higher than is allowed by the “MaxAllowedRating” property.

The code snippet below shows the associated properties.

<fcm:Gravatar ID="Gravatar1" runat="server"
    Email="username@domain.com"
    DefaultImage="http://www.site.com/default.jpg"
    OutputGravatarSiteLink="true" Size="40" />

Download and Get Started

You can download the Gravatar Custom Control here. Once you’ve extracted the assembly from the ZIP file, add to the Visual Studio toolbox by right clicking on the toolbox and selecting “Choose Items” from the context menu. Browse to the assembly (Freshclickmedia.Web.dll), and click “OK” to add.

In particular, it pays attention to:

• Deriving from the WebControl class, and customising the control’s output using the HtmlTextWriter class;
• Customising the control using properties;
• Adding the control to the Visual Studio toolbox and adding to a page;
• Dealing with Postback data;
• Validating the control like a typical web control

The TimePicker control is a drop down list containing times separated by a user-definable time-period, such as 15 minutes. The WebControl class provides a good foundation for custom control development in that it provides a number of methods, properties and events common to web controls in ASP.NET.

To start, create a new class library in Visual Studio. In this case, I’ll mimick the Microsoft naming standards and call it Freshclickmedia.Web.

To further mimick the Microsoft namespace hiearchy, I have created UI and WebControls folders.

One this has been done, right click on the project and select ‘add new item’. Add a new item of type ‘Web Custom Control’ called .

Once the new control has been added, there will be a lot of default, but unwanted code. Remove the class data so that you end up with something like this:

[ToolboxData("<{0}:TimePicker runat=server>")]
public class TimePicker : WebControl{protected override void RenderContents(HtmlTextWriter output)
{

}

The first line is an attribute that defines what text will be added to a webform when the control is dragged from the toolbox. More on this later.

The class contains a single overridden WebControl method, RenderContents. The HtmlTextWriter class parameter allows control developers to customise the HTML markup that is rendered by the control at runtime, and it is this method that we’ll look at first.

By default, a class inheriting from WebControl will have a default ‘outer’ HTML element of type Span. We’re looking to write a Select, so we’ll add a constructor to specify this outer HTML element type:

///
/// Constructor defining outer HTML element type
///
public TimePicker() : base( HtmlTextWriterTag.Select)
{

}

Now when the control is used, the outer tag will be of type Select, which is what we want. However, to output our times, we’ll need to go back to the RenderContents method. In this simple example, we’ll write out a list of times. Before we do this, we need to specify some properties as follows:

• The default text, such as ‘Select time’;
• The minute increment for the control
• The selected value on a Page postback

Shown below is the code for those properties. Note that each one uses the ViewState to persist the information across postbacks, and have default values of “Select Time”, 15, and string.Empty respectively.

///
/// Gets or sets the default selection text.
///
public string DefaultSelectionText
{
  get { return ViewState["DefaultSelectionText"] == null ? "Select time" : (string)ViewState["DefaultSelectionText"]; }
  set { ViewState["DefaultSelectionText"] = value; }
}

///
/// Gets or sets the minute increment.
///
public int MinuteIncrement
{
  get { return ViewState["MinuteIncrement"] == null ? 15 : (int)ViewState["MinuteIncrement"]; }
  set { ViewState["MinuteIncrement"] = value; }
}

///
/// Gets or sets the selected value.
///
public string SelectedValue
{
  get { return ViewState["SelectedValue"] == null ? string.Empty : (string)ViewState["SelectedValue"]; }
  set { ViewState["SelectedValue"] = value; }
}

To keep things simple, the RenderContents method will simply loop from 00:00 to the last available time, based on the MinuteIncrement property value. The code is shown below:

protected override void RenderContents(HtmlTextWriter writer)
{
  // write out the options:
  writer.Write("<option value=\"\"{0}>{1}</option>", string.IsNullOrEmpty(SelectedValue) ? " selected=\"selected\"" : "", DefaultSelectionText);

  int minuteIncrement = Convert.ToInt32(MinuteIncrement);

  // 24 hours in a day, 60 minutes in an hour, 24 * 60 = 1440
  for (int minuteLoop = 0; minuteLoop < 1440; minuteLoop += minuteIncrement)
  {
    // convert the minuteLoop value to a meaningful time:
    int hours = minuteLoop / 60;
    int leftOverMinutes = minuteLoop % 60;

    string time = string.Format("{0:00}:{1:00}", hours, leftOverMinutes);

    writer.Write( "<option{0} value=\"{1}\">{2}</option>", time == SelectedValue ? " selected=\"selected\"" : "", time, time);
  }

  base.RenderContents(writer);
}

The key points from the code are that a series of <option> tags are written to the browser. Some logic is included to determine whether the current option is the selected value, in which case a ‘selected’ attribute is written out for that option value.

Before using the control, let’s spend a moment on adding it to the toolbox, and also customising the default toolbox image for the control. To use a custom toolbox image, add a 16×16 image of type .bmp to the same directory as the control class. After the image has been added to the project, select properties and select the ‘Build Action’ to be ‘Embedded Resource’.

Once the control has been built, do the following to add the control to the toolbox.

1. [Optional] Right click on the toolbox and select ‘Add tab’. Enter a name for the tab and press enter.
2. Right click on a tab and select ‘Choose items…’
3. Browse for the control assembly
4. Click OK to add the control to the toolbox.

So, once the control has been added, using it is as simple as dragging it from the toolbox onto a web form.

<form id="form1" runat="server">
	<cc1:timepicker id="TimePicker1" runat="server"></cc1:timepicker>
	<asp:button id="Button1" runat="server" text="Submit"></asp:button>
</form>

The markup shown above shows a very simple ASPX page with a time picker control and a button that will initiate a postback.

When we view it in the browser, we get the following:

This all looks great – exactly what we wanted, but there is one huge remaining issue. If we click the submit button, the selected time is lost, so the control may look right, but functionally it’s rather useless if we can’t access the selected time, and the selected time doesn’t persist visually on the page across page postbacks.

To sort out the postback issue, we must implement 3 things:

• Derive our control from IPostBackDataHandler, and implement the 2 interface methods, LoadPostData and RaisePostDataChangedEvent.
• Output an HTML ‘name’ attribute to the rendering output so that the form can pick up the control’s submitted data.
• Call RegisterRequiresPostback to indicate that the control requires page postback data handling.

Implementing the IPostBackDataHandler interface results in the following class definition change:

public class TimePicker : WebControl, IPostBackDataHandler

The 2 interface methods, LoadPostData and RaisePostDataChangedEvent are coded as follows:

public virtual bool LoadPostData(string postDataKey, NameValueCollection values)
{
  SelectedValue = Convert.ToString(values[this.UniqueID]);
  return false;
}

public void RaisePostDataChangedEvent()
{
  // Part of the IPostBackDataHandler contract.  Invoked if we ever returned true from the
  // LoadPostData method (indicates that we want a change notification raised).  Since we
  // always return false, this method is just a no-op.
}

The LoadPostData retrieves information from the posted form data and assigns it to the SelectedValue property of the control.

The RaisePostDataChangedEvent method is an essential method here, since we’re inheriting from IPostBackDataHandler. However, it is only invoked if the LoadPostData method returns true, and in our case it returns false. Returning true can be used to raise event based on changed data, but that is beyond the scope of this tutorial.

We also need to output an HTML ‘name’ attribute to the control’s output, since this is what will be used to identify the control’s data when the form is posted to the server. To do this, override the base class’ AddAttributesToRender method:

protected override void AddAttributesToRender(HtmlTextWriter writer)
{
  writer.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID);
  base.AddAttributesToRender(writer);
}

The last thing is to override the base class’ OnPreRender method, to allow us to notify the page on which the control is hosted that the control requires post back handling:

protected override void OnPreRender(EventArgs e)
{
  base.OnPreRender(e);    

  if (Page != null)
  {
    Page.RegisterRequiresPostBack(this);
  }
}

Rebuilding will now fix the posting back issue, and the control will retain it’s selected value property.

Another issue with the control that’s very easy to implement is validation. Placing a RequiredFieldAttribute on the page and associating it to the TimePicker control will result in the following error:

To resolve this issue, simply add a ValidationProperty attribute to the control class:

[ValidationProperty("SelectedValue")]
public class TimePicker : WebControl, IPostBackDataHandler

Adding this simple line will give us nice co-operation with the ASP.NET validator controls.

So, that’s it for a simple custom control. In future, I’ll be doing something slightly more interesting, as I look at integrating JavaScript within a control.

It seems that the default session state method, in-proc, does not play well with directories being deleted. The session is invalidated as the app domain is recycled. This is new behaviour with version 2.0.

Of course, I’m not the only one who’s experienced such problems, and a suggestion to delete all the files in a directory can be found here.