Building Web Applications With Visual Studio 2017 Using NET Core and Modern Javascript Frameworks pdf pdf

  Building Web

Applications with

Visual Studio 2017

  Using .NET Core and Modern JavaScript Frameworks — Philip Japikse Kevin Grossnicklaus Ben Dewey

  

Building Web

Applications with Visual

Studio 2017

Using .NET Core and Modern JavaScript Frameworks

  Philip Japikse Kevin Grossnicklaus Ben Dewey

  Building Web Applications with Visual Studio 2017

  Philip Japikse Kevin Grossnicklaus Ben Dewey West Chester, Ohio Ellisville, Missouri Charleston, South Carolina USA USA USA

  ISBN-13 (pbk): 978-1-4842-2477-9

  ISBN-13 (electronic): 978-1-4842-2478-6 DOI 10.1007/978-1-4842-2478-6 Library of Congress Control Number: 2017947048 Copyright © 2017 by Philip Japikse, Kevin Grossnicklaus and Ben Dewey This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.

  Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.

  Cover image designed by Freepik Managing Director: Welmoed Spahr Editorial Director: Todd Green Acquisitions Editor: Todd Green Development Editor: Laura Berendson Technical Reviewer: Eric Potter Coordinating Editor: Jill Balzano Copy Editor: Kezia Endsley Compositor: SPi Global Indexer: SPi Global Artist: SPi Global

  Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail

  press Media, LLC is a California LLC

  and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-m . Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page a Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at or more detailed information, please vis

  To Amy, Coner, Logan, and Skylar. Without your support and patience, this work would never have happened. Love you guys.

  —Philip Japikse

Contents at a Glance

  

About the Authors ...................................................................................................xix

About the Technical Reviewer ................................................................................xxi

Acknowledgments ................................................................................................xxiii

Introduction ...........................................................................................................xxv

  Part I: Visual Studio 2017 and .NET Core ............................................ 1 ■

  

Chapter 1: Introducing Entity Framework Core ..................................................... 3

■

  

Chapter 2: Building the Data Access Layer with Entity Framework Core ............ 49

■

  

Chapter 3: Building the RESTful Service with ASP.NET Core MVC Services ......... 83

■

  

Chapter 4: Introducing ASP.NET Core MVC Web Applications ............................ 119

■

  

Chapter 5: Building the SpyStore Application with ASP.NET Core MVC ............. 157

■

  Part II: Client-Side Tooling and JavaScript Frameworks ................ 209 ■

  

Chapter 6: JavaScript Application Tools ............................................................ 211

■

  

Chapter 7: Introduction to TypeScript ............................................................... 241

■

  

Chapter 8: Angular 2 ......................................................................................... 281

■

  

Chapter 9: React ................................................................................................ 329

■

Index ..................................................................................................................... 389

Contents

  

About the Authors ...................................................................................................xix

About the Technical Reviewer ................................................................................xxi

Acknowledgments ................................................................................................xxiii

Introduction ...........................................................................................................xxv

  Part I: Visual Studio 2017 and .NET Core ............................................ 1 ■

  

Chapter 1: Introducing Entity Framework Core ..................................................... 3

■

  

The SpyStore Database .................................................................................................... 4

Installing Visual Studio 2017 and .NET Core .................................................................... 5

Installing Visual Studio ........................................................................................................................... 5 Installing the .NET Core SDKs ................................................................................................................. 6 The .NET Core Command Line Interface (CLI) ......................................................................................... 8

  

Creating and Configuring the Solution and Projects ........................................................ 8

Creating the Solution and Projects ......................................................................................................... 8 Changes to the Project Files ................................................................................................................. 11 Updating the Target Framework ........................................................................................................... 11

  

Working with NuGet Packages ....................................................................................... 13

Manually Restoring Packages .............................................................................................................. 13 Adding the Project References ............................................................................................................. 14

Adding Entity Framework Core ....................................................................................... 14

  Adding EF Packages to the SpyStore.DAL Project ................................................................................ 14 Installing/Updating Packages Using the SpyStore.DAL.csproj File ....................................................... 16 Adding EF Packages to the SpyStore.Models Project ........................................................................... 16 Adding Packages to the SpyStore.DAL.Tests Project ............................................................................ 17

  

Building the Foundation ................................................................................................. 17

Understanding the DbContext Class ..................................................................................................... 17 Building the Base Entity Class .............................................................................................................. 22 Adding the Category Model Class ......................................................................................................... 24 Adding the Categories DbSet ................................................................................................................ 26

  

Migrations ...................................................................................................................... 26

Executing EF .NET CLI Commands ........................................................................................................ 27 Creating the First Migration .................................................................................................................. 27 Applying the Migration ......................................................................................................................... 29 Creating Migration SQL Scripts ............................................................................................................ 30

  

