Introduction to the Internet

A Web of Computers

The Internet is a set of computers throughout the world and that are connected to share information.

A Web Server

A computer that participates to the Internet as a network is called a Web server or web server or webserver. A webserver contains a few or thousands of documents that people can access. Some documents are publicly available, meaning enybody can access them. Some other documents are protected so they can be accessed only by people who have the right or appropriate permissions. Some documents are either not accessible or cannot be accessed through the Internet.

A Web Site

To make its resources available on the Internet, a webserver contains various types of documents such as text, pictures, videos, etc. A Web site or website is a collection of documents published by a person or a company on the Internet. The documents must be grouped to, or by, a single entity called a domain.

A Web Page

A Web page or webpage is a text-based document of a website and that displays in a browser. In order to access a webpage, its hosting webserver must make it available.

A Protocol

The exchange of data between a browser and a webserver is done using one or more languages named protocols. There are protocols to deal with simple document exchange. One of those protocols is named Hypertext Transfer Protocol, or HTTP. There are protocols to deal with email exchange (SMTP). There are protocols to deal with security over the Internet (HTTPS), and so on.

An HTTP Request

To use a webpage, a user must demand it from a webserver. This is usually done by providing some information about the document, such as its name, its title, its path, etc. If the webserver finds the document and the user has the right permission(s) to access the document, the webserver would make it available through the browser or other means. The demand formulated by the user using the browser or an appropriate means (called a protocol) is called a Web request or a request.

Rendering a Web Page

To see the contents of a webpage, the visitor of a webpage, also referred to as a user, must request it one way or another. After the request has been made, if everything is alright, the webserver must gather all necessary resources such as fonts, graphics, etc, to produce the result. Using those resources, the content of the webpage must be drawn on the canvas which is the webpage. Rendering a webpage consists of drawing the text, locating the pictures, and positioning everything in the right place.

Starting a Web Project in Microsoft Visual Studio

Introduction

There are different ways you can create a website. In fact, you can start with a file processor and a simple text editor. As an alternative, you can use a friendly programming environment such as Microsoft Visual Studio, which is freely available as Microsoft Visual Studio Community.

To start a website in Microsoft Visual Studio:

In the New Project dialog box, in the left frame, expand Visual C# and click Web. In the middle frame, click the desired option and set the name of the project. When you are ready, click OK.

Practical LearningPractical Learning: Starting a Project

  1. Start Microsoft Visual Studio
  2. To strt a new Web project, on the main menu, click File -> New -> Project...
  3. In the left list, expand Visual C# and click Web
  4. In the middle list, click ASP.NET Web Application (.NET Framework)
  5. Change the Name to DepartmentStore01

    New Project

  6. Click OK
  7. In the New ASP.NET Web Application dialog box, click Empty

    New ASP.NET Web Application

  8. Click OK

The Solution Explorer

The Solution Explorer is a window that displays a list of the files that make up a project. To access the Solution Explorer:

The Starting Structure of a Web Project

The most basic project is created in Microsoft Visual Studio by selecting only the Empty icon in the New ASP.NET Web Project dialog box and click OK. In this case, Microsoft Visual Studio creates a few files. You can see some of them in the Solution Explorer:

Disposing of an Object

The References node allows you to add some libraries to your project. Normally, Microsoft Visual Studio adds all the fundamental libraries you will need for a Web project.

Introduction to Webpages

A website has various types of documents and there are different ways to create its files.

The most fundamental type of document in a website is called a webpage. A Web project can contain various types of webpages.

Introduction to the Folders of a Website

Introduction

If you create your website in Microsoft Visual Studio as a project, the studio would create the starting necessary folders for it.

If you create your website in Microsoft Visual Studio, the studio would first create a solution as a group of projects. This allows you to create one or more project in the same solution. In that solution, the studio creates a Web project as a sub-folder of the project.

Custom Folders

To better organize the contents of your website, you can create various folders in it. Although you can create a folder using any file utility, Microsoft Visual Studio provides the necessary means to create a folder.

