EIEIOTECHNOVATION
← Training programmes

EIEIO / PROGRAMMING & DEVELOPMENT

ASP.Net Core MVC

Course outline

5 days
Discuss this programme →

Duration

5 days

Overview

This course provides a practical hands-on introduction to developing Web applications using ASP.NET Core MVC 6 and C#. This Web development framework from Microsoft emphasizes separation of concerns in the architecture and testability of applications. This course covers development on Microsoft’s new .NET Core platform. The course is current to .NET Core 2.0, which is a major update of the original .NET Core 1.0. Working with .NET Core is now simpler, as project information is consolidated in project files without the need for source JSON files. Also, the .NET Core 2.0 API has been extended and is a much larger subset of classical .NET than in .NET Core 1.0.

A major restructuring of the .NET platform, .NET Core is cross-platform, open source, and modular designed for creating modern web applications and services, libraries and console applications. It is available on Windows, Mac and Linux. .NET now is a family of frameworks, including both the classical .NET available on Windows and the new

.NET Core package-based frameworks that are cross-platform.

This course covers the fundamentals of the Model-View-Controller design pattern and its implementation in ASP.NET Core MVC. This technology is compared with classical ASP.NET Web Forms. Visual Studio 2017 with ASP.NET Core 2.0 is used as a productive platform for creating MVC Web applications. After presenting the fundamentals of the technology with several examples, the main components of Model, Controller and View are covered in detail. The discussion of the Model incorporates Microsoft technologies for persisting data, including XML Serialization and ADO.NET with SQL Server 2016. The routing mechanism of ASP.NET MVC is covered. The course includes an introduction to ASP.NET Web API.

React or React.js is a popular, high-performance open source JavaScript framework from Facebook used for view rendering work in large scale or single page applications (SPA) to foster a more comfortable user experience. React encourages the creation of reusable UI components to present data that changes over time. React.js offers a world of possibilities, such as server-side rendering, real-time updates, different rendering targets like Android, iOS, and many more.

This course shows how to use Facebook’s ReactJS framework to build fast, modern, scalable web applications. The course covers the principles of front-end development, and then takes the participants through the process of building

a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components, and moves on creating composite components and controller views using props and state.

The participants will learn, build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Participants will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.

Objective

  • Participants gain a thorough understanding on the philosophy and architecture of Web applications using ASP.NET Core MVC
  • Gain a practical understanding of .NET Core
  • Acquire a working knowledge of Web application development using ASP.NET Core MVC 6 and Visual Studio 2017
  • Persist data with XML Serialization and ADO.NET with SQL Server 2016
  • Create HTTP services using ASP.NET Core Web API
  • Deploy ASP.NET Core MVC applications to the Windows Azure cloud
  • Creating components using JSX
  • Building composite components
  • Props, state, and controller views
  • Working with controlled forms
  • Routing with react-router
  • Unit Testing ReactJS components
  • Implementing the Flux design pattern
  • Leveraging stores and actions

Target Participants

The primary target audience for this course is software developers / programmers. This program is for anybody who has programming background and interested in diving into the web development.

Program Prerequisites

Good working knowledge of C# and the .NET Framework is required. Experience in the Basic knowledge of HTML, Prior exposure to .NET Core will be useful. Students should have some prior understanding of web development using, HTML, CSS and JavaScript. Students should also have basic programming experience in at least one of the following

programming languages, html, C#, VB, VB.net, css, javascript, typescript, ASP, ASP.net or another web or application programming language. Lab exercises provide essential and real world practical hands-on experience for each topic.

Mode of Delivery

Every participant will be provided with course notes and are required to bring in their own laptops for hands-on exercise and practice sessions.

Day 1

  • Introduction to ASP.NET Core MVC
  • Review of ASP.NET Web Forms
  • Advantages and Disadvantages of Web Forms
  • Model-View-Controller Pattern
  • ASP.NET Core MVC
  • .NET Core
  • Considerations in Using ASP.NET MVC
  • Unit Testing
  • Getting Started with ASP.NET Core MVC
  • ASP.NET Core MVC Testbed
  • Using Visual Studio
  • Configuring for ASP.NET Core MVC
  • Rendering Views
  • Razor View Engine
  • Dynamic Output
  • ASP.NET MVC Architecture
  • The Controller in ASP.NET MVC
  • The View in ASP.NET MVC
  • The Model in ASP.NET MVC
  • Helper Methods for HTML
  • Form Submission
  • Model Binding
  • Input Validation
  • View Start files

Day 2

  • View Import files
  • The Model
  • More Complex Models in MVC Programs
  • Microsoft Technologies for Model Persistence
  • Using XML Serialization
  • NuGet Package Manager
  • Using ADO.NET
  • Model Binding
  • Data Annotation attributes and validation
  • Handle exception errors and status
  • The Controller
  • Controller Base Class
  • Actions
  • Retrieving Data from a Request
  • Action Results
  • Action Attributes
  • Serving Static Files
  • Filters
  • The View
  • View Responsibility
  • Using ViewBag
  • Using Dynamic Objects
  • Html Helpers
  • Validation Attributes
  • Routing
  • Routing in ASP.NET Core MVC
  • Properties of Routes
  • Parameters in Routing
  • Registering Routes
  • Attribute Routing
  • ASP.NET Core Web API
  • Representational State Transfer

