ASP.NET/C#: Magic Menu Web App: Part Two

Posted on by

Part two of this series explores the starting page for the “Magic Menu” web app where we find the HTML code for our web form. It should be noted that this web app was built while studying the book “Beginning ASP.NET 4 in C# 2010” (MacDonald, Matthew. Beginning ASP.NET in C# 2010. USA: Apress, 2010) and uses similar concepts as a sample in the book, as well as some of its code bits and conventions.

Please check out part one before we get started if you like.

Default.aspx

We will begin with the opening information on the web form, which is quite similar to your standard HTML (XHTML 1.0) page.

The main ASP.NET differences are highlighted below:

  • the page directive which generally indicates the language to be used (C#) the name of your C# file to be used and the name of the custom page class which was left as the default, _Default
  • runat="server" is present in the <head> tag by default, which indicates that this tag can be manipulated by the C# code. This is called an HTML server control, a middle-ground if you will between regular HTML tags and ASP.NET’s web controls, feature-rich object-based representations of things that appear in a web app. We will get into web controls more below. This web app will not actually be changing anything in the <head> server control in this instance.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Magic Menu</title>
    <link href="magic_menu.css" rel="Stylesheet" type="text/css" />
</head>

On to the rest of the file, where we will find a <form> with some standard HTML markup interspersed with tags that look like HTML form elements, but are actually the web controls mentioned previously. These tags begin with <asp: and I’ve highlighted and analyzed a couple below.

<body>
    <!-- This application is based on the Beginning ASP.NET in C# 2010 Apress GreetingCardMaker sample for learning purposes -->
    <!-- This application also tries some custom exception handling and tracing -->
    <form id="form1" runat="server">
    <div>
    <h2>Magic Menu</h2>
    <!-- Menu creation -->
    Choose a background color:<br />
    <asp:DropDownList ID="lstBackColor" runat="server" Width="194px" Height="20px" /><br /><br />
    Choose a font color:<br />
...
    <asp:RadioButtonList ID="lstBorder" runat="server" Width="170px" Height="60px" /><br /><br />
...
    <asp:Button ID="cmdUpdate" OnClick="cmdUpdate_Click" runat="server" Width="71px" Height="24px" Text="Update" />
    <!-- Menu display -->
    <asp:Panel ID="pnlMenu" runat="server" width="400px" Height="500px" HorizontalAlign="Center">
    <h2>Magic Menu</h2>
    <hr /><br />
    <h3>Appetizer</h3>
    Sweet Potato Fries.....$4<br />
    Bruchetta.....$6<br />
...
    Baked Alaska.....$6<br /><br /><br /><br />
    <i>Ask your server about today's specials!</i>
    </asp:Panel>
    <!-- Exception display -->
    <asp:Panel ID="pnlException" runat="server" width="200px" Height="200px" HorizontalAlign="Left">
        <asp:Label ID="lblFontSizeException" runat="server" Text="" /><br /><br />
    </asp:Panel>
    </div>
    </form>
</body>
</html>

To add a web control to your page, ensure your Toolbox is visible by going to View | Other Windows. The Toolbox should dock on the left. Open the Toolbox and drag in the web control you wish to use, for example, above I used DropDownList. DropDownList will create an HTML drop-down list on the screen.

You will note in the code above however that we have not defined the items in the drop-down list. We will be defining this list in our C# code. For now, our DropDownList web control has an ID of lstBackColor, which is the name directly used from the book, and a naming convention I like, our runat="server" attribute, and a width and height. This width and height as well as other attributes can be added manually, or you can adjust them in the Properties panel, found in View | Other Windows and usually docked on the right.

The Button web control above has an attribute OnClick="cmdUpdate_Click". This indicates that on click of this button, we will call the function cmdUpdate_Click. This function is defined in our C# code as well.

Controls come in a variety of types which all represent HTML elements, including Button (<input type="submit" or "button"), Panel (div), and List. List represents DropDownList (<select>) and RadioButtonList (gathering of multiple <input type="radio") among others.

I think we’re ready to move on to that C# code in episode three!