C# Advanced L09-HTML5+ASP
-
Upload
mohammad-shaker -
Category
Software
-
view
241 -
download
2
description
Transcript of 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)
HTML5
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.NET
ASP.NET
ASP.NET
ASP.NET
ASP.NETLive Demo
ASP MVCServer Side
ASP.NET Core
Web Technologies
Presentation
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
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
The MVC Pattern for WebHTTP Request
/Some/Page/USER
The MVC Pattern for WebHTTP Request
/Some/Page/USER
HTTP Response
The MVC Pattern for WebHTTP Request
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
The MVC Pattern for Web
Controller
HTTP RequestFront controller
(dispatcher)
Model (data)
View(render UI)
HTTP Response
/Some/Page/
Delegate request
CRUD modelSelect view &
pass data
USER
The MVC Pattern for Web
Controller
HTTP RequestFront controller
(dispatcher)
Model (data)
View(render UI)
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD modelSelect view &
pass data
USER
The MVC Pattern for Web
Controller
HTTP RequestFront controller
(dispatcher)
Model (data)
View(render UI)
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD modelSelect view &
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
HTTP RequestFront controller
(dispatcher)
Model (data)
View(render UI)
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD modelSelect view &
pass data
USER
ASP.NET MVC
C# Class
HTTP RequestFront controller
(dispatcher)
Model (data)
ViewRazor
HTTP Response
/Some/Page/
Use model data
Delegate request
CRUD modelSelect view &
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