To create a folder in Microsoft Visual Studio, in the Solution Explorer:

Type a name for the desired forder and press Enter.

ASP.NET Suggested Folders

To help you organize your project, there are folders that you are suggested to use. To create an ASP.NET suggested folder in Microsoft Visual Studio, in the Solution Explorer:

Introduction to the Files of a Website

Introduction

A website is a collection of files. To better organize the files of a website, you can put them in different folders as we introduced in the previous section.

The Default of a Web Site

When a person accesses a website by typing an address in a browser, there must be a primary document that displays. That document is referred to as the default file. The default file is usually named index, Index, default, or Default. Of course, it must have an appropriate extension. The extension can be .htm or .html.

When you create a website, or when you start a Web project, you must specify its default document.

Picture Files

One way you can organize files of your website is to put them in different folders. This also applies to pictures (photos, graphics). Although you can put your pictures anywhere in your project, when it comes to a website, you should create a folder named images or Images or something like that and store the picture files in it. Of course, you can also create sub-folders inside that images folder.

A Review of HTML

Introduction

A webpage is a text-based document made of code items named tags. After creating the document, you must save it with an extention such as .htm or .html. There are other extensions available.

The code of a webpage is made of small tags. With a few exceptions, a tag is made of two parts. The first part starts with <. Its has a name, and it ends with >. This is also called the start tag. An example is:

<pre>

The second part of a tag, also called an end tag or a closing tag, is crated like the start tag, except that it has a forward slash between < and the name of the tag. Therefore, an example of creating a complete tag is:

<pre></pre>

HTML uses specific names for tags. Each tag plays a specific role. The name of a tag can be a letter or a few letters. The name of a tag can be written completely in uppercase, completely in lowercase, or a mix of uppercase and lowercase, but it is a good idea to use the name exactly the same way in the start and the end tags.

The section between the start and the end tags is the contents of the tag. It can contain regular text, images, etc, things that you want the browser to display.

You can create, include, or insert one tag inside another. This is referred to as nesting a tag. Here is an example of a nested tag:

<pre><strong></strong></pre>

The HTML Contents of a Webpage

The most fundament tag in HTML is html. It indicates the beginning and end of a webpage. Therefore, the code of a webpage starts as follows:

<html>
</html>

To indicate that your webpage is following the rules of HTML5, you should start the code with <!DOCTYPE html>. Here is an example:

<!DOCTYPE html>
<html>
</html>

The HEAD Section of a Webpage

A webpage is made of two sections: the parts that will display to the visitor and the part that will work behind-the-scenes. The part will work behind-the-scenes is created with a tag named HEAD. Here is an example:

<!DOCTYPE html>.
<html>
<head>
</head>
</html>

The BODY Section of a Webpage

The section that will display to the visitor is created with a tag named BODY. Here is an example:

<!DOCTYPE html>.
<html>
<head>
</head>
<body>
</body>
</html>

The TITLE Section of a Webpage

The title of a webpage is created using a tag named title and it is nested in the head tag. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>
</body>
</html>

Other than that, HTML is neither huge nor difficult. Still, it is a complete language.

Practical LearningPractical Learning: Creating a Web File

  1. To create a Web-based file, in the Solution Explorer, right-click DepartmentStore01 -> Add -> New Item...
  2. In the left frame, under Visual C#, expand Web and Markup
  3. In the middle list, click HTML Page (or make sure it is selected)
  4. Change the name to Index

    Add New Item

  5. Click Add
  6. Change the code of the webpage as follows:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Department Store</title>
    </head>
    <body>
    
    </body>
    </html>

HTML Heading Tags

To assist you in creating titles in a webpage, HTML provides 6 special tags named H1, H2 H3 H4 H5, and H6. They are used to display larger (H1) to smaller (H6) text.

Practical LearningPractical Learning: Creating a Web File

A Paragraph

