Home

Introduction to Web Controls

Fundamentals of Web Controls

Introduction

To let you create meaningful website, there are classes you can use in different categories. Probably the most fundamental class used in ASP.NET is called Server. Actually, this class is not directly from .NET. Instead, it represents the Internet Information Server, which is the fundamental webserver used in Microsoft Windows. In addition to classes built in IIS, the .NET Framework provides various classes with different goals.

Web Controls Fundamentals

To get a real interactive webpage, its form must contain objects named web controls. To support web controls, the .NET Framework provides a class for each web control. Normally, the web controls are created like HTML objects between the opening <form> and the closing </form> tags. As opposed to classic HTML Web controls, ASP.NET Web controls use a special formula for their tags. They start with <asp: followed by the name of the class. The most regularly used controls are:

Common Name ASP.NET Class Name Description
Label Label Displays text
HyperLink HyperLink Displays a link to a webpage
Bulleted List BulletedList Create a bulleted list
Table Table Allows creating an HTML table
Panel Panel Acts as a container for other controls
Button Button A command button used to perform an action
Image Image Displays a picture in a webpage
Image Button ImageButton Displays a picture as a button
Link Button LinkButton Displays a link on a button
Menu Menu Displays a JavaScript-like menu
Tree View TreeView Displays a tree-like list
Text Box TextBox Displays text or allows a visitor to type something
Range Validator RangeValidator Checks to find out whether a value is within a certain range (between a maximum and a minimum)
Required Field Validator RequiredFieldValidator Makes sure that a value is specified for a certain control
Check Box CheckBox A small square that can be checked/unchecked
List of Check Box CheckBox A group of check boxes
Radio Button RadioButton A small rounded box that a visitor can click
List of Radio Button RadioButtonList A container for radio buttons
Combo Box DropDownList Holds a list of items in a down-pointing arrow control
List Box ListBox Displays a list of items
Calendar Calendar Displays a one-month calendar
Data Grid DataGrid Displays a table or records
Data List DataList Displays a table or records
XML Xml Used to read and process an XML file
XML Data Source XmlDataSource Used to create a connection to a XML-based files and process them
Login Page ChangePassword Provides a webpage from where a visitor can log in
Password Changer ChangePassword Provides a webpage from where a password can be changed
Password Recovery PasswordRecovery Provides a webpage from where to request/process a password recovery
Mail Definition MailDefinition Provides a webpage that makes it easy to compose and send an email
Hidden Object HiddenField Control used to hold a value that doesn't need to be displayed
Sql Data Source SqlDataSource Makes it easy to create a connection to a Microsoft SQL Server database and get some records
List View ListView Data-based control that displays a list of columns and rows
Grid View GridView Data-based control that displays records in a list
Form View FormView Data-based control that displays records in a list

As it is normally done in webpages code, every tag must be closed. Based on this, a button would be created, or stared, as follows:

<asp:Button></asp:Button>

An alternative in closing a control tag is to end the start tag with a forward slash and omit the end tag. This can be done as follows:

<asp:Button />

Client and Server Processing

When creating an ASP.NET control for your web page, you must specify where its value(s) would be processed. This is done by adding the Runat (or runat) attribute to the start tag of the web control and give it a value of client or server. Here is an example:

<asp:Button runat="server"></asp:Button>

This attribute and its value must be applied to every Web control, including the form. The attribute should also be added to various types of elements, including the head. Here are examples:

The Method Used to Send Data

Introduction

When the user clicks a button used to collect information from a webpage, it is assumed that the information on the form is sent to the server. HTML allows you to specify how this information would be sent. To support this, the <form> tag is equipped with an attribute named method. This attribute can be assigned one of two values: get or post.

Getting the Data

In the <form> tag, you can add the method attribute and assign the get (or GET, this is not case-sensitive) value to it. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
<style type="text/css">

