Thursday, January 31, 2008

ASP.NET: Binding alphabet to dropdown list

Update: Added VB code.

There may be some cases where you want a DropDownList to list all the letters in the alphabet (i.e. A - Z). Rather than add the letter individually (through using <asp:ListItem>) you can create an ArrayList and bind to that.

In your ASPX page:

<asp:DropDownList ID="Letters" DataSource='<%# Alphabet %>' runat="server" />

In your code behind. Create your Alphabet property:

private ArrayList _Alphabet;
protected ArrayList Alphabet
{
 get
 {
  if (_Alphabet == null)
  {
   _Alphabet = new ArrayList();
   for (int i = 65; i < 91; i++)
   {
    _Alphabet.Add(Convert.ToChar(i));
   }
  }
  return _Alphabet;
 }
}
Protected ReadOnly Property Alphabet() As ArrayList
 Get
  If _Alphabet Is Nothing Then
   _Alphabet = New ArrayList()
   For i As Integer = 65 To 91 - 1
    _Alphabet.Add(Convert.ToChar(i))
   Next
  End If
  Return _Alphabet
 End Get
End Property

Bind on Page_Load:

private void Page_Load(object sender, EventArgs e)
{
 if(!Page.IsPostBack)
 {
  DataBind();
 }
}
Public Sub Page_Load() Handles MyBase.Load
 If Not Page.IsPostBack Then
  DataBind()
 End If
End Sub

This will show A - Z (capitals) in the dropdown. For a - z (lower case), change 65 to 97 and 91 to 123 in Alphabet

Tuesday, January 08, 2008

Adding rounded corners to your web pages

There are several ways of adding rounded corners to your web page. There is a large list of methods found at Rounded Corners - css-discuss, but also a few other ways using JavaScript (some using jQuery):

  • The first (as far as I am aware) jQuery corner plugin (Dave Methvin)
  • An improved version (Mike Alsup) of the above plugin
  • curvyCorners - anti-aliased corners, supporting borders and background images
  • A modified version of curvyCorners made to work with jQuery.
  • The above plugin was rather big and couldn't be packed, so someone else made a futher modification that reduced its size and enabled it to be packed.
  • Cornerz - smooth, anti-aliased corners. Another jQuery plugin. Anti-aliased, but does not support backgrounds.
  • Rounded corners using <canvas>. <canvas> is a way of drawing/manipulating images via scripting (e.g. draw vector images, transformation, compositing, animations etc). There is a tutorial available on how to use it. Firefox 1.5+, Opera 9+, Safari only - excanvas adds support to Internet Explorer.

Implementations are not always heavily tested within different layouts and CSS, so while a preferred one may not work as expected, there should still be a way to add the effect (even if it involves more code).

A very light-weight way to do this would be via CSS 3 (as it supports multiple background images), but sadly only Safari supports this: demo. Could be some way off as the CSS 3 specification isn't finalized (but neither is CSS 2.1), although it is a useful feature that will likely not change (or be removed) and be adopted by newer versions of currently developed browsers (Firefox 3 and IE8 should hopefully have this).