A paragrph is text that starts on its own line and is not attached to another paragraph. To let you create a paragraph, HTML provides a tag named P.

Presenting a Web Page of a Web Site

Executing a Project

To see the result of a webpage, you must send it to a browser. This is equivalent to executing a project. To execute a Web project, on the main menu, you can click Debug -> Start Without Debugging. As an alternative, you can add the Start Without Debugging button to the Standard toolbar.

A Parser

A Web browser is a visual application that displays to the visitor of your webpage. A browser contains various internal apps that assist it in displaying a webpage. To start, when you ask the browser to display a webpage, the browser uses an internal application named a parser. The parser starts by analyzing all the tags you had created in the whole content of the webpage. This operation is referred to as parsing. After this operation, the parser creates a list, in fact a tree list, of all the tags of a web page. The parser also includes the values or contents of the various HTML tags of a webpage.

An Interpreter

When the parser has completed its job, it hands its list to another application. This application must analyze each tag to tag to "understand" it. As you know already, there are various HTML tags for different goals. You may also know that there are various browsers on the market. Although all or most browsers follow international standards, they still have some differences, usually small. For example, some browsers read some tags differently, and there are some tags that some browsers don't know. Regardless, while analyzing the list produced by the parser of a browser, if the interpreter doesn't know or doesn't understand what a certain tag is or what to do with it, it must make a decision. It can ignore the tag. It can try to find an alternative to what to do, and so on. This series of operations and decisions is referred to as interpreting, and is done by an application named an interpreter.

Choosing a Browser

When you execute the project, the browser displays what its interpreter understands from the code in the webpage. If your computer uses different browsers, when you execute the project, Microsoft Visual Studio uses a browser set as the default to display the webpage. If your computer has different browsers, you can choose which one should display a webpage. To do this, in the Solution Explorer, right-click the name of the file and click Browser With... This will display a dialog box with the names of browsers installed in your computer. Click the desired browser and click OK.

After creating a project and writing code, you may want to see the result. To do this, you can build the application. To buid the project:

Executing for a Web Page

When you execute a project in Microsoft Visual Studio, the studio is configured to immediately display a webpage. As a result, different things happen. When you create a Web project in Microsoft Visual Studio, the studio creates a document that uses the name of the project with the extension .csproj and displays it. This is the project file. You can then start adding the necessary documents as we will see throughout our lessons. Remember that, if you want, you can create a file named Index or Default with the appropriate extension. At any time, to activate a file, you can click its tab. When you execute a project:

Introduction to the Attributes of an HTML Tag

Overview

In HTML, an attribute is an identifier you add to a tag to provide more information, or exercise more control, on the tag. HTML provides various attributes for different goals. Some attributes can be applied to any tag and some attributes are made for only some tags. Each attribute has a name. Some attributes don't need or use a name. The formula to add such an attribute is:

<tag-name attribute-name >. . .</tag-name>

Some attributes must be given a name. The formula to add such an attribute is:

<tag-name attribute-name=value>. . .</tag-name>

The value of an attribute should (must) be included in double-quotes. Most values of attributes are a single value. Some values can be made in two or more parts.

Identifying a Tag

The most common piece of information a tag needs is its identity. to support it, HTML provides an attribute named ID. Practically every tag can use this attribute. When creating a webpage, if you decide to identify the tags, make sure each ID has a unique value.

The Name of a Web Control

Instead of, or in addition to, an ID attribute, you can provide a custom name for an HTML tag. To support this, HTML provides an attribute named NAME. If you decide to use it, you can give it the same value as the ID attribute of the same tag. This time also, make sure that each tag of a webpage has a unique name.

Introduction to Web Forms

Introduction

A webform is a section of a webpage that allows a visitor to interact with a website. For example, a user can type one or more values and click a button. The value would then be sent to a webserver for processing. There are various ways to create a form. To start, ASP.NET MVC supports forms as they are created in HTML. It is not realistic to learn all HTML and everything about HTML Web forms in all details here.

