ASP.NET 3.5 - Tutorial - Calculator

Krzysztof Mossakowski

Tutorials

Goals:

Show an example of creating a simple ASP.NET application:
- using basic controls,
- using CSS,
- using themes and sking.

Steps:

Create a new ASP.NET Web Application project.
Add necessary controls (using the Design view of the page) and set their properties.
- The DropDownList can be filled using the Visual Designer.
- Visual Designer uses flow layout by default (i.e. controls are positioned from the left to the right, according to the width of the browser window). To position controls absolutely, use CSS styles.
- Add code for the event of pushing '=' button:
  
  protected void calculateButton_Click(object sender, EventArgs e)
  {
      resultTextBox.Text = "";
      double left, right;
      if (!double.TryParse(leftTextBox.Text, out left))
      {
          statusLabel.Text = "The first number is incorrect.";
      }
      else if (!double.TryParse(rightTextBox.Text, out right))
      {
          statusLabel.Text = "The second number is incorrect.";
      }
      else if (operatorDropDownList.SelectedValue == "/" && Math.Abs(right) < 1e-307)
      {
          statusLabel.Text = "Divide by 0";
      }
      else
      {
          double result = 0;
          switch (operatorDropDownList.SelectedValue)
          {
              case "+":
                  result = left + right;
                  break;
              case "-":
                  result = left - right;
                  break;
              case "*":
                  result = left * right;
                  break;
              case "/":
                  result = left / right;
                  break;
          }
          resultTextBox.Text = result.ToString();
          statusLabel.Text = "";
      }
  }
- Run the project.
Change the look of the page by using a .css file
- Add new 'Style Sheet' item to the project.
- Define background colour and a class that will be used by the label to change its font and colour, e.g.:
  
  body
  {
      background-color: #FFFF99;
  }
  
  .status
  {
      color: Maroon;
      font-family: Arial, Helvetica, sans-serif;
  }
- Note that Visual Studio has a built-in CSS visual editor:
- Drag the .css file from the 'Solution Explorer' window and drop it on the target form (or manually add the following line in the <head> section)
  <link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
- Set the 'CssClass' property of the statusLabel control to the name of the class created in the .css file.
  <asp:Label ID="statusLabel" runat="server" CssClass="status"></asp:Label>
- Do not recompile the page, just save it and refresh in the browser.
Note that there exist special validation controls (similar to those from Windows Forms) which can be used instead of manual changing a text of the Label control. Validation controls can be found in the 'Validation' group in the Toolbox window.
Understanding the postback mechanism ul>
RRemove items added to the DropDownList control using Visual Designer - open the page in the Source view and remove the following code:
<asp:ListItem>+</asp:ListItem>
<asp:ListItem>-</asp:ListItem>
<asp:ListItem>*</asp:ListItem>
<asp:ListItem>/</asp:ListItem>
Add the following code to the Page_Load method (in the Default.aspx.cs file):
protected void Page_Load(object sender, EventArgs e)
{
    operatorDropDownList.Items.Add("+");
    operatorDropDownList.Items.Add("-");
    operatorDropDownList.Items.Add("/");
    operatorDropDownList.Items.Add("*");
}
Compile the project and run (or just refresh the page in the browser). Note, that after making two calculations, there are 8 operators in the list - each calculation adds new 4 operators. To add operators only during the initial loading of the page, change the code to the following:
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        operatorDropDownList.Items.Add("+");
        operatorDropDownList.Items.Add("-");
        operatorDropDownList.Items.Add("/");
        operatorDropDownList.Items.Add("*");
    }
}
The IsPostBack property gets a value indicating whether the page is being loaded in response to the client's postback, or if it is being loaded and accessed for the first time.
Using themes.
- Add the App_Themes folder to the project (right click on the 'Solution Explorer' window, 'Add ASP.NET Folder' / Theme).
- Rename the new theme to 'RedTheme'.
- Add a skin file to the theme (right click on the theme in the 'Solution Explorer' window, 'Add New Item', 'Skin File').
- In the .skin file, add a normal control definition by using declarative syntax, but include only the properties that you want to set for the theme. The easiest way is to modify the look of a control on a normal page, copy generated code, and remove all properties which are not necessary.
- Add the CSS file to the theme (right click on the theme, 'Add New Item', 'Style Sheet') and modify the background color.
  body
  {
  background-color: Red;
  }
- A theme can be applied to all pages of the Web application by change settings in the web.config file:
  <configuration>
      <system.web>
          <pages theme="RedTheme" />
      </system.web>
  </configuration>
  or to individual pages by settings the 'Theme' attribute of the @Page directive
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
           Inherits="Calculator._Default" Theme="RedTheme"%>
- Create a new theme, analogous to the first one but green (the easiest way is to copy and paste a theme in the 'Solution Explorer' window), name it 'GreenTheme'. Modify color values to make green colors.
  <asp:TextBox runat="server" BackColor="#C0FFC0" BorderColor="Green" />
  <asp:DropDownList runat="server" BackColor="#C0FFC0" ForeColor="Green" />
  <asp:Button runat="server" BackColor="#C0FFC0" BorderColor="Green" ForeColor="Green" />
  
  body
  {
  background-color: #C0FFC0;
  }
The theme used by the page can be changed programmatically in the PreInit event:
- Add two HyperLink controls to allow the user to change a theme:
  <asp:HyperLink ID="HyperLink1" runat="server" Font-Bold="True"
  ForeColor="Green" NavigateUrl="~/Default.aspx?theme=green">Use GREEN theme</asp:HyperLink>
  <br />
  <asp:HyperLink ID="HyperLink2" runat="server" Font-Bold="True" ForeColor="Red"
  NavigateUrl="~/Default.aspx?theme=red">Use RED theme</asp:HyperLink>
  The NavigateUrl property set the target for the hyperlink. The '~' character points the root of the application, it will be translated during rendering output HTML code.
  The parameters string in the target address after the question mark character is so-called Query String.
- Add a handler for the PreInit event. Use the following code:
  protected void Page_PreInit(object sender, EventArgs e)
  {
      switch (Request.QueryString["theme"])
      {
          case "red":
              Page.Theme = "RedTheme";
              break;
          case "green":
              Page.Theme = "GreenTheme";
              break;
      }
  }

[Source code]