web development using asp.net mvc at hec
DESCRIPTION
TRANSCRIPT
![Page 1: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/1.jpg)
Web Development using
Visual Studio 2012 & ASP.NET MVC
Adil Ahmed Mughal
![Page 2: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/2.jpg)
Speaker => Adil Ahmed Mughal
Affiliations:
Contact Information:
@adilamughal
http://www.adilmughal.com
![Page 3: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/3.jpg)
What to Expect Today?
• What you must already know?– Object Oriented Programming Language such as Java, C++, C#
– Previous hands on .NET and Visual Studio
– Basic familiarity with web development (HTML, CSS, JavaScript)
• What you will learn?– Understanding of how web works under the hood
– A glance look at Model-View-Controller
– Demonstration of sample build using ASP.NET MVC & Visual Studio 2012
![Page 4: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/4.jpg)
Agenda
1. Web Fundamentals– HTTP Transactions
– Static & Dynamic Web Pages
– Role Web Server - IIS
2. Beginning ASP.NET MVC– Overview of MVC
– MVC Request Lifecycle
– Exploring Model, View, Controller (File -> New Project)
– Demo sample
![Page 5: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/5.jpg)
Web Fundamentals
![Page 6: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/6.jpg)
HTTP Transactions
HTTP Request
HTTP Response
The browser generates a HTTP Request e.g.
GET http://www.adilmughal.com
The server process the request and sends the HTTP Response
containing HTML/JS/CSS for browser to render
![Page 7: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/7.jpg)
HTTP Transactions = HTTP Request + HTTP Response
HTTP Transactions
HTTP Request
HTTP Response
![Page 8: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/8.jpg)
HTTP Request
• Commonly used HTTP Verbs
GET http://www.adilmughal.com HTTP/1.1Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, ... , */*Accept-Language: en-usAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; ... .NET CLR 3.0.04506.30)Host: localhost:80Connection: Keep-Alive
GET Retrieve
POST Update
PUT Create
DELETE Deletes a specified resource
![Page 9: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/9.jpg)
HTTP Response
• Sample Response
![Page 10: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/10.jpg)
Static vs. Dynamic Pages
Static Pages
• Unchanging Content
• Pre-written HTML defines web
pages
• Send exactly the same response
to every request
Dynamic Pages
• Dynamic content
• Utilizes server side languages
such as PHP, ASP.NET, JSP etc.
• May generate different HTML
for each request
![Page 11: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/11.jpg)
Role of Web Server
• Role of Web Server– A piece of software that run on a physical or virtual
machine, which designed to serve web content over the internet
– Typically it monitors port 80 for incoming HTTP Requests
– On the Microsoft platform, IIS is the watchdog intercepting HTTP requests
![Page 12: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/12.jpg)
Uniform Resource Locators
http://www.adilmughal.com/search?label=Visual%20Studio
URL Scheme Host Path Query String
![Page 13: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/13.jpg)
Intro to ASP.NET MVC
![Page 14: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/14.jpg)
Pre-Requisite
• Microsoft Web Platform Installer is one stop shop to get complete ecosystem of web tools to get started– Server, Frameworks, Database, Tools etc.
– Get the installer from http://www.microsoft.com/web/platform/
• Once you install Web Platform Installer, download the following to get started– Visual Studio 2012 Web Express (includes ASP.NET MVC 4)
– Windows Azure SDK (optional, required for deployment on Azure)
![Page 15: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/15.jpg)
Pre-Requisite: Web Platform Installer
![Page 16: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/16.jpg)
ASP.NET MVC
• Web application development framework by Microsoft to easily create dynamic websites
• Built on top of CLR allowing programmer to write ASP.NET code using any .NET Languages (such as C#, VB.NET etc.)
• ASP.NET supports various development models: – Web Pages, MVC (Model View Controller), and Web
Forms.
![Page 17: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/17.jpg)
Overview of MVC
![Page 18: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/18.jpg)
Life Cycle of MVC Request
Browser URL Routing Controller Model View
HTTP Request
new
Invoke actionInvoke method
Lookup view
Render (viewData)
HTML
![Page 19: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/19.jpg)
Controllers
• Routes & Controllers
• Action
![Page 20: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/20.jpg)
Model
• Model Binding
• Validation
![Page 21: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/21.jpg)
Views
• Razor Syntax
• Html Helpers
• Layout
• Partial Views
![Page 22: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/22.jpg)
DEMO
![Page 23: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/23.jpg)
Q & A
![Page 24: Web Development using ASP.NET MVC at HEC](https://reader034.vdocuments.us/reader034/viewer/2022051515/553bb8cb550346e2498b4758/html5/thumbnails/24.jpg)
Web Development using
Visual Studio 2012 & ASP.NET MVC
Thank YOU for your time and attention!
Adil Ahmed Mughal
@adilamughal
http://www.adilmughal.com