Creating a Web Form

There are various ways you can create a form. To create a form in HTML, start with the <form> tag and close it. In the start tag, you can provide a name for the form. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="Something">

</form>

</body>
</html>

To make a form useful, you can equip it with special tags that produce objects that allow a visitor to interact with the webserver. Such objects called Web controls or webcontrols or controls.

Text Boxes

Introduction

A text box is a control that displays text to the user or requests text from a user. To get a text box, created an HTML tag named input. It uses an attribute named TYPE. For a text box, the type to "text". You should also give it a name. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="Something">

<input type="text" name="txtSomething" />

</form>

</body>
</html>

The Value of a Text Box

A text box requests a value from, or displays a value to, a user. The value of a text box is represented by an attribute named VALUE. The value can be a constant such as a number, or text, etc. If the value is a letter, a symbol, a word, or a number, you can simply assign it to the VALUE attribute. Here is an example:

<form name="frmExercise">
    <input type="text" name="txtNumber" value=3.14159 />
</form>

If the value is in many words or many parts, you must include it in double-quotes. Normally, even if the value is a symbol, a word or a number, you should always include it in double-quotes.

The Placeholder of a Text Box

To further indicate what a text box is used for, you can display a gray piece of text in it. When the user clicks in the text box and starts typing, that default text would be replaced by the new text. To support this, the HTML text box control has an attribute named placeholder. Assign the desired text to this attribute.

Categories of Text Boxes

Introduction

By default, a text box is meant for text (strings). Some text boxes must use specific types of values. To assist you with this, the INPUT control provides many options. Some of the options were created with practically the begining of the Internet. Some new options were added with HTML5.

A Numeric Text Box

When you need to perform calculations and numeric validations on a text box, you may have to write a few lines of code for a simple concern. Fortunately, HTML5 provides the numeric type that takes care of many things behind the scenes. To create a text box that supports numbers, create an INPUT tag and set its TYPE as NUMBER.

A Date-Based Text Point

To let you assist the user in entering a valid date in a text box, create an INPUT tag and set its TYPE as DATE. In this case, when the user clicks the controls, some visual elements will display a type of calendar and the user can make the necessary selections.

A Time-Based Text Point

If you want to make sure that a user would enter a valid time in a text box, create an INPUT tag and set its TYPE as TIME.

A Combination of Date and Time

Sometimes you will want the user to provide both the date and the time as one object. To assist you with an appropriate control, HTML5 provide a type named DATETIME-LOCAL.

Command Buttons

Introduction

After using a form, to send its values to a webserver, you can provide a button that a visitor would click. A button is created using an input tag. Of course, it should be given an id and/or a name. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="Something">

<input type="text" name="btnSomething" />

<input name="other" />

</form>

</body>
</html>

The Value of a Button

To indicate what it is used for, a button should have a caption, which is the text it displays. To support this, the input tag has an attribute named value. Assign the desired string to that attibute. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="btnSomething" VALUE = "Calculate">

<input type="text" name="txtSomething" />

<input name="other" />

Types of Buttons

Introduction

There are various types of buttons in HTML. To let you specify the type of button you want, the input tag is equipped with an attribute named type.

The most fundamental button is named button. Here is and example of creating it:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="Something">

<input type="text" name="txtSomething" />

<input name="other" />

<input name="btnCreate" type="button" />

</form>

</body>
</html>

A Submit Button

After using a form, the user must send the values to a webserver, which is done by clicking a button. The most fundamental and easiest button to use is created with a type named SUBMIT. Here is an example:

<!DOCTYPE html>.
<html>
<head>
<title>ASP.NET MVC Web Development</title>
</head>
<body>

<form name="Something">

<input type="SUBMIT" name="btnCreate" />

<input name="other" />

Introduction to Cascading Style Sheet

Overview

Cascading style sheet, or CSS, is used to provide better means to format the contents of a webpage. There are three techniques to apply CSS to an HTML tag.

Inline Tag-Based Styles

