C# Advanced L09-HTML5+ASP

Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2011, 2012, 2013, 2014
C# Advanced
L09 –HTML5, ASP.NET and ASP.NET MVC

MobileAndroid 18k+ devices / Fragmentation

APIslike googlemaps, yahoo stocks, etc.

Web Technologies
•HTTP / HTTPS (URL, GET/POST)
•Client-side:
–HTML / XHTML (Extensible HyperTextMarkup 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
Browser
Web
Service
www.google.com
<html>
<head>
<title>Google</title>
</head>
<body>
...
</body>
</html>

HTTP | Request / Response
Browser
Web
Service
www.google.com

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

HTTP | Method / Status Codes
Browser
Web
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)

WhatisHTML5
•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, eventhandlers 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
HTML2
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
HTML2
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 HTMLfirst 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 XHTMLdraft
•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 Web
openDatabase('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"];
}

Java Script and jQueryframeworks

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 TrygveReenskaugas part of the Smalltalk
•Code reusability and separation of concerns
•Originally developed fordesktop, then adaptedfor 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

The MVC Pattern for Web
HTTP Request
/Some/Page/
USER

HTTP Request
/Some/Page/
USER
HTTP Response

HTTP Request
Front controller
(dispatcher)
/Some/Page/
USER
HTTP Response

Controller
HTTP Request
Front controller
(dispatcher)
HTTP Response
/Some/Page/
Delegate request
USER

Controller
HTTP Request
Front controller
(dispatcher)
Model (data)
View
(render UI)
HTTP Response
/Some/Page/
Delegate request
CRUD model
Select view & pass data
USER

Controller
HTTP Request
Front controller
(dispatcher)
Model (data)
View
(render UI)
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD model
USER

MVC Steps
•Incoming request routedto Controller
–For web: HTTP request
•Controllerprocesses request and creates presentation Model
–Controller also selects appropriate result (view)
•Modelis passed to View
•Viewtransforms Modelinto appropriate output format (HTML)
•Response is rendered (HTTP Response)
49

ASP.NET MVC
Controller
HTTP Request
Front controller
(dispatcher)
Model (data)
View
(render UI)
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD model
USER

ASP.NET MVC
C# Class
HTTP Request
Front controller
(dispatcher)
Model (data)
View
Razor
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD model
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

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

C# Advanced L09-HTML5+ASP

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (18)

Similaire à C# Advanced L09-HTML5+ASP

Similaire à C# Advanced L09-HTML5+ASP (20)

Plus de Mohammad Shaker

Plus de Mohammad Shaker (20)

Dernier

Dernier (20)

C# Advanced L09-HTML5+ASP