Understanding CRUD Operations Using Entity Framework ............................................. 31

Creating Records .................................................................................................................................. 31 Reading Records .................................................................................................................................. 31 Updating Records ................................................................................................................................. 32 Deleting Records .................................................................................................................................. 33

  

Unit Testing EF Core ....................................................................................................... 34

Creating the CategoryTests Class ......................................................................................................... 34 Testing EF CRUD Operations ................................................................................................................. 37

  

Adding the Core Repository Interface and Base Class ................................................... 41

Adding the IRepo Interface ................................................................................................................... 41 Adding the Base Repository ................................................................................................................. 43 Adding the Category Repository ........................................................................................................... 46

  

Summary ........................................................................................................................ 47

  

Chapter 2: Building the Data Access Layer with Entity Framework Core ............ 49

■

  

The SpyStore Database .................................................................................................. 49

Navigation Properties and Foreign Keys ........................................................................ 50

Handling Display Names ................................................................................................ 51

Mixing EF with Stored Procedures and Functions .......................................................... 51

  

Finishing the Model Classes ........................................................................................... 52

Updating the Category Model ............................................................................................................... 52 Adding the Product Model .................................................................................................................... 52 Adding the Shopping Cart Record Model .............................................................................................. 53 Adding the Order Model ........................................................................................................................ 54 Adding the Order Detail Model.............................................................................................................. 54 Adding the Customer Model ................................................................................................................. 55 Updating the StoreContext .................................................................................................................... 56

  

Updating the Database to Match the Model ................................................................... 58

Creating the Migration .......................................................................................................................... 58 Deploying the Migration ....................................................................................................................... 58

  

Adding the Stored Procedure and User Defined Function .............................................. 58

Adding a New Migration ....................................................................................................................... 59 Implementing the Up() Method ............................................................................................................. 59 Implementing the Down() Method ........................................................................................................ 60 Updating the Database ......................................................................................................................... 60

  

Adding the OrderTotal Calculated Field .......................................................................... 60

Updating the Order Class ...................................................................................................................... 60 Making OrderTotal a Computed Column ............................................................................................... 60 Adding a New Migration and Update the Database .............................................................................. 61

  

Automating the Migrations ............................................................................................. 61

Adding the View Models ................................................................................................. 62

The Product with Category View Model ................................................................................................ 62 The Order Detail with Product Info View Model .................................................................................... 63 The Order with OrderDetails View Model .............................................................................................. 63 The Cart Record with Product Infor View Model ................................................................................... 64

  

Completing the Repositories .......................................................................................... 64

Extending the Interfaces ....................................................................................................................... 64 Adding/Updating the Repositories ........................................................................................................ 67

  

Initializing the Database with Data ................................................................................. 75

Creating Sample Data ........................................................................................................................... 76 Using the Sample Data ......................................................................................................................... 78 Using the Initializer in Tests .................................................................................................................. 80

  

Creating NuGet Packages for the Data Access Library ................................................... 81

Setting the NuGet Properties ................................................................................................................ 81 Creating the NuGet Packages ............................................................................................................... 81

  

Summary ........................................................................................................................ 82

  

Chapter 3: Building the RESTful Service with ASP.NET Core MVC Services ......... 83

■

  

Introducing the MVC Pattern .......................................................................................... 83

The Model ............................................................................................................................................. 83 The View ............................................................................................................................................... 83 The Controller ....................................................................................................................................... 84

  

Introducing ASP.NET Core MVC Web API ......................................................................... 84

ASP.NET Core and .NET Core ................................................................................................................. 84 Dependency Injection ........................................................................................................................... 85 Determining the Runtime Environment ................................................................................................ 85 Routing ................................................................................................................................................. 86

  

Creating the Solution and the Core MVC Project ............................................................ 87

Adding the Package Source for the Data Access Layer ........................................................................ 90 Updating and Adding NuGet Packages ................................................................................................. 90 The ASP.NET Core “Super” Packages ................................................................................................... 91

MVC Projects and Files ................................................................................................... 92

  The Program.cs File .............................................................................................................................. 92 The appsettings.json File(s) .................................................................................................................. 93 The runtimeconfig.template.json File ................................................................................................... 94 The Startup.cs File ................................................................................................................................ 94 The Controllers Folder ........................................................................................................................ 100 The wwwroot Folder ........................................................................................................................... 100 The web.config File ............................................................................................................................ 101 The launchsettings.json File ............................................................................................................... 101

  

Controllers and Actions ................................................................................................ 102

Controllers .......................................................................................................................................... 102 Actions ................................................................................................................................................ 102 An Example Controller ........................................................................................................................ 104

  