One way you can format an HTML tag is to include CSS in it. To do this, in the start tag, type style="". Inside the quotes, type a style, a colon, and its value(s).

Practical LearningPractical Learning: Introducing Style Sheets

Local File-Based Styles

You can create a CSS section in a webpage and apply its style(s) to one or more tags. To do this, in the head part of the webpage, create a section that starts with <style> and ends with </style>. Inside this tag, create the desired styles. After creating the styles, you can apply each to the desired HTML tag(s).

External File-Based Styles

Each of the previously-reviewed techniques has advantages and disadvantages:

HTML allows you to create a file that holds one or more styles. The style(s) in that file can be used by any tag of any HTML file, whether files from one website or files from many websites. A file created for CSS contains the same types of styles we reviewed for file-based styles except that there is no need to create a <style></style> delimiter in the file. A file has the .css extension. To better organize your work, it is recommended that you put the file(s) in a folder made for styles.

You can use any text editor to create your CSS file but Microsoft Visual Studio can assist you. To create a CSS file in Microsoft Visual Studio, after starting a project:

In all cases, give a name to the file (you don't need to add an extension), and click OK or press Enter. In the document, create the styles you need.

To access an external CSS file, in the head section of your HTML file, create a line as follows:

<link rel="stylesheet" type="text/css" href="file-name.css" />

Applying a Local File-Based or an External Style to a Tag

Applying a Style to an Identifier of a Tag

There are various means to apply a style to a tag. If you want to apply a style to one tag, start the name of the tag with #. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
#main-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}
</style>
<title>Fun Department Store - Inventory</title>
</head>
<body>

</body>
</html>

To apply this style, create an id tag and assign the tag to it. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
#main-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}
</style>
<title>Fun Department Store - Inventory</title>
</head>
<body>

<p id="main-title">Fun Department Store</p>

</body>
</html>

Applying a Style to Many Tags

To create a style that can be applied to many tags, start its name with a period. Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
#main-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}
.sub-title {
    font-size: 18px;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}
</style>
<title>Fun Department Store - Inventory</title>
</head>
<body>

</body>
</html>.BaseType.BaseType);

To apply this type of style, in an HTML start tag. Ceate aclass attribute and assign the name of the style to it.

Practical LearningPractical Learning: Introducing Style Sheets

  1. Change the code of the webpage as follows:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #main-title {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        font-family: Garamond, 'Times New Roman', serif
    }
    .sub-title {
        font-size: 18px;
        text-align: center;
        font-family: Garamond, 'Times New Roman', serif
    }
    .container {
        margin: auto;
        width: 365px;
    }
    .left-column
    {
        width:  100px;
    }
    .tbl-content-holder { width: 100% }
    </style>
    <title>Fun Department Store - Inventory</title>
    </head>
    <body>
    <div class="container">
        <p id="main-title">Fun Department Store</p>
        <p class="sub-title">Sales Inventory</p>
    
        <form name="fromDepartmentStore" method="post">
                <table>
                    <tr>
                        <td class="left-column">Item #:</td>
                        <td><input type="text" name="txtItemNumber" style="width: 80px" /></td>
                    </tr>
                    <tr>
                        <td class="left-column">Size:</td>
                        <td><input type="text" name="txtItemSize" /></td>
                    </tr>
                    <tr>
                        <td class="left-column">Unit Price:</td>
                        <td><input type="text" name="txtUnitPrice" /></td>
                    </tr>
                    <tr>
                        <td class="left-column">Item Name:</td>
                        <td><input type="text" name="txtItemName" style="width: 200px" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    </html>
  2. To execute the project, on the main menu, click Debug -> Start Without Debugging:

    Applying a Style to Many Tags

  3. Close the browser and return to your programming environment

Combining Styles in a Tag

Consider the following CSS file named Site.css:

#main-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}

.sub-title {
    font-size: 18px;
    text-align: center;
    font-family: Garamond, 'Times New Roman', serif
}