#formulation
{
    margin: auto;
    width:  200pt;
}
#main-title
{
    font-size:   18pt;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

</head>
<body>

<form class="codered">method="get" runat="server">
<div id="frmSquare">
    <p id="main-title">Geometry: Square</p>

    <% Response.Write("<p>A square is a flat geometric figure made of four equal sides and four right angles.</p>"); %>

<asp:Button runat="server"></asp:Button>
  </div>
</form>

</body>
</html>

If you do this, the information that is being sent would display in the address bar, starting with a question mark. Here is an example:

Method = GET

Notice that, in the address bar, after the address of the web page, there is a question mark, followed by various words. If you use GET as the method to send data, the information being carried should not exceed 2048 characters (if we consider that each character uses a byte).

Posting the Data

An alternative is to assign post (or POST) to the method attribute. This would be done as follows:

<form method="post" runat="server">

</form>

In this case, the information is sent directly to the server through a protocol (in this case, HTTP) and would not appear in the address bar of the browser. If you use POST as the method to send data, the information being carried can be as large as the user/visitor's computer memory (RAM) can afford.

Taking Action

Once the information from a form reaches the server, it must be processed. This is usually done by specifying the file that includes the code used to process the information that was sent. A regular file in this case would have the .aspx extension. This can be the same file that contains the form or it can be a separate file.

To specify the file used to process information from a form, the <form> tag is equipped with an attribute named action to which you can assign the name of the file, as a string. This can be done as follows:

<form method="post" action="index.aspx" runat="server">

</form>

As with all HTML attributes, the position of the ACTION attribute is not important. That is, it can be positioned before or after another attribute.

Characteristics of Web Controls

The Identifier of a Control

To identify a control, every HTML element has an attribute named id to which you can assign a string. Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server"></asp:TextBox></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server"></asp:TextBox></td>
    </tr>
  </table>
</form>

</body>
</html>

This would produce:

The Identifier of a Control

Remember that, to close a control tag, you can end the start tag with a forward slash and omit the end tag. Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

The Text of a Control

The controls that display or request text have a property named Text. That property is represented in HTML by an attribute of the same text. To indicate the text of a control, you can assign the desired value to this attribute. Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get"
    runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide" Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server"
	             id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label id="lblPerimeter" Text="Perimeter:"
                     runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtPerimeter" Text="0.00"></asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea" Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"></asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Text of a Control

On the other hand, to access the text of a control, type the identifier of the control, followed by .Text. Such a string can be used like a normal string variable. Here is an example:

 string firstName = txtFirstName.Text;

If you are not planning to use a value many times, you don't have to declare a variable for it. This allows you to directly access a control and its variable where it is needed. Here is an example that uses one instead of three variables as above:

string fullName  = txtFirstName.Text + " " + txtLastName.Text;

Here is an example that doesn't use variables:

 txtFullName.Text = txtFirstName.Text + " " + txtLastName.Text;

Web Controls and Cascading Style Sheet

Everything you know about Cascading Style Sheet (CSS) formatting can be applied to a web control. As you may know already, there are three main ways CSS is used in a web page. To apply it on a control, you can create a style attribute in the start tag of a control and assign the values to it. It can start as follows:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get" runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide"
                     style="color: #0000FF"
                     Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server" id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                    Text="Calculate"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label style="font-weight: bold; color: #FF0000;"
                     id="lblPerimeter"
                     Text="Perimeter:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtPerimeter" Text="0.00"
                       style="font-style: italic; color: #800;">
                       </asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea"
                     style="font-weight: bold; color: #FF0000;"
                     Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server"
                       id="txtArea" Text="0.00"
                       style="font-style: italic; color: #800;">
          </asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

The Style of a Control

This can be referred to as inline formatting because it affects only the tag in which the style is created. The second technique consists of creating the necessary styles in the <head> tag of the HTML file. The third technique used to integrate CSS in your web page consists of creating a separate CSS file and referencing it in your (HTML, ASP, or ASP.NET) web page.

The Size of a Control

When you add a control to a webpage, it assumes a default size, which is a combination of its width and its size. Sometimes you will want to change the size of a control. These aspects can be set using the width and the height styles.

Controls Events

Introduction

When interacting with a webpage, a user can click a button, type in a control or select a value from a list. These and many other actions cause the web control to create messages and send them to the web server. This series of actions (creating a message and sending it to the server) is referred to as firintg an event. There are different types of messages that a control can send and various controls can send the same or different (types of) messages.

An event is an action that happens to a control on a webpage. The code of an event is like that of a function. It must have a name.

Implementing an Event

In order to take the appropriate action about an event, you must write code and attach it to the control. This is referred to as defining or implementing an event. There are various ways you can implement an event. One way is to include it in the script element in the head section. Write the event code in the script part of the head section of the webpage. The code of an event is like the one for a function. The return type is always void.

The Name of a Function Event

The name of the function that implements an event is usually in two parts. This is not a rule, only a convention or a habit.

The first part of the name of a function event follows the rules we saw for function: It can start with an underscore or a letter followed by a combination of letters, digits, and underscores in any order. The second part is the name of the event.

The event that fires when a webpage opens is (always) named Page_Load. If you name it exactly like that, the webserver would implicitly know what the event is used for. If you name it something else, you must indicate to the browser what to do.

The function of an event takes two parameters. The first parameter represents the web control that fires an event. That parameter is always the Object class, represented in C# with the object data type. By convention or traduction, the name of that first parameter is sender.

The second parameter is a class. It depends on the control that is firing an event. The most fundamental class for webcontrols is named EventArgs, which stands for, or represents, the arguments of the event. The non-fundamental events have particular names based on their purposes. Some people separate the first and the second parts of a function event with an underscore but this is not required.

By convention or traduction, the name of that second parameter is e. Because this parameter too is a class, it has properties. Those properties hold some values that can be useful when using the event.

The Types of Events

Various webcontrols fire different types of event because those controls have different goals. As a result, the .NET Framework supports different types of events. Each event has a specific name. The most regular events are:

Event ASP.NET Class Name Description
Load EventArgs Occurs when the control displays on the webpage
Click EventArgs Fires when a clickable control (a control that can be clicked) is clicked
Bulleted List BulletedListEventArgs Provides information about the list item that was clicked

Based on this, when creating a function for an event, specify the first parameter as object sender and the second parameter by the appropriate event class and e. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<head runat="server">
<title>Exercise</title>

<script runat="server">
void function-name-SomeEvent(object sender, event-class e)
{
}
</script>

</head>
<body>

</body>
</html>

Attaching an Event to a Wecontrol

After writing code for an event, you must indicate what control will fire that event. To support this, the start tag of every control has an attribute that is specific to each event. For example, whenever a visitor clicks a button, the control fires an event named OnClick. To handle this event, the control has an attribute named OnClick. You can assign the name of the function event to this attribute. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<head runat="server">
<title>Exercise</title>

<script runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
}
</script>

