Home

Using Various Languages

 

Using HTML

 

Introduction

No matter how good and efficient a web studio is, such as Microsoft Visual Studio 2008 or Microsoft Visual Web Developer 2008 Express Edition, at one time or another, you will need to go behind the scenes to visit the code it produced. In practicality, some things are hard to do visually and some details cannot be obtained in the design side.

Practical LearningPractical Learning: Creating a Web Site

  1. Start Microsoft Visual Web Developer 2008 Express Edition
  2. To create a web site, on the main menu, click File and click New Web Site...
  3. Make sure ASP.NET Web Site is selected.
    In the Language combo box, select Visual Basic
  4. Click the combo box on the left side of Browse, press End, and press Delete a few times (8), and change it to geometry1
  5. Click OK
  6. In the Solution Explorer, right-click Default.aspx and click Rename
  7. Change the name to index.aspx and press Enter
  8. In the Solution Explorer, click C:\..\geometry1\

Integrating HTML in Your Code

As seen already in the previous lessons, you can create a complete ASP.NET web site by writing your own code using HTML and saving the file with an aspx extension. If you are working on a web form, you can open its source code and type new code or modify the existing one.

To access the code of a web form in Microsoft Visual Studio, in the lower-left section of the window, you can click the Source button. In your source file, you can then type your HTML code following the rules of the language.

To assist you with writing HTML code, the window in which your type your text responds appropriately. For example, if you type <, the list of available HTML and ASP.NET options would display. Here is an example:

Code Editor

If you see the tag you want to use, you can double-click it. If you continue typing, the closest match to your character(s) would be selected. For example, if you start typing add, the ADDRESS would be selected:

Code Editor

If the tag you want to use is selected, to include it in your code, you have two options:

  • You can simply press Enter while the tag is selected
  • You can double-click the tag

The tag would then be added to the line and you can continue writing your code. If the tag has attributes (and most HTML tags do), you can start typing the attribute and use the same technique to include the attribute. If the attribute is supposed to receive a value (as most of them do), make sure you type = followed by double-quotes. A list of available options would then be presented to you. For example, if you are creating a link using the <a> tag, after including <a href=", the list of files of the current project would come up;

Code Editor

For an attribute such as href of the <a> tag, if the option you want to use is not in the list, you can click the last item of the list. This would open another dialog box or window you can use to complete the request.

Practical LearningPractical Learning: Using HTML Code in an ASP.NET Web Page

  1. To add a new web page, on the main menu, click Website -> Add New Item...
  2. Make sure Web Form is selected.
    Set the Name to rectangle
     
    Add New Item
  3. Click Add
  4.  Locate the <title> tag and change it to <title>Geometry: Rectangle</title>
  5. To add a new web page, on the main menu, click Web Site -> Add New Item...
  6. Make sure Web Form is selected.
    Set the Name to square and click Add
  7. Change the file as follows:
     
    <%@ Page Language="VB" 
        AutoEventWireup="false" 
        CodeFile="rectangle.aspx.vb" 
        Inherits="rectangle" %>
    
    <!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>Geometry: Square</title>
    </head>
    <body>
    
      <p>A square is a geometric figure made of 4 equal sides 
      connected to produce four right angles.</p>
    
    </body>
    </html>
  8. Add the following code to create a table (notice how the Code Editor will assist you with writing the code):
     
    <%@ Page Language="VB" 
        AutoEventWireup="false" 
        CodeFile="rectangle.aspx.vb" 
        Inherits="rectangle" %>
    
    <!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>Geometry: Square</title>
    </head>
    <body>
    
    <p>A square is a geometric figure made of 4 equal sides 
      connected to produce four right angles.</p>
      
    &nbsp;
    
    <table border="0" width="660">
      <tr>
        <td colspan="2">
          <hr color="#0000FF" />
        </td>
      </tr>
      <tr>
        <td align="center"><a href="index.aspx">Home</a></td>
        <td align="center">Copyright  2009 FunctionX</td>
      </tr>
      <tr>
        <td colspan="2">
          <hr color="#0000FF" />
        </td>
      </tr>
    </table>
    
    </body>
    </html>
  9. Click the index.aspx tab to access the first file
  10. In the code editor, locate the title tag and change it to:
    <title>Geometry</title>
  11. Click the line that has the body tag. Press End and press Enter
  12. Type the following:
     
    <h1>Geometric Figures</h1>
      
    <p>This application is used to perform geometric calculations.</p>
  13. Press Enter twice and type <a h
  14. When the context menu shows href, press Enter and type ="
  15. In the list that appears, double-click square.aspx
  16. Complete it to display:
     
    <%@ Page Language="VB" 
             AutoEventWireup="false" 
             CodeFile="index.aspx.vb" 
             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>Geometry</title>
    </head>
    <body>
        
    <h1>Geometric Figures</h1>
      
    <p>This application is used to perform geometric calculations.</p>
      
    <a href="square.aspx">Square</a>
      
    </body>
    </html>
  17. On the main menu, click Debug -> Start Without Debugging
    Access the browser to see the result:
     
    Browser
  18. Return to your programming environment
 
 
 
 

