A Comparison of Microsoft Web Technologies

{Module one: Course Overview}
Microsoft Web Technologies Comparison
    How do Web Forms, Web Pages and MVC works?
    How does syntax differ from one to another?
    How does server process request for each options?
    What is ASP.NET Core?

Goal: Know how to determine which respective technology should be used in varying scenarios

{Module two: An Introduction to the Microsoft Web Platform}
Introduction
    Web Technology Overview
    Microsoft Web Platform: What does it offer?
    Tooling

Web Technology Overview
    How does the web work?
    How technologies are implemented to support how the web works?

    HTTP request and response:
        Client access resources on server over HTTP
    1. HTTP request:
        made by user
            typing URL into the browser
            click on a link
            fill out a form then submit
    2. Server receives request then performs server-side processing
        code executed on server to fullfill and provide HTTP response back to Client
            HTML
            CSS
            images
            JavaScript
            Whatever is needed
    Different technologies process those request and response differently

    Async HTTP:
        allow browser to make async call
        while stays on page, no flicker
        dynamically display relevant information on page as it is returned

Microsoft Web Platform
    ASP.NET
        Sites
            Web Forms
            Web Pages
            MVC
        Services
            Web API: function "called" across HTTP
            SignalR: for real-time communications

    ASP.NET Core: cross-platform development
        Sites
            Web Pages
            MVC
        Services
            Web API
            SignalR

Tooling
    VS 2015 on Windows:
        ASP.NET
        ASP.NET Core
    VS Code on Windows, Mac OSX, Linux
        ASP.NET Core

Demo Visual Studio Tooling: size dev environment
    Solution centric (VS) vs. Folder centric (VS code)
        VS Code: change cetting
        [In a specific Folder]
        File / Preference / Settings

    Rich UI v. lightweight text-intensive

Summary

{Module three: Understanding How Web Forms Work}
Introduction

Describing Web Forms
  Build dynamic website with drag-and-drop, event-driven model
  Not in ASP.NET Core
  Initially the classic ASP.NET
    Web developer create file for ASP engine to process
    The file contains HTML markup & server-side code, then converted into HTML
  Rapid Application development for Windows Forms Developers:
    Same model applied to Web Forms development
    - Object-oriented
    - Event-driven
    - Supports separation of markup from logic
    - Pre-compilation model
      all code files compiled into one assembly or DLL
    - Dynamic compilation
      code file deployed to server & just-in-time compilation upon request
      unique assembly for each request
    - VS integration:
        Design view
        Controls (from 3rd party as well)
        Data binding
    - Maturity (oldest in ASP.NET)

Processing Web Forms
  1.  User makes request to site built using Web Forms = request to process a page based on URL path
  2.  Server received request, then:
      HTTP modules
        - Examine, route and determine how the request should be handled
      HTTP handler
        - process code specifically for requested page
      HTTP modules
        - examine request and response for adjustments before return the response

Demo: Create a Web Site
  New project in VS
    File / New / Project
    (For template) Visual C# / Web / ASP.NET Web Application
    Select "Web Forms" as the template (MVC and Web API can also be added as folder and core reference)
  Examine project structure
    Files with .aspx extension - pages requested by users in browsers
    Site.Master file: allow for repeatable contents across multiple pages
    Style is managed by CSS files (like bootstrap) in Content folder
    Global.asax file:
      allow developer to tap into HTTP pipeline before / after request
      authorization
      authentication
      session state management
  View a page
    Debug / Start Debugging

Demo: Post Data
  Add input for text entry (textfield)
  Add button to post data
  Echo data back to page (on a label)
    double click on button to generate a click event in code
    Label1.Text = TextBox.Text; // assign label text with value of textbox text

Demo: Display a List of Data
  Create sample data
    Under App_Data folder in solution explorer
      Project / Add New Item...
      Add SQL Server Database (db.mdf) under Data template
      App_Data contains db.mdf and .Idf file
      Double click on db.mdf file

  Display list of data

Summary

{Module four: Understanding How Web Pages Work}
  Describing Web Pages: inline code mix with HTML markup
    One file: .cshtml with Razor syntax
    Dynamic compilation when page is first requested on web server
    Close to classic ASP

  Processing Web Pages
    1. request made to a website
    2. HTTP modules: intercept series of request on server before page process begin
        - tasks include: support friendly URL
    3. HTTP handler: process webpage
        - process server-side code in .cshtml file
    4. Other HTTP modules called
    5. send response back to client

  Demo: Create a Web Site
    Create new website in VS
      File / New / Website / ASP.NET Web Site (Razor v3)
      (File located under "WebSites" folder)
    Examine folder structure
      Key files:
        *.cshtml (like "About.cshtml")
        _SiteLayout.cshtml:
          all content to repeat for every page that uses this _SiteLayout
          <head> section contents will also be in the head section of any layout user
          @RenderBody() is where actual body of page gets processed
        Content(folder) / css files are for theme
        _AppStart.cshtml:
          Initialized on the first request to website, like initializing DB
    View page
        Friendly URL: webpage path without .cshtml
          /About.cshtml = /About

  Demo: Post Data
    Add input for text entry (with form)
    Add (submit) button to post data
    Echo data back to page (on a span)
      <form method="post" action="">
        <input type="text" name="userData">
        <input type="submit" name="postAction" value="Post data..." />
      </form>
      <span clas="message-success">
        @if(IsPost) {<text>@Request.Form["userData"]</text>}
      </span>

  Demo: Display a List of Data
    Create sample data
      DataBase under App_Data folder

    Display list of data
      @{
        Layout = ...
        ...
        var db = Database.Open("StarterSite"); // name of the DB
        var items = db.Query("SELECT Name FROM TechItem");
      }
      ...
      @foreach (var row in items)
      {
        <div>@row.Name</div>
      }
      // this will print out all row.Name in collection items

  Summary
{Module five: Understanding How MVC Works}
Describing MVC
  MVC = Model View Controller
    separation of concerns
      Model: Content or Data
      View: user-interface (theme & responsiveness)
      Controller: processing