</head>
<body>

<form id="frmCalculation" runat="server">

<asp:Button runat="server" id="btnCalculate"
                           Text="Calculate"
                           OnClick="btnCalculateClick"></asp:Button>

</form>

</body>
</html>

Using a Control Event

Introduction

In the body of the function of an event, you can declare variables, access the webcontrols of a form, and perform various types of operations. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">

<script runat="server">
void btnGetFullNameClick(object sender, EventArgs e)
{
    string firstName = txtFirstName.Text;
    string lastName = txtLastName.Text;
    string fullName  = firstName + " " + lastName ;

    txtFullName.Text = fullName;
}
</script>

<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" />
          <asp:Button Runat="server" id="btnGetFullName"
                      Text="Get Full Name"
                      OnClick="btnGetFullNameClick"></asp:Button></td>
      </td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

Remember that if you are not planning to use a value many times, you don't have to declare a variable for it. This allows you to directly access a control and its variable where it is needed. Here is an example that uses one instead of three variables as above:

string fullName  = txtFirstName.Text + " " + txtLastName.Text;

Here is an example that doesn't use variables:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">

<script runat="server">
void btnGetFullNameClick(object sender, EventArgs e)
{
    txtFullName.Text = txtFirstName.Text + " " + txtLastName.Text;
}
</script>

<title>Employment Application</title>

</head>
<body>
<h2>Employment Application</h2>

<form id="frmEmployment" method="get" runat="server">

  <table border="0" width="320">
    <tr>
      <td width="100" class="names">First Name:</td>
      <td><asp:TextBox id="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
      <td width="100" class="names">Last Name:</td>
      <td><asp:TextBox id="txtLastName" runat="server" />
              <asp:Button Runat="server" id="btnGetFullName"
                           Text="Get Full Name"
                                 OnClick="btnGetFullNameClick"></asp:Button></td>