.container {
    margin: auto;
    width: 365px;
}

.grave { font-weight: bold }
.left-column { width: 100px; }
.tbl-content-holder { width: 100% }

You can apply various styles to a tag. To do this, in the start tag, assign the styles to the class attribute. The style must be separated by empty spaes. Here are examples:

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<title>Fun Department Store - Inventory</title>

<link rel="stylesheet" type="text/css" href="~/Site.css" />
</head>
<body>
<div class="container">
    <p id="main-title">Fun Department Store</p>
    <p class="sub-title alignment grave">Sales Inventory</p>

    <form name="fromDepartmentStore" method="post">
            <table>
                <tr>
                    <td class="left-column grave">Item #:</td>
                    <td><input type="text" name="txtItemNumber" style="width: 80px" /></td>
                </tr>
                <tr>
                    <td class="left-column grave">Size:</td>
                    <td><input type="text" name="txtItemSize" /></td>
                </tr>
                <tr>
                    <td class="left-column grave">Unit Price:</td>
                    <td><input type="text" name="txtUnitPrice" /></td>
                </tr>
                <tr>
                    <td class="left-column grave">Item Name:</td>
                    <td><input type="text" name="txtItemName" style="width: 200px" /></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

This would produce:

Combining Styles in a Tag

Practical LearningPractical Learning: Combining Styles

  1. On the main menu, click File -> New Project...
  2. In the middle frame, click ASP.NET Web Application (.NET Framework) and change the project Name to DepartmentStore02 and press Enter
  3. In the New ASP.NET Web Application dialog box, click Empty and click OK
  4. In the Solution Explorer, right-click DepartmentStore02, position the mouse on Add, and click New Folder
  5. Type Content and press Enter
  6. To create a CSS file, in the Solution Explorer, right-click Content -> Add -> New Item...
  7. In the left frame, under Visual C#, expand the Web node and click Markup
  8. In the middle list, click Style Sheet
  9. Change the name to Site
  10. Click Add
  11. In the document, type the following code:
    body {
        background-color: #FFF;
    }
    
    #main-title {
        font-size: 22px;
        font-weight: bold;
        text-align: center;
        font-family: Garamond, 'Times New Roman', serif
    }
    
    .sub-title {
        font-size: 18px;
        text-align: center;
        font-family: Garamond, 'Times New Roman', serif
    }
    
    .container {
        margin: auto;
        width: 365px;
    }
    
    .grave { font-weight: bold }
    .left-column { width: 100px; }
    .tbl-content-holder { width: 100% }

Introduction to Computer Languages

Overview

A computer language is a list of instructions (words, expressions, and the rules to use them appropriately) that ask a machine to do something, such as to perform an operation. As is the case for human languages, there are various computer languages.

Introduction to C#

C# is a computer language used to create various types of applications: desktop apps, web-based systems, graphical applications, communication apps, etc. As is the case for most languages, in C#, you write your code using common human-readable English language using a fixed list of words, named keywords, and following specific rules.

As we mentioned for HTML, C# uses an internal application named a parser. It is used to analyze the code you write and create a table of words, expressions, etc that are part of your code. In reality, a language as complex as C# has many internal programs that do different things. The parser "scans" the code of a file that contributes to a webpage. The parser checks the syntax, the keywords, the unknown words, and some other routines.

When the parser has finished its job, or while it is analyzing your code, if it finds one or more problems, it makes a list. It stops at one time and presents you the error(s) so you can correct it/them.

A Compiler

When the parser has completed its operations, if the code looks alright, the parser sends it to another program. That program converts your human-readable words in a strict computer language named Assembly. The program that performs the conversion is called a compiler. In our lesson, the compiler will refer to the group of internal applications that analyze, validate, and process your coce to produce the intended result.

