c# advanced l09-html5+asp

Mohammad Shaker

mohammadshaker.com

@ZGTRShaker

2011, 2012, 2013, 2014

C# AdvancedL09 –HTML5, ASP.NET and ASP.NET MVC

Web Science

Web Security

Mobile FirstBootstrap

MobileAndroid 18k+ devices / Fragmentation

Ubiquitous Computing

APIslike google maps, yahoo stocks, etc.

Web Technologies

• HTTP / HTTPS (URL, GET/POST)

• Client-side:

– HTML / XHTML (Extensible HyperText Markup Language)

– JavaScript / VBScript (client-side scripting)

– Applets / ActiveX controls

• Server-side:

– PHP

– Phython

– JSP (Java Server Pages)

– ASP (Active Server Pages)

– ASP.NET (next generation of ASP)

HTTPHyperText Transfer ProtocolRequest / Response

HTTP | Request / Response

BrowserWeb

Service

www.google.com

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

...

</body></html>

HTTP | Request / Response

BrowserWeb

Service

www.google.com

HTTPHyperText Transfer ProtocolRequest / ResponseHTTP-Method | GET / POST / PUT /DELETE ...HTTP Status-Codes | 200 /404 /403 /500 ...

HTTP | Method / Status Codes

BrowserWeb

Service

www.google.com

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

...

</body></html>

HTTP/1.1 200 OK

GET / HTTP/1.1

Server-Side Code

• What is Server-Side code?

– Software that runs on the server, not the client

– Receives input from

• URL parameters

• HTML form data

– Can access server-side databases, e-mail

servers, files, mainframes, etc.

– Dynamically builds a custom HTML response

for a client

HTTP request(form data, HTTP header data)

HTTP responseHTML, XML

ASP/Php/.. page(static HTML, server-side logic)

What is HTML5

• Next major version of HTML.

• The Hypertext Markup Language version 5 (HTML5) is the successor of HTML

4.01, XHTML 1.0 and XHTML 1.1

• Adds new tags, event handlers to HTML. Many more….

• HTML5 is not finished

16

HTML5 ≈ HTML5 + CSS 3 + JavaScript

A Rough History of Web Standards

91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14

HTML 1 HTML 2 HTML 4 XHTML 1 HTML 5

CSS 1 CSS 2 T-less D Web 2.0 CSS3

JS ECMA,DOM

DOM 2 Ajax DOM,APIs

A Rough History of Web Standards

91-92 93-94 95-96 97-98 99-00 01-02 03-04 05-06 07-08 09-10 11-12 13-14

HTML 1 HTML 2 HTML 4 XHTML 1 HTML 5

CSS 1 CSS 2 T-less D Web 2.0 CSS3

JS ECMA,DOM

DOM 2 Ajax DOM,APIs

2004 WHATWG started

2008 W3C Working Draft

2012 (2010) W3C Candidate Rec

2022 W3C Rec

1996 – CSS 1 W3C Rec

1998 – CSS 2 W3C Rec

1999 – CSS 3 Proposed

2005 – CSS 2.1 W3C Candidate Rec

2001 – CSS 3 W3C Working Draft

HTML 5 CSS

Past, Present, Future

• 1991 HTML first mentioned – Tim Berners-Lee – HTML Tags

• 1993 HTML

• 1993 HTML 2 draft

• 1995 HTML 2 – W3C

• 1995 HTML 3 draft

• 1997 HTML 3.2 – “Wilbur”

• 1997 HTML 4 - ”Cougar” - CSS

• 1999 HTML 4.01

• 2000 XHTML draft

• 2001 XHTML

• 2008 HTML5 / XHTML5 draft

• 2011 feature complete HTML5

• 2022 HTML5

Rich Internet Applications (RIA)

• Space between the internet and the desktop

• Apps that look good and behave well

• Adobe Air/Flash, Java, Silverlight, Gears

• Availability

– Anywhere a web browser is available

– As a desktop widget or application

– Part of a mobile application store

What is HTML?

<!doctype>

<a>

<abbr>

<acronym>

<address>

<applet>

<area>

<b>

<base>

<basefont>

<bdo>

<big>

<blockquote>

<body>

<br>

<button>

<caption>

<center>

<cite>

<code>

<col>

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame>

<frameset>

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<head>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<isindex>

<kbd>

<label>

<legend>

<li>

<link>

<map>

<menu>

<meta>

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param>

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>

What’s New?

• Local Storage

• SQL WebopenDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {

db.changeVersion('', '1.0', function (t) {

t.executeSql('CREATE TABLE docids (id, name)');

}, error);

});