</td>
    </tr>
    <tr>
      <td width="100" valign="top" class="names">Full Name:</td>
      <td><asp:TextBox id="txtFullName" runat="server" /></td>
    </tr>
  </table>
</form>

</body>
</html>

Remember that, to convert the value of a natural number (int, signed, ) variable to the right value, write the data type followed by Parse(). In the parentheses, write the identifier of the control followed by .Text. Here is an example:

int.Parse(txtNumber1.Text);

You can store this expression in a variable. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    int number = int.Parse(txtNumber.Text);
}
</script>

The variable can then be used as necessary. For example, it can be involved in an operation. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    int number1 = int.Parse(txtNumber1.Text);
    int number2 = int.Parse(txtNumber2.Text);
    
    int total = number1 + number2;
}
</script>

Converting a Value to a String

To convert the value of a variable to a string, type the name of the variable followed by ToString(). Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double number1 = double.Parse(txtNumber1.Text);
    double number2 = double.Parse(txtNumber2.Text);
    
    double total = number1 + number2;

    txtTotal.Text = total.ToString();
}
</script>
<title>Algebra</title>
</head>
<body>
<div align="center">

<form id="frmAlgebra" runat="server">
<h3>Algebra</h3>

<table border=0>
  <tr>
    <td>Enter Number 1:</td>
    <td><asp:TextBox id="txtNumber1" text="0" runat="server" /></td>
  </tr>
    <td>Enter Number 2:</td>
    <td><asp:TextBox id="txtNumber2" text="0" runat="server" />
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button></td>
  </tr>
    <tr>
    <td>Addition:</td>
    <td><asp:TextBox id="txtTotal" text="0" runat="server" /></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

Here is an example of using the webpage:

Converting a Value to a String

Converting a Value to a String

Converting a Value to a String

remember that ToString() provides many options to convert and display a number. In the parentheses of ToString(), enther the desired or appropriate letter as a string. The letters are:

Character Description
c C Currency values
d D Decimal numbers
e E Scientific numeric display such as 1.45e5
f F Fixed decimal numbers
d D General and most common type of numbers
n N Natural numbers
r R Roundtrip formatting
s S Hexadecimal formatting
p P Percentages

Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<div align="center">
<title>Payroll Preparation</title>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double hourlySalary = 0.00;
    double timeWorked  = 0.00;
    double netPay = 0.00;

    hourlySalary = double.Parse(txtHourlySalary.Text);
    timeWorked  = double.Parse(txtTimeWorked.Text);
    netPay = hourlySalary  * timeWorked;

    txtNetPay.Text = netPay.ToString("C");
}
</script>
</head>
<body>

<form id="frmPayroll" runat="server">
<h3>Payroll Preparation</h3>

<table border=1>
  <tr>
    <td>Hourly Salary:</td>
    <td><asp:TextBox id="txtHourlySalary"
                                text="0.00"
                                runat="server"></asp:TextBox></td>
  </tr>
    <td><asp:Label id="lblTimeWorked"
                              text="Time Worked"
                              runat="server"></asp:Label></td>
    <td><asp:TextBox id="txtTimeWorked"
                              text="0.00"
                              runat="server"></asp:TextBox>
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button></td>
  </tr>
    <tr>
    <td>Net Pay:</td>
    <td><asp:TextBox id="txtNetPay"
                              text="0.00"
                              runat="server"></asp:TextBox></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

This would produce:

Converting a Value to a String

Converting a Value to a String

Constants

Remember that you can use constants in your code. Here is an example:

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head>
<title>Geometry: Circle</title>
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    const double PI = 3.14159265359;
    double radius = double.Parse(txtRadius.Text);

    double diameter = radius * 2.00;
    double circumference = diameter * PI;
    double area = radius * radius  * PI;

    txtDiameter.Text = diameter.ToString();
    txtCircumference.Text = circumference.ToString();
}
</script>
</head>
<body>
<div align="center">

<form id="frmCircle" runat="server">
<h3>Geometry: Circle</h3>