When you execute your project, the compiler analyzes your code. If there is a problem, which could be anything, the webpage may display an error. In most cases, the resulting webpage would create and display a list of the problems it found. The webpage displays the list for you to fix. Sometimes it would point to the exact line where the/a problem was found. Sometimes it would point to the line where the problem showed its impact although the problem may be found somewhere else. With experience, you will know how to fix the problem(ss) or troubleshoot it(theem).

Introduction to Razor

Overview

Razor, or the Razor syntax, is a technique (or sub-language) of using C# (as a derivative) to perform interactive operations on a webpage.

To use Razor in your webpage, you can include (or embed) it in the code of your webpage or you can create a special section for it.

To create a file that supports the Razor syntax, display the Add New Item dialog box. In the left frame or left list, expand the Visual C# node. Then expand the Web node. Below the Web node, click Razor. In the central list or frame, click Web Page (Razor v3). Accept the name of the file or change it. Once you are ready, click Add.

Introduction to Code Delimiters

The code of an ASP.NET webpage is primarily written in HTML. It may also contain other types of code. To enhance the functionality of the webpage, you can add C# code to it. The section of code that contains C# must be delimited. The code starts with @{ and ends with }.

Practical LearningPractical Learning: Creating Code Delimiters

Processing a Web Form

After using a form, when the visitor clicks a button of type submit, the user is said to "post" the values (to the webserver). To process the values, create a section as follows:

@{
    if(IsPost)
    {
        // Process the form here
    }
}

There are a few (or many) issues involved with that simple section, but we cannot review them at this time. For now, simply take that code "as is". Everything will be explained in future lessons.

Comments

Single-Line Comments

A comment is a line or paragraph of text that will not be considered as part of your code. There are two types of comments recognized by C#.

To display a comment on a line of text, start the line with two forward slashes //. Anything on the right side of // would be ignored. Here is an example:

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

@{ 
    // This line will be ignored. I can write in it anything I want.
}

</body>
</html>

Multi-Line Comments

The above type of comment is used on only one line. You can also start a comment with /*. This type of comment ends with */. Anything between this combination of /* and */ would not be analyzed by the compiler. Therefore, you can use this technique to span a comment on more than one line.

While you can manually create comments, Microsoft Visual Studio provides a tool that can assist you. To add a comment on a line, click anything on that line. Then, on the Standard toolbar, click the Comment Out the Selected Lines button Comment Out the Selected Lines. To add comments to many adjacent lines, select the text on those lines and click the Comment Out the Selected Lines button Comment Out the Selected Lines. To remove the comments, click the line or select text on the lines. Then, on the Standard toolbar, click the Uncomment the Selected Lines button Uncomment the Selected Lines.

Razor Comments

To create a comment in Razor, start with @* and end with *@. You can then include anything you want between those two. Here is an example:

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

@{ 
    @* This line will be ignored.*@
    
    @*I can write in it anything I want in this section.
      It will not be processed.*@
}

</body>
</html>

Solution and Project Management

Code Snippets

Microsoft Visual Studio ships with many skeleton codes you can use and customize. It writes the primary code for you and add all the necessary default behaviors. Once it has done this, you can change or remove any section. To access these code skeletons, in the section of the file where you want to add it, right-click and click Insert Snippet...:

Insert Snippet

In the menu that comes up, double-click Visual C#:

Insert Snippet

This would display a list of codes. The list that displays depends on where you had right-clicked, such as inside some code delimiters:

Insert Snippet

Or outside the code delimiters:

Insert Snippet

If you see the type of code you want to use, double-click it.

In some cases, if you have already written some code, you may want to change it or rather add some code to it. The Code Editor provides some skeleton codes you can use. To use this approach, right-click the code you want to modify and click Surround With... In the list that appears, double-click the desired option.

Indentation

Indentation makes your code easy to read. Indentation is a technique of grouping lines of code by category. Indentation should be incremental. That is, when a line of code appears to be a child of the previous line, the new line should be indented.

Opening a Project

There are a various ways you can open an existing project:

Practical LearningPractical Learning: Ending the Lesson


Home Copyright © 2001-2019, FunctionX Next