Introduction to .Net and ASP.Net

Course Introduction Build Your Own ASP.Net Website: Chapter 1

Microsoft ASP.Net Walkthrough: Creating a Basic Web Forms Page

Focus of the Course Learn to build E-Commerce Web

Applications using ASP.Net Learn how to use C# for the code-

behind portions of your web sites Learn about important E-Commerce

topics needed to help you design more successful E-Commerce web sites

Most importantly, learn how to build usable, customer-centered web sites

What is .NET?

.Net Platform includes the .Net Framework and tools for application development

ASP.Net is server-side technology for developing web applications Server-side code is executed on a web server A web application is a dynamic web site ASP.Net pages are compiled into binary files

that execute very fast

Running Your ASP.Net Application ASP.NET Web applications run on a Web

server configured with Microsoft Internet Information Services (IIS).

With Visual Studio.Net however, you do not need to work directly with IIS.

Visual Studio handles file management tasks such as creating IIS applications when needed and providing ways for you to deploy your Web applications to IIS.

Where Does Visual Studio Fit In?

If you have the .NET Framework, you can create ASP.NET applications using text editors, a command-line compiler, and other simple tools. You can copy your files manually to IIS to deploy the application.

When you use Visual Studio to create Web applications, you are creating essentially the same application that you could create by hand. That is, Visual Studio does not create a different kind of Web application; the end result is still an ASP.NET Web application

Visual Studio Advantages Visual Studio provides tools that make

application development much faster, easier, and more reliable. These tools include: Visual designers for Web pages with drag-and-drop

controls and code (HTML) views with syntax checking.

Code-aware editors that include statement completion, syntax checking, and other IntelliSense features.

Integrated compilation and debugging. Project management facilities for creating and

managing application files, including deployment to local or remote servers.

How ASP.NET Web Applications Fit into the .NET Framework

What Do I Need? Windows 2000 or XP Professional .Net Framework SDK Internet Information Services (IIS)

web server Visual Studio .Net 2005 Beta 2

version See Chapter 1 for downloading

instructions and installation info of the .Net Framework SDK and IIS

Where Do I Put My Files? By default, IIS maps to the wwwroot

subfolder of C://Inetpub But you can place your files anywhere

(except on lab machines, just harddrive or thumb drive)

When you run your ASP.Net application from within Visual Studio, it will create a temporary http://localhost in your file path

Creating a New Web Site

Open or Create a Web Site

Select an ASP.Net Web Site

Browse to Find Your Folder

Choose C# as Your Language

Choose the Location

If the Site Already Exists…

Opening a Web Page

Click the Show All Files button in the toolbar of Solution Explorer, then expand the node for WebForm1.aspx.

At the bottom of the Web Forms Designer are two tabs, Design and HTML, which show you different views of the .aspx file you are working with: Design view provides you with a WYSIWYG view

where you can drag controls and use the Properties window to configure them.

HTML view shows you the same information, but in the "raw" format of an HTML file. As in HTML files, the Web Forms Designer supports Intellisense for elements in HTML view.

Your Site in the Solution Explorer

Source Mode

Click to Open the

File

The Properties Panel This Panel contains the attributes

or properties for a selected element on your page.

If you select a <p> tag, the align, class, and other properties like Style are visible Clicking on the Style property will

open the Style Editor, Similar to the CSS Editor in Dreamweaver.

The Properties Panel: Styles Editor

The Font: Color Property

Examining Web Forms Structure

If the Web Forms Designer is open with a file called FirstPage.aspx. A Web Forms page consists of two separate files: The .aspx file contains the HTML text and the

controls that make up the user interface of the page.

A separate file, called WebForm1.aspx.vb or WebForm1.aspx.cs, contains the page's code — that is, it is the page's class file. It is sometimes referred to as the "code-behind" file. By default, Solution Explorer does not display the page's class file.

Two Types of Server Controls HTML server controls   These are HTML

elements that are marked (that you convert) to be programmable in server code. Typically, you convert HTML elements to HTML server controls only if you have some reason to want to program them from server code.

Web server controls   These are controls specific to Web Forms that provide more features than HTML server controls and do not map directly to HTML elements.

HTML Server Control Features

An object model that you can program against on the server using the familiar object-oriented techniques programmatically in server code.

A set of events for which you can write event handlers in much the same way you would in a client-based form, except that the event is handled in server code.

The ability to handle events in client script. Automatic maintenance of the control's state. Interaction with validation controls Data binding

to one or more properties of the control. Support for cascading style sheets.

Web Server Controls Web server controls do not map one-to-one to HTML

server controls. They are defined as abstract controls in which the

actual HTML rendered by the control can be quite different from the model that you program against. For example, a RadioButtonList Web server control might be rendered in a table or as inline text with other HTML.

Web server controls include traditional form controls such as buttons and text boxes as well as complex controls such as tables.

They also include controls that provide commonly used form functionality such as displaying data in a grid, choosing dates, and so on.

Web Control Features A rich object model that provides type-safe programming

capabilities. Automatic browser detection. For some controls, the ability to define your own look for

the control using templates. For some controls, the ability to specify whether a

control's event causes immediate posting to the server or is instead cached and raised when the form is submitted.

Ability to pass events from a nested control (such as a button in a table) to the container control.

What Do Web Server Controls Look Like?

At design time in HTML view, the controls appear in your page in a format such as: <asp:button attributes runat="server"/> The attributes in this case are not those of

HTML elements. Instead, they are properties of the Web control.

When the Web Forms page runs, the Web server control is rendered on the page using appropriate HTML, which often depends not only on the browser type but also on settings that you have made for the control.

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now:<asp:label runat="server" id="lblTime"/> </p></body></html>

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /> </p></body></html>

Built-in ASP tag:a label

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

Identifies a tag that must run at the server

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

C# code-declaration block

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

Execute this code when the page is loaded

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

Set Text Property of lblTime

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

Now is a property of the DateTime Class(current date/time)

Your first ASP.Net Page<html><head><title>My First ASP.NET Page</title><script runat="server" language="C#">protected void Page_Load(Object s, EventArgs e){ lblTime.Text = DateTime.Now.ToString();}</script></head>

<body><p>Hello there!</p><p>The time is now: <asp:label runat="server" id="lblTime" /></p></body></html>

ToString( ) is a conversion method of Now

Displaying your ASP.Net Page

To run without debugging, Go to the Debug Menu

Choose: Start without Debugging The File will open in

the browser with a temporary local host, i.e.

http://localhost: 1733/Chapter1/FirstPage.aspx

View Source of Your Page All the ASP.Net code is gone!

The web browser thinks this is a regular HTML page

The server has processed the ASP.Net code and sent back pure HTML

Summary The .Net Framework allows developers to

use a common library or framework of classes across many programming platforms

ASP.Net is server-side technology for developing web applications

Creating a ASP.Net in theVisual Studio .Net environment creates the same code, but adds many productivity tools, debugging, project management, etc.

We created a simple Web Page in ASP.Net with a Web Server Control