ASP.Net Greeting Card

This exercise includes a simple example for dynamic e-card generator in Chapter 6 in the book of Beginning ASP.NET 4 in VB 2010. The web page is divided into two regions. On the left is an ordinary div tag containing a set of web controls for specifying card options. On the right is a Panel control that is used to display user-configurable text and picture. In this exercise, we are required to study the source codes provided in the book and modify this web site according to the following directions

• Download a zip file (GreetingCardMaker.zip) of source codes as provided.
• Unzip the source code in your working directory
• Start Microsoft Visual Studio .NET 2010 or Visual Web Developer 2010 Express.
• Select File > Open Web Site... and choose the directory “GreetingCardMaker”
• Open the Aspx file in Design mode and check all controls properties
• Add DrowDownList Contol right below the Border Style RadionButtonList. Change the Id (e.g. lstImage) and Width Property of Control. Above the list, type “Choose a image”. The dropdown list will contain the names (URLs) of images (Use the image under “image.zip” as provided).
• Add Image Control under the image DropDownList control and change the Id (e.g. imgPreview) and Width Property of Control See image.
• The lists of image items need to be initialized when the page is created the first time. Use Page_Load event handler and IsPostBack property of the Page class.
• To create Page_Load event handler in the code behind file (e.g. bmi.aspx.vb), Open the code behind file in Source view as the following figure. Select "Page Events" in the left drop down list and select "Load" Event in the right drop down list. It will create Page_Load event handler automatically. See image.
• Inside the Page_Load event handler, if the web page is not post back (which means the web page is firstly requested and loaded),
  • Add image items to the image DropDownList control
  • Initially select an image in the list using SelectedIndex property of the image DropDownList control (e.g. lstImage)
  • Set the ImageUrl property of the image controls (e.g. imgPreview and imgDefault) to the URL of the selected image
• The selected image in the image list is displayed in the Image Control when SelectedIndexChanged event occurs.
  • Set the AutoPostBack property of the image DropDownList control (e.g. lstImage) to True, in order to make the web page submitted automatically whenever SelectedIndexChanged event occurs.
  • Add SelectedIndexChanged event handler for the image list (e.g. lstImage).
  • Inside the SelectedIdexChanged event handler, Set the URL of the image controls (e.g. imgPreview and imgDefault) to the URL of the selected image in the image list
• If the Check Box “Add the Selected Picture” is checked, the selected image should be displayed in the right side of the Panel. See image.