Day 3

  • REST and Web API
  • HTTP Services Using Web API
  • HTTP Testing Tools
  • Using Postman
  • Query Strings
  • HTTP Response Codes
  • ASP.NET Web API Clients
  • Web API – Part 1
  • Web API Tutorials
  • What is Web API?
  • Create Web API Project
  • Test Web API
  • Web API Controller
  • Configure Web API
  • Web API Routing
  • Parameter Binding
  • Action Return Type
  • Data Formats
  • Media Type Formatters
  • Web API Filters
  • Web API - Part 2
  • Create Web API for CRUD
  • Implement Get Method
  • Implement Post Method
  • Implement Put Method
  • Implement Delete Method
  • Consume Web API
  • Consume Get method in MVC
  • Consume Post method in MVC
  • Consume Put method in MVC
  • Consume Delete method in MVC
  • HttpClient

Day 4

  • Dependency Injection
  • Web API Hosting
  • Useful Resources
  • Introduction to "Modern (ES5)" JavaScript
  • JavaScript Refresher
  • Introduction to ES2015 (ES6)
  • Basic language features
  • Creating variables
  • Primitives and wrapper objects in JavaScript
  • JavaScript types: Number, String, Boolean, Date
  • JavaScript == and false conditions and Triple Equals ===
  • Functions, functional programming and nesting functions
  • Arrays – Ordered sequence of items
  • Indexed property access
  • Scope and Context
  • JavaScript visibility rules
  • Global variables
  • Object functions and execution
  • Creating Objects with JavaScript literal syntax and constructor functions
  • The "this" keyword in JavaScript
  • Call, Bind and Apply methods
  • Typeof and objects
  • Special comparisons for objects
  • Key JavaScript built-in objects
  • Introduction to REACT
  • What react is and what it is not
  • React concepts
  • Component composition
  • How react works
  • How Virtual DOM works
  • How react handles data binding
  • Advantages & Limitations of REACT
  • Setting up ReactJS Development Environment
  • Using Webpack / Babel
  • Using npm & package.json file
  • Look at an ReactJS application
  • Organizing source code
  • React browser plugin
  • Introduction to JSX
  • What is JSX
  • JSX Elements and their surroundings
  • Attributes in JSX
  • Nested JSX
  • JSX Outer Elements
  • Rendering JSX
  • HTML attributes in JSX - Class and Id etc
  • ReactDOM.render()
  • Passing variables to ReactDOM.render()
  • The Virtual DOM
  • If-else in JSX
  • IIFE in JSX for complex logic
  • JavaScript expressions
  • JSX like attribute, boolean or child expression
  • Lab: HelloWorld Application
  • Creating a simple React Application
  • A simple react component with JSX template
  • Component structure
  • React render
  • Pure components
  • Functional components
  • Class based components
  • Why use one or the other
  • Component props and property passing
  • Props validation with data types
  • Limitations of props

Day 5

  • Using state
  • When to use state, when to use props
  • Initialize states and update states
  • Testing components
  • Lab: HeaderComponent, FooterComponent and ProductListComponent
  • Component Life Cycle
  • Start-up and Mounting Components
  • Updating Components
  • Unmounting Components
  • Calling / Implementing life cycle methods
  • Setting Properties
  • Composing Components
  • Components within Components
  • Known children and unknown children
  • Sibling Components and Key
  • Parent and Child Components
  • Communication from parent to child
  • Communication from child to parent
  • Forms
  • Form components example textbox, textarea, checkbox, radiobutton, select
  • Controlled form components
  • Uncontrolled form components
  • Checkboxes and Radios
  • Select box with default selected values
  • Form validation
  • Event handling
  • React.js Event Handlers
  • Synthetic Events
  • Form
  • Composition
  • Focus
  • Keyboard
  • Mouse
  • Clipboard
  • Selection
  • Touch
  • Event Pooling
  • Other useful events in React
  • Sharing events across the components
  • Lab: SeachProductComponent and SortProductComponent
  • Lab: ShoppingCartComponent – Add products into shopping cart
  • Securing React Applications
  • JSON Web Tokens (JWT)
  • Session State
  • Storing the state on the client
  • Authentication & Authorization
  • React Router & Navigation
  • Loading the router library
  • Router configuration
  • Passing and receiving parameters
  • React-cookie integration
  • Protecting routes on the client
  • Lab: Participants Registration
  • Lab: Login, Authentication and Authorization
  • Lab: Dashboard
  • Lab: User Profile, My Products

Programme scope, delivery arrangements and suitability are confirmed during enquiry.