function saveState(text){

localStorage["localStorageDemo"] = text;

}

function restoreState(){

return localStorage["localStorageDemo"];

}

New Input Types

Java Script and jQueryframeworks

ASP.NETServer Side

Server-Side Code

• What is Server-Side code?

– Software that runs on the server, not the client

– Receives input from

• URL parameters

• HTML form data

– Can access server-side databases, e-mail

servers, files, mainframes, etc.

– Dynamically builds a custom HTML response

for a client

HTTP request(form data, HTTP header data)

HTTP responseHTML, XML

ASP/Php/.. page(static HTML, server-side logic)

ASP.NET

ASP.NETLive Demo

ASP MVCServer Side

ASP.NET Core

Web Technologies

Presentation

ASP.NET Core

Caching

Routes

Pages

Profile

ASP.NET

.NET

Handlers

Controls

Roles

Globalization

…

Master Pages

Membership

Web Technologies

Presentation

The MVC Pattern

• Model–view–controller (MVC) is a software architecture pattern

• Originally formulated in the late 1970s by Trygve Reenskaug as part of the

Smalltalk

• Code reusability and separation of concerns

• Originally developed for

desktop, then adapted

for internet applications

Model-View-Controller

• Model– Set of classes that describes the data we are working with as well as the business

– Most likely a Data Access Layer

• View– Defines how the application’s user interface (UI) will be displayed

– May support master views (layouts) and sub-views (partial views or controls)

– Web: Template to dynamically generate HTML

• Controller– The core MVC component

– Process the requests with the help of views and models

– A set of classes that handles

• Communication from the user

• Overall application flow

• Application-specific logic

– Every controller has one or more "Actions"

MVC Frameworks

• CakePHP (PHP)

• CodeIgniter (PHP)

• Spring (Java)

• Perl: Catalyst, Dancer

• Python: Django, Flask, Grok

• Ruby: Ruby on Rails, Camping, Nitro, Sinatra

• JavaScript: AngularJS, JavaScriptMVC, Spine

• ASP.NET MVC (.NET Framework)

41

http://cakephp.org/

http://ellislab.com/codeigniter

http://www.springsource.org/

https://www.djangoproject.com/

http://rubyonrails.org/

http://angularjs.org/

http://javascriptmvc.com/

http://spinejs.com/

http://www.asp.net/mvc

The MVC Pattern for WebHTTP Request

/Some/Page/USER


/Some/Page/USER

HTTP Response


Front controller (dispatcher)/Some/Page/USER

HTTP Response

The MVC Pattern for Web

Controller

HTTP RequestFront controller

(dispatcher)

HTTP Response

/Some/Page/

Delegate request

USER


Controller


(dispatcher)

Model (data)

View(render UI)

HTTP Response

/Some/Page/

Delegate request

CRUD modelSelect view &

pass data

USER


Controller


(dispatcher)

Model (data)

View(render UI)

HTTP Response

/Some/Page/

Use model data

Delegate request


pass data

USER

MVC Steps

• Incoming request routed to Controller

– For web: HTTP request

• Controller processes request and creates presentation Model

– Controller also selects appropriate result (view)

• Model is passed to View

• View transforms Model into appropriate output format (HTML)

• Response is rendered (HTTP Response)

49

ASP.NET MVC Model

ASP.NET MVC

Controller


(dispatcher)

Model (data)

View(render UI)

HTTP Response

/Some/Page/

Use model data

Delegate request


pass data

USER

ASP.NET MVC

C# Class


(dispatcher)

Model (data)

ViewRazor

HTTP Response

/Some/Page/

Use model data

Delegate request


pass data

USER

The Technologies

• Technologies that ASP.NET MVC uses

– C# (OOP, Unit Testing, async, etc.)

– HTML(5) and CSS

– JavaScript (jQuery, KendoUI, etc.)

– AJAX, Single-page apps

– Databases (MS SQL)

– ORM (Entity Framework and LINQ)

– Web and HTTP

New ASP.NET MVC Project

Internet App Project Files

All controllers and actions

Configuration file

Application_Start() – The entry point of the application

Static files (CSS, Images, etc.)

JavaScript files (jQuery, Modernizr, knockout, etc.)

View templates

_Layout.cshtml – master page (main template)

URL Routning

• Normal ASP.NET

– http://server/application/Products.aspx?id=4

• ASP.NET MVC

– http://server/application/Products/show/beverages

• The URL’s are interpreted by a RouteHandler and known as routes to the Controller.

Routing Example, http://localhost/Products/ById/3

57