Chapter 1 - Introduction

Dr. Stephanos Mavromoustakos

Software Requirements

 Microsoft Visual Web Developer 2008 Express Edition (free online or part of Visual Studio 2008)  SQL Server 2005 Express  Note: Installing VWD may take up to several hours

What is .NET?

A Microsoft strategy and new technology for delivering software services to the desktop and to the web  

The .NET Common Language Runtime (CLR)

Common Language Infrastructure (CLI)

Aim of CLI and CLR: interoperability

A component in any .NET language can:  Inherit from any other .NET language class  Call the methods of any other .NET language class  Subclass any class from any .NET language

Common Language Runtime Type System

Compilers use the runtime type system to produce compatible components type

Components C# VB C++ Compilers

Common Type System

Runtime Environment

Framework Overview

VB C++ C# JScript Common Language Specification … Web Forms (ASP.NET) Win Forms Data and XML Base Class Library Common Language Runtime

ASP vs ASP.NET

  The latest version of ASP is known as ASP.NET

Visual Studio .NET is a developer application used to create ASP.NET Web applications  ASP: server side technology for creating dynamic web pages using scripting languages e.g VB script.

 ASP.NET: server side technology for creating dynamic web pages using Fully Fledged programming languages supported by .NET

 VB.NET: our chosen language for writing ASP.NET pages

ASP.NET

   The latest version of ASP is known as ASP.NET

Visual Studio .NET is a developer application used to create ASP.NET Web applications There are two main types of Web resources created with ASP.NET applications  WebForms are ASP.NET pages within an ASP.NET application   Web Services are ASP.NET Web pages that contain publicly exposed code so that other applications can interact with them Web Services are identified with the file extension .asmx

WebForms

  The ASP.NET WebForm is separated into two logical areas:   The HTML template A collection of code behind the WebForm The HTML template   Contains the design layout, content, and the controls Creates the user interface, or presentation layer   Instructs the browser how to format the Web page Is created using a combination of HTML controls, HTML Server controls, Mobile Controls, and ASP.NET controls

Server Controls

 HTML Server controls are similar to the HTML controls, except they are processed by the server  Add runat = "server" to the HTML control to transform it into an HTML Server control  HTML control:  HTML Server control: Yes  Server-side programs can interact with the control before it is rendered as a plain HTML control and sent to the browser

ASP.NET Controls

    ASP.NET form controls will create the HTML code ASP.NET Server controls are organized as:     ASP.NET Form Controls Data Validation Controls User Controls Mobile Controls ASP.NET controls are usually identified with the prefix asp: followed by the name of the control ASP.NET button:

HTML Server Vs ASP.NET Server, Controls

  ASP.NET form controls can interact with client side events such as when the user clicks on a button  When the event occurs, ASP.NET can trigger a script to run on the server ASP.NET form controls also have different properties than their HTML server control counterparts  HTML Server label control  Message1.InnerHTML = "Product 1"  ASP server label control  Message2.Text = "Product 2"

User Controls

      User controls are external files that can be included within another WebForm User controls allow you to reuse code across multiple files For example, you can create a user control that displays the a navigation bar You can use this control on the home page; they are often used for creating self-contained code, headers, menus, and footers User controls replace the functionality of ASP server-side include pages They are identified with the file extension .asmx

Other ASP.NET Server Controls

 Data validation controls  A series of controls that validate form data without extensive JavaScript programming  Mobile controls  A series of controls that provide form functionality within wireless and mobile devices  Literal controls  Page content that is not assigned to a specific HTML control such as a combination of HTML tags and text to the browser

The Code Behind

 Server programs are written in a separate file known as the code behind the page  By separating the programming logic and presentation layer, the application becomes easier to maintain  Only Server controls can interact with the code behind the page  Written in any ASP.NET compatible language such as Visual Basic .NET, C#, Perl, or Java   Filename is the same as the WebForm filename Add a file extension that identifies the language   Visual Basic .NET use .vb (mypage.aspx.vb) C# use .cs (mypage.aspx.cs)

Compiling the Page Class

  The compiled code behind the page is the class definition for the page   A class is a named logical grouping of code The class definition contains the functions, methods, and properties that belong to that class In Visual Studio .NET the process of compiling a class is called building   When you build the application, you compile the code into an executable file Visual Studio .NET compiles the code behind the page into an executable file and places the file in the bin directory

Page Class Events

    The Page Class consists of a variety of methods, functions, and properties that can be accessed within the code behind the page The first time a page is requested by a client, a series of page events occurs The first page event is the Page_Init event which initializes the page control hierarchy The Page_Load event loads any server controls into memory and occurs every time the page is executed

Page class events

 Page_init  Page_load  Server_Controls  Page_prerender  Page_Unload