Processing MVC
  HTTP Request
    1. Client send request to MVC site for default response
    2. This is translate into:
      Call upon default controller (of the site) and its default action
      Example:
        http://site/
          home controller with index as its default action ()
        http://site/account
          account controller with default action
        http://site/account/register
          account controller with register action
    3. Http Modules on server side: authentication, authorization, etc
    4. Http Handler for MVC
    5. Http Modules necessary before response is sent back

Demo: Create a Web Site
  Create new project in VS
    File / New / Project / ASP.NET Web Application
    MVC template
  Examine template project structure
    Key folders:
      Models
        contain content or data for the site use
      Views
        Each controller has corresponding folder under Views folder (HomeController -> Home)
        Within that folder, each action in controller has corresponding view file (cshtml)
      Controllers
        Under HomeController / 3 Actions: Index, About, Contact
        http://site/home/index
        http://site/home/About
        http://site/home/Contact
    How was the route setup:
      Global.asax
        Application_Start (event at very begining)
          RouteConfig.RegisterRoutes(RouteTable.Table);
      Under App_Start folder
        RouteConfig.cs
          RegisterRoutes method
            Specifying default controller and action & url pattern
  View a page
Demo: Post Data
    Add input for text entry (modify view)
        ViewBag: object that maintain states to pass into view while page is processed
    Add button to post data (to server)
    Echo data (return data from server)
    example:
        ... in About.cshtml ...
        @using (Html.BeginForm())
        {
            <input type="text" name="userData" />
            <input type="submit" name="postAction" value="Post..." />
            <h3>@ViewBag.Message</h3>
        }
        ... back to HomeController ...
        [HttpPost]
        public ActionResult About(string userData)
        {
            // userData is the value of "name" attribute of text input in View
            ViewBag.Message = userData; // save user input
            return View();
        }
Demo: (Consume &) Display a List of Data
  Create sample data under Models folder
  Return dtat source within the model class:
    public static IEnumerable<Item> GetItems() {
      // can be API, DB connection or other dtat source
      return new List<Item>
      {
       ...
      };
    }
  Display list of data:
    Create new action under HomeController:
    // site/home/list
    public ActionResult List()
    {
      // pass data into the view
      return View(Item.GetItems());
    }
    Add View to this Action:
      Sub-Menu option: Add View
      View name: List
      Template: List
      Model class: Item.cs
      Click Add
      (Right click) View in browser (under localhost)

  Summary

{Module six: Understanding How ASP.NET Core Works}

  Describing ASP.NET Core
    used to be known as ASP.NET 5
    utilize .NET core 1.0 (lightweight)
    cross-platform development
    can be hosted on IIS or in other process that support ASP.NET Core
    open source

  Processing ASP.NET Core (Http request & response)
  1. Client makes request to site (http://site/page)
  2. Http pipeline in Startup.cs file
    - No more modules / handlers
    - developer has control over what happen in every request

  Demo: Tour of Starting Template
    - create new project in VS
      new project / ASP.NET Web Application
      ASP.NET Core (ASP.NET 5) Template / Web Application
    - examine project structure
      project.json (deprecated)
      Startup.cs
        enable services and middle-wares
        manage every request and response
        enable MVC and config:
          app.UseMVC(
            {
              routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
            });
      Tag Helper: server-side processed to generate HTML
    - view a page
      run the page on VS with following options:
        IIS Express
        web (like other services)
        more...
      view page with VS Code
        View / Command Palette / (type on prompt) dnx /
        (under dropdown) select dnx:Run Command /
        (under dropdown) select dnx web - (ProjectName)

        Console window opened with hosting URL
        Open browser

  Summary

{Module seven: A Strategic Comparison}
  Comparing ASP.NET to ASP.NET Core
    ASP.NET                         ASP.NET Core
    - Requires Windows              - Cross-platform
    - Web Forms, Web Pages, MVC     - Web Pages, MVC
    - Requires full .NET Framework  - .NET Core & .NET Framework (if on Windows)
                                    - Unified syntax and controllers
  Web Forms
  + Established maturity            - "Bloated": object model and event
  + Rapid app development           - Use Viewstate to maintain state across postbacks: sluggish and low scalability
  + low skill requirement           - Not supported in ASP.NET Core
  + strong 3rd party support

  Web Pages
  + Server code embedded in HTML    - Server code embedded in HTML: no TDD / not agile
  + Dynamic compilation             - Smaller adoption
  + Supported in ASP.NET Core

  MVC
  + Separation of concerns (agile)  - Require stronger developer skills
  + ASP.NET Core                      : strong web developer / core developer
  + Strong adoption

  Summary