Exception Filters ........................................................................................................... 108

Creating the SpyStoreExceptionFilter ................................................................................................. 108 Adding the Exception Filter for All Actions .......................................................................................... 110

  

Building the Controllers ................................................................................................ 110

The Category Controller ...................................................................................................................... 111 The Customer Controller ..................................................................................................................... 112 The Search Controller ......................................................................................................................... 113 The Orders Controller ......................................................................................................................... 113 The Product Controller ........................................................................................................................ 114 The Shopping Cart Controller ............................................................................................................. 115

  

Using the Combined Solution ....................................................................................... 118

The Unit Test Solution ................................................................................................... 118

Summary ...................................................................................................................... 118

  

Chapter 4: Introducing ASP.NET Core MVC Web Applications ............................ 119

■

  

Introducing the “V” in ASP.NET Core MVC .................................................................... 119

Creating the Solution and the Core MVC Project .......................................................... 120

Updating and Adding NuGet Packages ............................................................................................... 122

  

Routing Revisited ......................................................................................................... 123

The Route Table .................................................................................................................................. 123 URL Templates and Default Values ..................................................................................................... 123

MVC Web Applications Projects and Files .................................................................... 124

  The Program.cs File ............................................................................................................................ 124 The appsettings.json File .................................................................................................................... 124 The Startup.cs File .............................................................................................................................. 124 The Controllers Folder ........................................................................................................................ 126 The Views Folder ................................................................................................................................ 126 The wwwroot Folder ........................................................................................................................... 126

  

Controllers, Actions, and Views .................................................................................... 129

ViewResults ........................................................................................................................................ 129 Views .................................................................................................................................................. 130 Layouts ............................................................................................................................................... 133 Partial Views ....................................................................................................................................... 134 Sending Data to Views ........................................................................................................................ 134

  

Package Management with Bower .............................................................................. 135

Updating and Adding Bower Packages ............................................................................................... 136 Bower Execution ................................................................................................................................. 136

  

Bundling and Minification ............................................................................................ 137

The BundlerMinifier Project ................................................................................................................ 137 Configuring Bundling and Minification ............................................................................................... 137 Visual Studio Integration..................................................................................................................... 139 .NET Core CLI Integration .................................................................................................................... 141

  

Creating the Web Service Locator ................................................................................ 142

Creating the IWebServiceLocator Interface ........................................................................................ 142 Creating the WebServiceLocator Class ............................................................................................... 142 Adding the WebServiceLocator Class to the DI Container .................................................................. 143

  

Creating the WebAPICalls Class to Call the Web API Service ........................................ 143

Creating the IWebApiCalls Interface ................................................................................................... 143 Creating the Base Class Code ............................................................................................................. 144 Creating the WebApiCalls Class .......................................................................................................... 148 Adding WebApiCalls Class to the DI Container ................................................................................... 151

  

Adding the Fake Authentication ................................................................................... 151

Building the Authentication Helper ..................................................................................................... 151 Adding the AuthHelper Class to the DI Container ............................................................................... 152 Creating the Action Filter for the Fake Authentication ........................................................................ 152 Adding the Action Filter for All Actions ............................................................................................... 154

  

Adding the View Models ............................................................................................... 154

Summary ...................................................................................................................... 156

  

Chapter 5: Building the SpyStore Application with ASP.NET Core MVC ............. 157

■

Tag Helpers .................................................................................................................. 157

  Enabling Tag Helpers .......................................................................................................................... 159 The Form Tag Helper ........................................................................................................................... 160 The Anchor Tag Helper ........................................................................................................................ 160 The Input Tag Helper ........................................................................................................................... 160 The TextArea Tag Helper ..................................................................................................................... 161 The Select Tag Helper ......................................................................................................................... 161 The Validation Tag Helpers .................................................................................................................. 162 The Link and Script Tag Helpers ......................................................................................................... 163 The Image Tag Helper ......................................................................................................................... 163 The Environment Tag Helper ............................................................................................................... 163 Custom Tag Helpers ............................................................................................................................ 163

  

Building the Controllers ................................................................................................ 164

The Products Controller ...................................................................................................................... 165 The Orders Controller ......................................................................................................................... 168 The Shopping Cart Controller ............................................................................................................. 170

  

Validation ...................................................................................................................... 176

Server Side Validation......................................................................................................................... 176 Client Side Validation .......................................................................................................................... 180 Updating the View Models .................................................................................................................. 182

  

View Components ......................................................................................................... 183

Building the Server Side Code ............................................................................................................ 183 Building the Client Side Code ............................................................................................................. 186 Invoking View Components................................................................................................................. 186 Invoking View Components as Custom Tag Helpers ........................................................................... 186