How ASP.NET works

 When .NET is installed, IIS is configured to look for files with the .aspx extension and to use the ASP.NET module (aspnet_isapi.dll) to handle them.

 ASP.NET parses the .aspx file and arranges it in a predefined class definition and generates an asp.net page object.

 The page object generates html that is sent back to IIS and then the browser.

 NOTE: only .aspx files are parsed (if it is pure html don’t save it as an aspx file as it will slow down the server.

Page Serving Model

Asp.Net Dynamic Serving Model Server Object Models Request, Response, Session, Application, ...

Web Server http::GET HTML Javascript Postback http::POST via Javascript event handler from a Form control Control Model Asp Page Model Aspx C# Event handlers HTML CSS ADO.Net

Document Object Model (DOM) Renderer Relational Data Model Flow Model Box Model Browser

Web application project files

AssemblyInfo.vb

Info about the compiled project file stored in /bin and named project.dll

Global.asax

Global.asax.resx

Global.asax.vb

Project.sln

Project.suo

Event handler commands visible to all web forms in a project Define application resources such as text strings, images. Can change without recompiling project.

Asp.net code for application events eg session.start

Stores links to all project files VS.NET IDE configuration info for the proj.

Project.vbproj

Configuration and build settings for project files.

Web application project files cont.

Project.vbproj.webinfo

Project.vsdisco

Styles.css

Web.config

Webform.aspx

Webform.aspx.resx

URL to project web server Enables search for web services Project style sheet Project and folder configuration information Web form .aspx file;Html Resources in corresponding web form Webform.aspx.vb

Code written for the form (code behind) Bin\project.dll

Compiled project output file (assembly) Bin\project.pdb

Debugging information used by developer



ASP.Net Page Contents

An ASP.Net page contains:       Directives for the compiler, which must include a <@Page … > directive.

Literal HTML content, intended for the client Code in C#, VB, Jscript.Net. The Code will:  Respond to client-side events that result in a PostBack to the server and may also:  generate HTML for client   get or send data to a database on this or a remote server interact in some way with the server’s file system Traditional script, e.g.: Javascript or Vbscript Embedded ASP.Net server controls   Means to collect information from, and present information to, clients Control state is preserved in transactions between client and server using a hidden viewstate.

Server HTML controls, based on the traditional HTML controls  Also manages information between client and server. Preserving state requires more work on programmer’s part.

Server Controls within Visual Studio .NET

 In Visual Studio .NET most of the ASP.NET Server controls are located on the Web Forms tab in the toolbox

Server controls with Visual Studio.NET

Namespace

 The base class libraries are organized into logical groupings of code called namespaces  A namespace is a hierarchical way to identify resources in .NET

 The System object is at the top of the namespace hierarchy, and all objects inherit from it   ASP.NET: System.Web namespace WebForms: System.Web.UI namespace   HTML Server Controls: System.Web.UI.Control.HTMLControl

ASP.NET Server Controls: System.Web.UI.Control.WebControl

Importing Namespaces

 Visual Studio .NET adds references to your projects ’ commonly used namespaces by default  You can import the namespaces into your page using the @Import directive  The following is the syntax for importing a .NET namespace <%@ Import NamespaceName %>  Below is a sample of how you would import the ASP.NET Page class <%@ Imports System.Web.UI.Page %>

Some ASP.NET namespaces

System Defines fundamental data types eg system.string

System.Collections

System.IO

Definitions and classes for creating various collections File reading & writing operations System.Web

System.Web.UI

System.Web.UI.web

controls Support browser/server communication Creates the Page object whenever an .aspx page is requested Classes and definitions to create server controls

My first ASP .NET Page

FILE  New Web Site (Shift-Alt-N)

My first ASP .NET Page

My first ASP .NET Page

Type

Hello World!

Welcome to Web Programming Class on <%=DateTime.Now.ToString()%>

Debug Menu  Start without Debugging (Ctrl+F5)

Understanding HTML

 denotes the start and end of the page e.g. all content goes here  contains data about the page including its title   denotes the start and end of the body of the page e.g. Page body goes here  links one page to another e.g. Click to visit EUC

Understanding HTML

 used to embed images in a page e.g.  bold, italic, underline e.g. This is bold textwhile this is italic 

, , <select>, <input> used for input forms that allow users of a web site to submit information to the server  <table>creates a table<tr>row<td>column e.g. <table> <tr> <td>this is a cell in Column 1</td> <td>this is a cell in Column 2</td> </tr> </table></p> <a id="p32" href="#"></a> <h3>Understanding HTML</h3> <p>   <ul>numbered lists <ol>look of the list e.g. unordered or ordered <li> items in a list e.g. <ul><li>First item in list</li>  <li>Second item in list</li></ul>  <span>this tag is used to wrap and influence other parts of the document. It appears as <i>inline, </i>so it adds no additional line break to the page e.g. <p>normal text while <span style=color: red;”this is red</span></p>  <div>It acts as a <i>block element </i>which causes a line break after the <div> tag by default e.g. <div> this is text on line 1</div> <div>this is text on a new line</div></p> <a id="p33" href="#"></a> <h3>My 2</h3> <p>nd</p> <h3>ASP .NET Web Page</h3> <p>       File  New Web site Right Click on the Solution Explorer (it says something like C:\..\Website2\ From the context menu that appears, choose Add New Item In the new window that appears, click Web Form and Type <b>ControlsDemo </b>as the name. Click OK.</p> <p>Switch the page to Design View by clicking the Design button at the bottom of the Document Window The Toolbox will open (or press Ctrl-Alt-X or hover your mouse over the toolbox). Click the pin icon to make it visible at all times. Drag a Textbox and a Button</p> <a id="p34" href="#"></a> <h3>My 2</h3> <p>nd</p> <h3>ASP .NET Web Page</h3> <a id="p35" href="#"></a> <h3>My 2</h3> <p>nd</p> <h3>ASP .NET Web Page</h3> <p> Right-click the button in Design View and choose Properties. In the Properties Grid, locate the Text property and change it to <b>Submit</b>  Press Ctrl-F5 to open the page in your default browser</p> <a id="p36" href="#"></a> <h3>My 2</h3> <p>nd</p> <h3>ASP .NET Web Page</h3> </div> </section> </div> </div> </div> </main> <footer> <div class="container mt-3"> <div class="row justify-content-between"> <div class="col"> <a href="/"> <img src="/theme/studyslide/static/logo-slideum.png" /> </a> </div> </div> <div class="row mt-3"> <ul class="col-sm-6 list-unstyled"> <li> <h6 class="mb-3">Company</h6> <li> <i class="fa fa-location-arrow"></i> Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040 <li> <i class="fa fa-phone"></i> +357 64-733-402 <li> <i class="fa fa-envelope"></i> info@slideum.com </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Links</h6> <li> <a href="/about">About</a> <li> <a href="/contacts">Contact</a> <li> <a href="/faq">Help / FAQ</a> </ul> <ul class="col-6 col-sm-3 list-unstyled"> <li> <h6 class="mb-3">Legal</h6> <li> <a href="/terms">Terms of Service</a> <li> <a href="/privacy">Privacy policy</a> <li> <a href="/page.html?code=public.usefull.cookie">Cookie policy</a> <li> <a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a> </ul> </div> <hr> <p>slideum.com © 2024, Inc. All rights reserved.</p> </div> </footer> <div class="modal directory" id="directory-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Directory</h5> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> </div> </div> </div> <script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script> <script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script> <script> var __path_directory = [ ] !function __draw_directory(data, root, uuid) { var ul = $('<ul>', uuid && { id: 'category' + uuid, class: !__path_directory.includes(uuid) ? 'collapse' : null }); for (var item in data) { var li = $('<li>').appendTo(ul); if (item = data[item], item.children) { li.append('<a href=#category' + item.id + ' data-toggle=collapse>') __draw_directory(item.children, li, item.id); } else { li.append('<a href=' + item.url + '>'); } var a = $('> a', li).addClass('item').text(item.name) .append($('<a class="link fa fa-external-link" href=' + item.url + '>')); if (item.id === +__path_directory.slice(-1)) { a.addClass('active'); } /* if (item.id !== __path_directory[0]) { a.addClass('collapsed'); } */ } root.append(ul); } ([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside')); var __root_directory = $('#directory-aside > ul'); $('#directory-aside') .on('show.bs.collapse', function() { //console.log('show.collapse') }) .on('hide.bs.collapse', function() { //console.log('hide.collapse') }); $('#directory-modal') .on('show.bs.modal', function() { $('[class$="body"]', this).prepend(__root_directory); }) .on('hide.bs.modal', function() { $('#directory-aside').prepend(__root_directory); }); $('.directory-mobile').on('click', function(e) { e.preventDefault(); }); $('.directory .link').on('click', function(e) { e.stopPropagation(); }); </script> <script> function scrollToViewport() { $('html, body').stop().animate( { scrollTop: $('.navbar').outerHeight() }, 1000); } setTimeout(scrollToViewport, 1000); $(window).on('orientationchange', scrollToViewport); $('[data-toggle="tooltip"]').tooltip(); </script> <script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter28397281 = new Ya.Metrika({ id:28397281 }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <style> @media screen and (max-width: 768px) { .cc-revoke { display: none; }} </style> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function() { window.cookieconsent.initialise( { content: { href: "https://slideum.com/dmca" }, location: true, palette: { button: { background: "#fff", text: "#237afc" }, popup: { background: "#007bff" }, }, position: "bottom-right", revokable: true, theme: "classic", type: "opt-in" })}); </script> </body> </html>