<table border=0>
  <tr>
    <td>Radius:</td>
    <td><asp:TextBox id="txtRadius" text="0.00" runat="server" />
           <asp:Button id="btnCalculate"
                              text="Calculate"
                              OnClick="btnCalculateClick"
                              runat="server"></asp:Button> </td>
  </tr>
    <td>Diameter:</td>
    <td><asp:TextBox id="txtDiameter" text="0.00" runat="server" /></td>
  </tr>
    <tr>
    <td>Circumference:</td>
    <td><asp:TextBox id="txtCircumference" text="0.00" runat="server" /></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

Here is an example of using the webpage:

Constants

Constants

Constants

Client Events

Some processing can take place in the visitor's computer and some parts must be done by the server. When creating an event, you can indicate what machine will process what. ASP.NET provides some events that indicate what machine would process an instruction. The OnClientClick event is an example of indicating that the client computer will perform a certain action.

Code Behind

Code created in a script section keeps short the number of files involved on a web page. It also assumes that only one person is working on the web page. If you have a team of programmers, designers, and implementers working on the same project, it is better to separate the web form from the code that manages it. To do this, you can create the class that manages a form in a separate file. This is referred to as code behind.

To have a class in its own file, create the class as a partial class and save it as a C# file. Here is an example of a class named House and created in a file named House.cs:

partial class House
{

}

In the body of the class, implement it as you want. The members of that class must be created either as public or protected.

After creating the class, to reference it in the page that contains the form, in the <%@ Page %> tag, add an attribute named CodeFile and assign the name of the partial file to it. This would be done as follows:

<%@ Page Language="C#" CodeFile="house.cs" %>

After specifying the file that holds the class, you must also specify the name of the class. To do this, add another attribute named Inherits and assign the name of the class to it. This would be done as follows:

<%@ Page Language="C#" CodeFile="house.cs" Inherits="House" %>

After specifying these attributes, you can use the class in the web page and you can reference the form in the events associated with the class.


Previous Copyright © 2008-2016, C# Key Next

aaa

A decimal number is made of one or two sections. It can contain only digits. If it contains a fraction, its two parts must be separated by a period (in US English). To declare a variable for a decimal number, use a data type named double. Here is an example:

double number = 62834.9023;

To convert the value of a variable to a double-precision number, use double.Parse(). In the parentheses, write the identifier of the control followed by .Text. Here is an example:

double.Parse(txtHourlySalary.Text)

You can store the expression in a variable. Here is an example:

double hourlySalary = double.Parse(txtHourlySalary.Text);

The variable can then be used in an operation. Here is an example:

<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double hourlySalary = double.Parse(txtHourlySalary.Text);
    double timeWorked  = double.Parse(txtTimeWorked.Text);

    double netPay = hourlySalary  * timeWorked;
}
</script>

To convert the value of a variable to a string, type the name of the variable followed by ToString(). Here are examples:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<script language="C#" runat="server">
void btnCalculateClick(object sender, EventArgs e)
{
    double side = 0.00;
    double perimeter = 0.00;
    double area = 0.00;

    side = double.Parse(txtSide.Text);
    perimeter = side  * 4.00;
    area = side * side;

    txtPerimeter.Text = perimeter.ToString();
    txtArea.Text = area.ToString();
}
</script>
<title>Geometry: Square</title>
</head>
<body>
<div align="center">
<h2>Geometry: Square</h2>

<form id="frmSquare" method="get" runat="server">
  <table>
    <tr>
      <td><asp:Label id="lblSide" Text="Side:" runat="server"></asp:Label></td>
      <td>
	<asp:TextBox Runat="server" id="txtSide" Text="0.00"></asp:TextBox>
	<asp:Button Runat="server" id="btnCalculate"
                           Text="Calculate"
                           OnClick="btnCalculateClick"></asp:Button></td>
    </tr>
    <tr>
      <td><asp:Label id="lblPerimeter" Text="Perimeter:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtPerimeter" Text="0.00"></asp:TextBox></td>
    </tr>
    <tr>
      <td><asp:Label id="lblArea" Text="Area:" runat="server"></asp:Label></td>
      <td><asp:TextBox Runat="server" id="txtArea" Text="0.00"></asp:TextBox></td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

This would produce:

Byte