Updating and Adding the Views .................................................................................... 187

  The ViewImports File .......................................................................................................................... 187 The Shared Views ............................................................................................................................... 187 The Cart Views .................................................................................................................................... 195 The Orders Views ................................................................................................................................ 200 The Products Views ............................................................................................................................ 203

  

Running the Application ............................................................................................... 205

Using Visual Studio 2017 .................................................................................................................... 205 Using the .NET Command Line Interface (CLI) .................................................................................... 206 Using the Combined Solutions ............................................................................................................ 206

  

Summary ...................................................................................................................... 207

  Part II: Client-Side Tooling and JavaScript Frameworks ................ 209 ■

  

Chapter 6: JavaScript Application Tools ............................................................ 211

■

  

What Tools Are We Covering? ....................................................................................... 211

Node.js ......................................................................................................................... 212

Manually Installing Node.js ................................................................................................................. 212 Installing Node using the Chocolatey Package Manager .................................................................... 213 Setting Up Visual Studio to Use the Latest Version of Node ............................................................... 213 Getting Started with Node.js ............................................................................................................... 214 Introduction to NPM ............................................................................................................................ 215 Saving Project Dependencies ............................................................................................................. 217 Executable Packages .......................................................................................................................... 218 Installing Packages Locally vs. Globally ............................................................................................. 220

  

Bower ........................................................................................................................... 220

Bower and Visual Studio ..................................................................................................................... 222 Installing Bower Prerequisites ............................................................................................................ 222 Installing Git ........................................................................................................................................ 222 Installing Bower .................................................................................................................................. 222 Using Bower ....................................................................................................................................... 223 Installing Bower Packages ................................................................................................................. 223 Installing Bower Packages Using Visual Studio .................................................................................. 224

Gulp .............................................................................................................................. 227

  Installing Gulp ..................................................................................................................................... 228 Copying Files Using Gulp ................................................................................................................... 229 Dependencies in Gulp ......................................................................................................................... 230 Task Runner Explorer Within Visual Studio ......................................................................................... 231 Gulp Conclusion .................................................................................................................................. 232

  

Module Loaders ............................................................................................................ 233

What Is a Module ................................................................................................................................ 234 SystemJS ............................................................................................................................................ 235 WebPack ............................................................................................................................................. 237

  

Summary ...................................................................................................................... 240

  

Chapter 7: Introduction to TypeScript ............................................................... 241

■

  

Why TypeScript? ........................................................................................................... 241

TypeScript Basics ......................................................................................................... 242

An Overview of TypeScript Syntax ...................................................................................................... 242 Implementing a Basic TypeScript Application ..................................................................................... 253 Setting Up a Sample Project ............................................................................................................... 254 Working with TypeScript Files ............................................................................................................ 257 NPM Packages .................................................................................................................................... 259 Adding TypeScript ............................................................................................................................... 261

  

Summary ...................................................................................................................... 279

  

Chapter 8: Angular 2 ......................................................................................... 281

■

  

Creating a New Visual Studio Core Project ................................................................... 281

Project Files ........................................................................................................................................ 284 Setting Up the Startup Class ............................................................................................................... 284 NPM Install ......................................................................................................................................... 286 Gulp Setup .......................................................................................................................................... 287 Typescript Setup ................................................................................................................................. 287

Main SpyStore App Component Setup.......................................................................... 288

  Creating the Root index.html Page ..................................................................................................... 289 Creating the Root App Component ...................................................................................................... 291 Creating the App Module .................................................................................................................... 292 Creating the Angular Bootstrap .......................................................................................................... 292

  

Core Concepts .............................................................................................................. 293

Application Initialization ..................................................................................................................... 293 Components ........................................................................................................................................ 294 Services .............................................................................................................................................. 295 Templating .......................................................................................................................................... 297 Routing ............................................................................................................................................... 300

  

Building the SpyStore Angular App............................................................................... 303

Adding Routing ................................................................................................................................... 303 Connecting to Services ....................................................................................................................... 306 Route Parameters ............................................................................................................................... 311 Search Page ....................................................................................................................................... 313 Product Details Page .......................................................................................................................... 316 Cart Page ............................................................................................................................................ 320 Checkout ............................................................................................................................................. 326

  

Summary ...................................................................................................................... 328

  

Chapter 9: React ................................................................................................ 329

■

  

Solution Overview ........................................................................................................ 329

Creating a New Visual Studio Core Project ................................................................... 330

Project Files .................................................................................................................. 332

Setting Up the Startup Class ........................................................................................ 333

NPM Packages ............................................................................................................. 334

TypeScript Setup .......................................................................................................... 337

Initial Project Folder ..................................................................................................... 338

WebPack....................................................................................................................... 342