ASP.NET ships with approximately 50 built-in controls that are organized into logical families. We can divide them into two major categories:

  • HTML Controls
  • Web Controls

HTML controls are as the name suggests are traditional HTML controls. Their properties 1:1 match with their HTML counter parts. On the other hand, Web controls are richer in functionality and provides a consistent object model. Which means they can be accessed in ASP.NET code as well as in the code behind file.

Greeting Card Generator Application

Here, we will create a web application that helps a user in creating & customizing a greeting card. When the application is run the first page should contain card customization settings as below:

Once the user has customized the settings & hit the update button the greeting card should be displayed as below:

You can download the solution of this example: [Download]

The web page needs to be divided into two regions. On the left would be an ordinary <div> tag containing a set of web controls for specifying card options. On the right a Panel control needs to be placed, which will contain two other controls: a label and an image control that are used to display user configurable text and a picture. This panel along with the text and picture represent the greeting card. Following Methods and properties might be useful:

Panel1.BackColor = Color.FromName("Blue");
Panel1.BorderStyle = (BorderStyle)converter.ConvertFromString("Double");
Label1.Font.Size =  Int32.Parse(TextBox1.Text);
Label1.Font.Name = DropDownList2.SelectedItem.Text;

Improving the Greeting Card Maker

ASP.NET pages have access to the full .NET class library. With a little exploration, you’ll find classes that might help the greeting-card maker, such as tools that let you retrieve all the known color names and all the fonts installed on the web server.

For example, you can fill the lstFontName control with a list of fonts using the InstalledFontCollection class. To access it, you need to import the System.Drawing.Text namespace. You also need to import the System.Drawing namespace, because it defines the FontFamily class that represents the individual fonts that are installed on the web server:

using System.Drawing;
using System.Drawing.Text;

Here’s the code that gets the list of fonts and uses it to fill the list:

// Get the list of available fonts, and add them to the font list.
InstalledFontCollection fonts = new InstalledFontCollection();
foreach (FontFamily family in fonts.Families)
{
  lstFontName.Items.Add(family.Name);
}

To get a list of the color names, you need to resort to a more advanced trick. Although you could hard-code a list of common colors, .NET actually provides a long list of color names in the System.Drawing.KnownColor enumeration. However, actually extracting the names from this enumeration takes some work.

The trick is to use a basic feature of all enumerations: the static Enum.GetNames() method, which inspects an enumeration and provides an array of strings, with one string for each value in the enumeration. The web page can then use data binding to automatically fill the list control with the information in the ColorArray. (You’ll explore data binding in much more detail in a few weeks).

Here’s the code that copies all the color names into the list box:

// Get the list of colors.
string[] colorArray = Enum.GetNames(typeof(KnownColor));
lstBackColor.DataSource = colorArray;
lstBackColor.DataBind();

You can use a similar technique to fill in BorderStyle options:

// Set border style options.
string[] borderStyleArray = Enum.GetNames(typeof(BorderStyle));
lstBorder.DataSource = borderStyleArray;
lstBorder.DataBind();

This code raises a new challenge: how do you convert the value that the user selects into the appropriate constant for the enumeration? When the user chooses a border style from the list, the SelectedItem property will have a text string like “Groove”. But to apply this border style to the control, you need a way to determine the enumerated constant that matches this text.

You can handle this problem in a few ways. (Earlier, you saw an example in which the enumeration integer was stored as a value in the list control.) In this case, the most direct approach involves using an advanced feature called a TypeConverter. A TypeConverter is a special class that is able to convert from a specialized type (in this case, the BorderStyle enumeration) to a simpler type (such as a string), and vice versa.

To access this class, you need to import the System.ComponentModel namespace:

using System.ComponentModel;

You can then add the following code to the cmdUpdate_Click event handler:

// Find the appropriate TypeConverter for the BorderStyle enumeration.
TypeConverter converter = TypeDescriptor.
GetConverter(typeof(BorderStyle));

// Update the border style using the value from the converter.
pnlCard.BorderStyle = (BorderStyle)converter.
ConvertFromString(lstBorder.SelectedItem.Text);

This code gets the appropriate TypeConverter (in this case, one that’s designed expressly to work with the BorderStyle enumeration). It then converts the text name (such as Solid) to the appropriate value (BorderStyle.Solid).

Generate the card automatically

The last step is to use ASP.NET’s automatic postback events to make the card update dynamically every time an option is changed. The Update button could now be used to submit the final, perfected greeting card, which might then be e-mailed to a recipient or stored in a database.

To configure the controls so they automatically trigger a page postback, simply set the AutoPostBack property of each input control to true. An example is shown here:

Choose a background color:<br />
<asp:DropDownList ID="lstBackColor" AutoPostBack="true" runat="server"
Width="194px" Height="22px"/>

Next, alter the control tags so that the changed event of each input control is connected to an event handler named ControlChanged. Here’s an example with the SelectedIndexChanged event or the drop-down list:

Choose a background color:<br />
<asp:DropDownList ID="lstBackColor" AutoPostBack="true" runat="server"
OnSelectedIndexChanged="ControlChanged" Width="194px" Height="22px"/>

You’ll notice that the name of the change event depends on the control. For example, the TextBox provides a TextChanged event, the ListBox provides a SelectedIndexChanged event, and so on.

TypeConverter converter = TypeDescriptor.
GetConverter(typeof(BorderStyle));

// Update the border style using the value from the converter.
pnlCard.BorderStyle = (BorderStyle)converter.
ConvertFromString(lstBorder.SelectedItem.Text);

This code gets the appropriate TypeConverter (in this case, one that’s designed expressly to work with the BorderStyle enumeration). It then converts the text name (such as Solid) to the appropriate value (BorderStyle.Solid).

Tagged with: C-SharpProgrammingSource Code
 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Related News Feeds

Set your Twitter account name in your settings to use the TwitterBar Section.