The Response Object

To support the display of items on a web page, Active Server Pages provides an object called Response. This object is equipped with Write() that is used to display something on a web page. To access Write(), type Response, followed by a period, followed by Write() as follows:

Reponse.Write(Something)

The item to display must be written in the parentheses. If you want to display an empty space, a character, or a group of characters, pass it double-quoted in the parentheses of this method. Here is an example:

<%@ Page Language="VB" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<% Response.Write("Coolfront Island") %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

<% Response.Write("Grier Summer Camp") %>

</body>
</html>

This would produce:

Browser

If the item to display is a regular number, whether natural or decimal, you can write it without the quotes in the parentheses of Response.Write(). Here is an example:

<%@ Page Language="VB" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<% Response.Write("Coolfront Island") %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

<% Response.Write("Copyright, ") %>
<% Response.Write(2007) %>
<% Response.Write(" Grier Summer Camp") %>

</body>
</html>

This would produce:

Browser

Responding to HTML Tags

When you write HTML tags in your code, the browser would interpret them and publish a result to the user. As opposed to HTML tags, most of the scripts you write are not directly intended for your user's browser. They are presented to the web server that analyzes the script and responds to it. In fact, if you include Active Server Pages scripts in <% and %>, when the resulting page is presented to the user, the script sections are removed. This also means that a curious visitor would not know what your code looks like. For example, here is the code presented to the browser from the above web page:

<%@ Page Language="VB" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

Coolfront Island

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

Copyright, 2007 Grier Summer Camp

</body>
</html>

Notice that the Response.Write(" and ") have been removed. When a file with active code is sent to the server, the server checks the <% %> sections and their contents. Any section that it contains, for example, double-quoted strings passed to the Response.Write() method, is considered "as is". The server would remove <%, the Response.Write() expression, its double-quotes, and %>. This means that, whatever you enter in the parentheses of Response.Write() would be sent to the browser the same way you wrote it. This allows you to include HTML tags in the parentheses of Response.Write() but it is your responsibility to send it as regular HTML code. If you make mistakes, they would be presented to the browser, the server might not care and the server cannot or would not fix it. Based on this, you can include normal HTML code between double-quotes in the parentheses of Response.Write(). Consider the following example:

<%@ Page Language="VB" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<% Response.Write("<center><h1>Grier Summer Camp</h1></center>") %>

<% Response.Write("<h2>Coolfront Island</h2>") %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<% Response.Write("<center>Copyright &copy; 2007 Grier Summer Camp<center>") %>

</body>
</html>

When the server receives this code, it removes the <% Reponse.Write(" and the ") %> sections. Then its sends the rest to the browser:

<%@ Page Language="VB" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<h2>Coolfront Island</h2>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<center>Copyright &copy; 2007 Grier Summer Camp<center>

</body>
</html>

The browser then receives normal HTML tags that it must interpret and present the result in the intended web page:

Browser

In the same way, you can write any sophisticated HTML code in the parentheses Reponse.Write(). This consequently means that if you pass bad HTML code to a Response.Write() method, the result may be unpredictable.

Using JavaScript

 

Introduction

Although you can do many things using HTML, CSS, and C#, every language has its own shortcomings. To complement them, you combine them with additional languages. As an example, you can use or insert JavaScript to your ASP.NET code. There are certainly various rules you must follow but you should know that it is available.

Integrating JavaScript to Your Code

One of the objects you can borrow from JavaScript is its message box, which you can display in response to a user clicking something on a web page. To support message boxes, the JavaScript language provides the alert() function. To call this function in your ASP.NET code, you must qualify it from javascript.

The syntax of the alert() function is:

javascript:alert(Message);

This function takes one argument, passed as a string. To call it, you can create it as part of a hyperlink. Here is an example:

<a href="javascript:alert('Your time sheet has been received');">Submit</a>

When the alert() function is called, it displays a a rectangular window with a message, an icon, and an OK button:

Message Box

In JavaScript, the alert() function is a member of the window object. Based on this, to call the function, you can qualify it from that object. Here is an example:

<a href="javascript:window:alert('Your time sheet has been received');">Good</a>

 

 
 
   
 

Previous Copyright 2009 FunctionX Next