SlideShare a Scribd company logo
CSE 136 - Lecture 7
   Presentation Overview
   MVC (Model, View, Controller)
   ASP.NET MVC 3.0
     Routing in detail
     Controller in detail

     View in detail
Introduction
Presentation Layer
   It’s what users see
   Handling complicated page flows
   Two components of the presentation layer
     User Interface - What you see & interacting with
     Presentation Model/Logic - Data flow between the
      business logic and presentation layer
Presentation model vs Business model
MVC - Model View Controller
MVC
MVC - Pro and Con
   Pro
     Decoupling    – GUI/CSS developers do their
      job, C# developers code the Controller, model
      and tests
     You can test the logical flow by a test program to
      talk to the Controller directly
   Con
     Viewhas intimate knowledge of the Model (when
     page refresh)
ASP.NET
   Uses .NET Framework
   Compiled
   Multi-language (C#, VB, C++, etc)
   Host under CLR
   Code execution (i.e. Garbage collection)
   Object-oriented
   AJAX development
ASP.NET - Page Class Functions
   Request - Handle request from user
       Request.QueryString.Get("pid");
       Request.Form.Get("first_name");
       HttpCookie myCookie = Request.Cookies["user_id"];
   Response - Handle response to user
       Response.Redirect("newpage.aspx");
       Response.Cookies.Add(myHttpCookie);
   Server - URL encode/decode
       Server.URLEncode(url1);
   Application - Application variables (name/value pair)
       Application["imageDir"] = "image.myserver.com";
       <img src="<%= Application["imageDir"]%>/images/1.gif">
   Session - Storage per user. It Expires/times out
       Session["first_name"] = "John";
ASP.NET MVC
   Powerful Routing System
     Good  for search engine
     Friendly URL (copy & paste)

   Builds on ASP.NET platform
     object oriented
     multiple languages

   Easy to develop (debugging)
   Easy to deploy (going live, updates)
MVC Architecture 1
MVC Architecture 2


 Some companies
 Use the same model
MVC Web - Directories
 Directory    Purpose
 /Controllers Where you put Controller classes that handle URL requests
 /Models      Where you put classes that represent and manipulate data
 /Views       Where you put UI template files that are responsible for rendering output
 /Scripts     Where you put JavaScript library files and scripts (.js)
 /Content     Where you put CSS and image files, and other non-dynamic/non-JavaScript
              content
 /App_Data Where you store data files you want to read/write.




                                                     Site master files
                                                     (header, footer, leftnav, etc)
MVC Web - Routing
MVC Web - Routing example



  URL
  /
  /Students/
  /Students/Details/1
  /Students/Edit/1
  /Books/
  /Books/List
MVC Web - Routing order
MVC Web - more Routing

    http://www.mysite.com/Catalog/Red




    http://www.mysite.com/Catalog
MVC Web - Generate URL
MVC Web - controller 1
MVC Web - controller 2
MVC Web - controller input 1

     Request.QueryString       NameValueCollection        GET variables sent with this request
     Request.Form              NameValueCollection        POST variables sent with this request
     Request.Cookies           HttpCookieCollection       Cookies sent by the browser with this
                                                          request
     Request.HttpMethod        string                     The HTTP method (verb, e.g., GET or POST)
                                                          used for this request
     Request.Headers           NameValueCollection        The full set of HTTP headers sent with this
                                                          request
     Request.Url               Uri                        The URL requested
     Request.UserHostAddress   string                     The IP address of the user making this
                                                          request
     RouteData.Route           RouteBase                  The chosen RouteTable.Routes entry for this
                                                          request
     RouteData.Values          RouteValueDictionary       Active route parameters (either extracted
                                                          from the URL, or default values)
     HttpContext.Application   HttpApplicationStateBase   Application state store
     HttpContext.Cache         Cache                      Application cache store
     HttpContext.Items         IDictionary                State store for the current request
     HttpContext.Session       HttpSessionStateBase       State store for the visitor’s session
     User                      IPrincipal                 Authentication information about the
                                                          logged-in user
     TempData                  TempDataDictionary         Temporary data items stored for the current
                                                          user (more about this later)
MVC Web - controller input 2




       Request.QueryString /index.aspx?id=12345
       Request.Form        <input type=text name="City">
       RouteData.Values    /Catalog/Red
MVC Web - controller output 1
MVC Web - controller output 2
MVC Web - controller output 3
MVC Web - controller output 4
MVC Web - View 1
MVC Web - View 2
MVC Web - View 3
MVC Web - View 4
MVC Web - View 5
MVC Web - View 6




Output:
MVC Web - View 7
MVC Web - View 8
   Partial Views
    A  Web Forms user control (i.e., an ASCX file)
     Compiled as a class that inherits from
      ViewUserControl (which in turn inherits from
      UserControl, the base class for all Web Forms
      user controls)
Break time
   MVC Model will be in the demo
Demo
   Service Layer code
   MVC tutorial
   MVC 136 solution – debugged mode
     Model  (including service call)
     View (including ascx)

     Site.Master

     Controller

     Unit Test
Review question
   What are the 5 page class functions?
   Does the routing order matter?
   Where is the controller receiving its input value from?
   When do you use ViewData[“”]?
   What is the keyword to access the view model?
Your assignment
   Due next Thursday
   GUI Implementation using ASP.NET MVC 3.0
     Model, view, controller
     MVC Tests

     Write DTO between SL and PL in Presentation
      Layer
   Must implement one user control (ascx) of
    some kind (see 136 sample mvc3 project)
   Use simple CSS if possible
References
   .NET : Architecting Applications for the
    Enterprise
   MVC 3.0

More Related Content

PPTX
PPTX
PPTX
PPTX
PPTX
PPTX
PPTX
CloudConnect 2011 - Building Highly Scalable Java Applications on Windows Azure
PPTX
Ef code first
CloudConnect 2011 - Building Highly Scalable Java Applications on Windows Azure
Ef code first

What's hot (20)

PPT
Three Software Architecture Styles
PPT
Java database connectivity
PPTX
Microsoft Entity Framework
PPT
JDBC Tutorial
PDF
Database and Java Database Connectivity
PPT
PPT
Jdbc (database in java)
PPTX
PPT
PPTX
Microsoft SQL Server 2008
PPTX
Entity Framework Overview
PPTX
J2EE pattern 5
PDF
Overview Of JDBC
PDF
jsf2 Notes
PPTX
Entity framework and how to use it
PDF
Ajp notes-chapter-05
PPT
Jdbc complete
PPT
Jdbc drivers
PPTX
J2EE PPT --CINTHIYA.M Krishnammal college for women
Three Software Architecture Styles
Java database connectivity
Microsoft Entity Framework
JDBC Tutorial
Database and Java Database Connectivity
Jdbc (database in java)
Microsoft SQL Server 2008
Entity Framework Overview
J2EE pattern 5
Overview Of JDBC
jsf2 Notes
Entity framework and how to use it
Ajp notes-chapter-05
Jdbc complete
Jdbc drivers
J2EE PPT --CINTHIYA.M Krishnammal college for women
Ad

Similar to Day7 (20)

PPTX
ASP.NET - Building Web Application..in the right way!
PPTX
ASP.NET - Building Web Application..in the right way!
PPTX
8-9-10. ASP_updated8-9-10. ASP_updated8-9-10. ASP_updated
PDF
Bt0083 server side programing
PPTX
Spring 3.x - Spring MVC - Advanced topics
PPT
Jsp/Servlet
PPTX
Web api
PPT
Knowledge Sharing : Java Servlet
PDF
Building RESTful applications using Spring MVC
PDF
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 4...
ODP
springmvc-150923124312-lva1-app6892
ODP
Java Spring MVC Framework with AngularJS by Google and HTML5
PPTX
Spring mvc
PPTX
SharePoint Client Object Model (CSOM)
PPTX
Asp.Net MVC3 - Basics
PPT
Asp.net
PPTX
ASP MVC asderfewerwrwerwrefeewwfdewfewfdsfsd
PPTX
SERVLETS (2).pptxintroduction to servlet with all servlets
PDF
Java Web Programming [2/9] : Servlet Basic
PPTX
Model View Controller-Introduction-Overview.pptx
ASP.NET - Building Web Application..in the right way!
ASP.NET - Building Web Application..in the right way!
8-9-10. ASP_updated8-9-10. ASP_updated8-9-10. ASP_updated
Bt0083 server side programing
Spring 3.x - Spring MVC - Advanced topics
Jsp/Servlet
Web api
Knowledge Sharing : Java Servlet
Building RESTful applications using Spring MVC
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 4...
springmvc-150923124312-lva1-app6892
Java Spring MVC Framework with AngularJS by Google and HTML5
Spring mvc
SharePoint Client Object Model (CSOM)
Asp.Net MVC3 - Basics
Asp.net
ASP MVC asderfewerwrwerwrefeewwfdewfewfdsfsd
SERVLETS (2).pptxintroduction to servlet with all servlets
Java Web Programming [2/9] : Servlet Basic
Model View Controller-Introduction-Overview.pptx
Ad

Recently uploaded (20)

PPTX
Software Engineering BSC DS UNIT 1 .pptx
PPTX
Presentation on Janskhiya sthirata kosh.
PDF
Mga Unang Hakbang Tungo Sa Tao by Joe Vibar Nero.pdf
PPTX
Revamp in MTO Odoo 18 Inventory - Odoo Slides
PPTX
vedic maths in python:unleasing ancient wisdom with modern code
PDF
Cell Biology Basics: Cell Theory, Structure, Types, and Organelles | BS Level...
PDF
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
PDF
The Final Stretch: How to Release a Game and Not Die in the Process.
PDF
High Ground Student Revision Booklet Preview
PPTX
Cardiovascular Pharmacology for pharmacy students.pptx
PPTX
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
PDF
Landforms and landscapes data surprise preview
PDF
Electrolyte Disturbances and Fluid Management A clinical and physiological ap...
PPTX
Skill Development Program For Physiotherapy Students by SRY.pptx
PDF
Module 3: Health Systems Tutorial Slides S2 2025
PPTX
PPTs-The Rise of Empiresghhhhhhhh (1).pptx
PPTX
NOI Hackathon - Summer Edition - GreenThumber.pptx
PPTX
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
PDF
LDMMIA Reiki Yoga Workshop 15 MidTerm Review
PPTX
Strengthening open access through collaboration: building connections with OP...
Software Engineering BSC DS UNIT 1 .pptx
Presentation on Janskhiya sthirata kosh.
Mga Unang Hakbang Tungo Sa Tao by Joe Vibar Nero.pdf
Revamp in MTO Odoo 18 Inventory - Odoo Slides
vedic maths in python:unleasing ancient wisdom with modern code
Cell Biology Basics: Cell Theory, Structure, Types, and Organelles | BS Level...
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
The Final Stretch: How to Release a Game and Not Die in the Process.
High Ground Student Revision Booklet Preview
Cardiovascular Pharmacology for pharmacy students.pptx
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
Landforms and landscapes data surprise preview
Electrolyte Disturbances and Fluid Management A clinical and physiological ap...
Skill Development Program For Physiotherapy Students by SRY.pptx
Module 3: Health Systems Tutorial Slides S2 2025
PPTs-The Rise of Empiresghhhhhhhh (1).pptx
NOI Hackathon - Summer Edition - GreenThumber.pptx
HISTORY COLLECTION FOR PSYCHIATRIC PATIENTS.pptx
LDMMIA Reiki Yoga Workshop 15 MidTerm Review
Strengthening open access through collaboration: building connections with OP...

Day7

  • 1. CSE 136 - Lecture 7  Presentation Overview  MVC (Model, View, Controller)  ASP.NET MVC 3.0  Routing in detail  Controller in detail  View in detail
  • 3. Presentation Layer  It’s what users see  Handling complicated page flows  Two components of the presentation layer  User Interface - What you see & interacting with  Presentation Model/Logic - Data flow between the business logic and presentation layer
  • 4. Presentation model vs Business model
  • 5. MVC - Model View Controller
  • 6. MVC
  • 7. MVC - Pro and Con  Pro  Decoupling – GUI/CSS developers do their job, C# developers code the Controller, model and tests  You can test the logical flow by a test program to talk to the Controller directly  Con  Viewhas intimate knowledge of the Model (when page refresh)
  • 8. ASP.NET  Uses .NET Framework  Compiled  Multi-language (C#, VB, C++, etc)  Host under CLR  Code execution (i.e. Garbage collection)  Object-oriented  AJAX development
  • 9. ASP.NET - Page Class Functions  Request - Handle request from user  Request.QueryString.Get("pid");  Request.Form.Get("first_name");  HttpCookie myCookie = Request.Cookies["user_id"];  Response - Handle response to user  Response.Redirect("newpage.aspx");  Response.Cookies.Add(myHttpCookie);  Server - URL encode/decode  Server.URLEncode(url1);  Application - Application variables (name/value pair)  Application["imageDir"] = "image.myserver.com";  <img src="<%= Application["imageDir"]%>/images/1.gif">  Session - Storage per user. It Expires/times out  Session["first_name"] = "John";
  • 10. ASP.NET MVC  Powerful Routing System  Good for search engine  Friendly URL (copy & paste)  Builds on ASP.NET platform  object oriented  multiple languages  Easy to develop (debugging)  Easy to deploy (going live, updates)
  • 12. MVC Architecture 2 Some companies Use the same model
  • 13. MVC Web - Directories Directory Purpose /Controllers Where you put Controller classes that handle URL requests /Models Where you put classes that represent and manipulate data /Views Where you put UI template files that are responsible for rendering output /Scripts Where you put JavaScript library files and scripts (.js) /Content Where you put CSS and image files, and other non-dynamic/non-JavaScript content /App_Data Where you store data files you want to read/write. Site master files (header, footer, leftnav, etc)
  • 14. MVC Web - Routing
  • 15. MVC Web - Routing example URL / /Students/ /Students/Details/1 /Students/Edit/1 /Books/ /Books/List
  • 16. MVC Web - Routing order
  • 17. MVC Web - more Routing http://www.mysite.com/Catalog/Red http://www.mysite.com/Catalog
  • 18. MVC Web - Generate URL
  • 19. MVC Web - controller 1
  • 20. MVC Web - controller 2
  • 21. MVC Web - controller input 1 Request.QueryString NameValueCollection GET variables sent with this request Request.Form NameValueCollection POST variables sent with this request Request.Cookies HttpCookieCollection Cookies sent by the browser with this request Request.HttpMethod string The HTTP method (verb, e.g., GET or POST) used for this request Request.Headers NameValueCollection The full set of HTTP headers sent with this request Request.Url Uri The URL requested Request.UserHostAddress string The IP address of the user making this request RouteData.Route RouteBase The chosen RouteTable.Routes entry for this request RouteData.Values RouteValueDictionary Active route parameters (either extracted from the URL, or default values) HttpContext.Application HttpApplicationStateBase Application state store HttpContext.Cache Cache Application cache store HttpContext.Items IDictionary State store for the current request HttpContext.Session HttpSessionStateBase State store for the visitor’s session User IPrincipal Authentication information about the logged-in user TempData TempDataDictionary Temporary data items stored for the current user (more about this later)
  • 22. MVC Web - controller input 2 Request.QueryString /index.aspx?id=12345 Request.Form <input type=text name="City"> RouteData.Values /Catalog/Red
  • 23. MVC Web - controller output 1
  • 24. MVC Web - controller output 2
  • 25. MVC Web - controller output 3
  • 26. MVC Web - controller output 4
  • 27. MVC Web - View 1
  • 28. MVC Web - View 2
  • 29. MVC Web - View 3
  • 30. MVC Web - View 4
  • 31. MVC Web - View 5
  • 32. MVC Web - View 6 Output:
  • 33. MVC Web - View 7
  • 34. MVC Web - View 8  Partial Views A Web Forms user control (i.e., an ASCX file)  Compiled as a class that inherits from ViewUserControl (which in turn inherits from UserControl, the base class for all Web Forms user controls)
  • 35. Break time  MVC Model will be in the demo
  • 36. Demo  Service Layer code  MVC tutorial  MVC 136 solution – debugged mode  Model (including service call)  View (including ascx)  Site.Master  Controller  Unit Test
  • 37. Review question  What are the 5 page class functions?  Does the routing order matter?  Where is the controller receiving its input value from?  When do you use ViewData[“”]?  What is the keyword to access the view model?
  • 38. Your assignment  Due next Thursday  GUI Implementation using ASP.NET MVC 3.0  Model, view, controller  MVC Tests  Write DTO between SL and PL in Presentation Layer  Must implement one user control (ascx) of some kind (see 136 sample mvc3 project)  Use simple CSS if possible
  • 39. References  .NET : Architecting Applications for the Enterprise  MVC 3.0