Building Web Applications with Visual Studio 2017 (eBook)

An international speaker, Microsoft MVP, ASPInsider, MCSD, CSM, and CSP, and a passionate member of the developer community, Phil Japikse has been working with .NET since the first betas, developing software for over 30 years, and heavily involved in the agile community since 2005. Phil is co-author of best selling "C# and the .NET 4.6 Framework", the Lead Director for the Cincinnati .NET User’s Group and the Cincinnati Software Architect Group, co-hosts the Hallway Conversations podcast, founded the Cincinnati Day of Agile, and volunteers for the National Ski Patrol. Phil is also a published author with LinkedIn Learning. During the day, Phil works as an Enterprise Consultant and Agile Coach for large to medium firms throughout the US. Phil enjoys to learn new tech and is always striving to improve his craft. You can follow Phil on his blog, or on Twitter @skimedic.Kevin Grossnicklaus At one point in his career Kevin was the youngster on most development teams.  He got his start developing with Visual Studio and managed .NET code during the early beta cycles in 2001.  In 2009, Kevin started his own software product development firm called ArchitectNow (www.architectnow.net).  At ArchitectNow, Kevin and his team specialize in a wide variety of tools while delivering applications across a variety of cloud and mobile platforms.   Born in rural Nebraska, Kevin has spent the last 20 years in St. Louis, Missouri where he lives with his wife Lynda and their three daughters: Alexis, Emily, and Hanna. He is an avid guitar player, fly fisherman, home brewer, and gamer (including everything from retro arcade games, to board games, to role playing games).  When not spending time on any of those hobbies he waits patiently for a second season of Firefly.Ben Dewey is a former Microsoft MVP, and published author with over 18 years of experience writing applications and continually striving to create SOLID applications of the highest craftsmanship while paying special attention to clean User Experiences (UX). Ben is currently Creative Director at Tallan, Inc. and consults regularly in New York City and around the country on web- and cloud-based technologies. He has also worked to deploy numerous high-quality, engaging apps to the Windows Store. When he’s not consulting, Ben is busy training, mentoring, blogging, and speaking at various conferences and community events around the country. Outside of work, Ben spends most of his time playing with his three young kids, working around the house, or, if it’s windy, kite surfing. You can find Ben online on Twitter (@bendewey), StackOverflow, GitHub, or on his blog at http://bendewey.com/.

Contents at a Glance 5
Contents 6
About the Authors 17
About the Technical Reviewer 19
Acknowledgments 20
Introduction 21
Part I: Visual Studio 2017 and .NET Core 30
Chapter 1: Introducing Entity Framework Core 31
The SpyStore Database 32
Installing Visual Studio 2017 and .NET Core 33
Installing Visual Studio 33
Installing the .NET Core SDKs 34
The .NET Core Command Line Interface (CLI) 36
Creating and Configuring the Solution and Projects 36
Creating the Solution and Projects 36
Changes to the Project Files 39
Updating the Target Framework 39
Working with NuGet Packages 41
Manually Restoring Packages 41
Restoring Packages from the CLI 41
Restoring with Package Manager Console 41
Adding the Project References 42
Adding Entity Framework Core 42
Adding EF Packages to the SpyStore.DAL Project 42
Installing/Updating Packages Using the SpyStore.DAL.csproj File 44
Adding EF Packages to the SpyStore.Models Project 44
Adding Packages to the SpyStore.DAL.Tests Project 45
Building the Foundation 45
Understanding the DbContext Class 45
Creating the StoreContext Class 47
Understanding the DbSet< T>
Connection Resiliency 49
Custom Connection Strategies 49
Building the Base Entity Class 50
Entity Framework Conventions 51
Data Annotations Support in EF Core 51
Adding Data Annotations to the EntityBase Class 52
Adding the Category Model Class 52
Adding the Categories DbSet 54
Migrations 54
Executing EF .NET CLI Commands 55
Creating the First Migration 55
Removing a Migration 57
Applying the Migration 57
Viewing the Database 57
Creating Migration SQL Scripts 58
Understanding CRUD Operations Using Entity Framework 59
Creating Records 59
Reading Records 59
No-Tracking Queries 60
Updating Records 60
Concurrency Checking 60
Updating Using Entity State 61
Deleting Records 61
Deleting Using Entity State 61
Unit Testing EF Core 62
Creating the CategoryTests Class 62
Creating and Running the First Test 64
Testing EF CRUD Operations 65
Test Adding a Category Record 65
Test Retrieving All Category Records 66
Test Updating a Category Record 67
Test Deleting a Category Record Using Remove 68
Test Deleting a Record Using EntityState 68
Testing Concurrency Checking 69
Adding the Core Repository Interface and Base Class 69
Adding the IRepo Interface 69
Adding the Base Repository 71
Adding the Category Repository 74
Summary 75
Chapter 2: Building the Data Access Layer with Entity Framework Core 77
The SpyStore Database 77
Navigation Properties and Foreign Keys 78
Handling Display Names 79
Mixing EF with Stored Procedures and Functions 79
Finishing the Model Classes 80
Updating the Category Model 80
Adding the Product Model 80
Adding the Shopping Cart Record Model 81
Adding the Order Model 82
Adding the Order Detail Model 82
Adding the Customer Model 83
Updating the StoreContext 84
Adding the DbSet< T>
Finishing the Model with the Fluent API 84
Creating the Unique Index for Email Addresses on the Customer Table 84
Setting Default Values on the Order Table 85
Creating the Computed Column for Order Details 85
Specifying the SQL Server Money Type for the Product Table 85
Updating the Shopping Cart Record Model 85
Updating the Database to Match the Model 86
Creating the Migration 86
Deploying the Migration 86
Adding the Stored Procedure and User Defined Function 86
Adding a New Migration 87
Implementing the Up() Method 87
Implementing the Down() Method 88
Updating the Database 88
Adding the OrderTotal Calculated Field 88
Updating the Order Class 88
Making OrderTotal a Computed Column 88
Adding a New Migration and Update the Database 89
Automating the Migrations 89
Adding the View Models 90
The Product with Category View Model 90
The Order Detail with Product Info View Model 91
The Order with OrderDetails View Model 91
The Cart Record with Product Infor View Model 92
Completing the Repositories 92
Extending the Interfaces 92
Adding the ICategoryRepo Interface 92
Adding the IProductRepo Interface 93
Adding the ICustomerRepo Interface 93
Adding the IOrderRepo Interface 93
Adding the IOrderDetailRepo Interface 94
Adding the IShoppingCartRepo Interface 94
Adding/Updating the Repositories 95
Updating the Category Repository 95
Adding the Product Repository 95
Adding the Customer Repository 97
Adding the OrderDetail Repository 98
Adding the Order Repository 99
Adding the InvalidQuantityException 100
Adding the ShoppingCartRecords Repository 100
Initializing the Database with Data 103
Creating Sample Data 104
Using the Sample Data 106
Using the Initializer in Tests 108
Creating NuGet Packages for the Data Access Library 109
Setting the NuGet Properties 109
Creating the NuGet Packages 109
Summary 110
Chapter 3: Building the RESTful Service with ASP.NET Core MVC Services 111
Introducing the MVC Pattern 111
The Model 111
The View 111
The Controller 112
Introducing ASP.NET Core MVC Web API 112
ASP.NET Core and .NET Core 112
Dependency Injection 113
Determining the Runtime Environment 113
Routing 114
URL Templates 114
Attribute Routing 114
Named Routes 115
Responding to the Type of HTTP Request 115
Creating the Solution and the Core MVC Project 115
Adding the Package Source for the Data Access Layer 118
Updating and Adding NuGet Packages 118
The ASP.NET Core “Super” Packages 119
MVC Projects and Files 120
The Program.cs File 120
The appsettings.json File(s) 121
The runtimeconfig.template.json File 122
The Startup.cs File 122
Available Services for Startup 123
The Constructor 124
The Configure Method 125
The ConfigureServices Method 126
Configuring MVC 126
Configuring JSON Formatting 127
Configuring CORS 127
Configuring EF Core 128
Configuring the Dependency Injection Container 128
The Controllers Folder 128
The wwwroot Folder 128
The web.config File 129
The launchsettings.json File 129
Controllers and Actions 130
Controllers 130
Actions 130
HTTP Status Code Results 130
Formatted Response Results 131
Redirect Results 132
An Example Controller 132
Model Binding 134
Changing the Visual Studio Launch Settings 134
Running the Application 135
Exception Filters 136
Creating the SpyStoreExceptionFilter 136
Adding the Exception Filter for All Actions 138
Building the Controllers 138
The Category Controller 139
The Customer Controller 140
The Search Controller 141
The Orders Controller 141
The Product Controller 142
The Shopping Cart Controller 143
Using the Combined Solution 146
The Unit Test Solution 146
Summary 146
Chapter 4: Introducing ASP.NET Core MVC Web Applications 147
Introducing the “V” in ASP.NET Core MVC 147
Creating the Solution and the Core MVC Project 148
Updating and Adding NuGet Packages 150
Routing Revisited 151
The Route Table 151
URL Templates and Default Values 151
MVC Web Applications Projects and Files 152
The Program.cs File 152
The appsettings.json File 152
The Startup.cs File 152
The ConfigureServices Method 153
The Configure Method 153
The Controllers Folder 154
The Views Folder 154
The wwwroot Folder 154
The Site CSS, JavaScript, and Images 156
Adding the Site CSS and Image Files 156
Adding the JavaScript Files 156
The lib Folder 157
The favicon.ico File 157
Controllers, Actions, and Views 157
ViewResults 157
Controller Helper Methods for Returning ViewResults 157
Views 158
The Views Folder 158
The Shared Folder 158
The DisplayTemplates Folder 159
The EditorTemplates Folder 160
The Razor View Engine 161
Razor Syntax 161
The Final Word on Razor 161
Layouts 161
Specifying the Default Layout for Views 162
Partial Views 162
Sending Data to Views 162
Strongly Type Views and View Models 163
ViewBag, ViewData, and TempData 163
Package Management with Bower 163
Updating and Adding Bower Packages 164
Bower Execution 164
Bundling and Minification 165
The BundlerMinifier Project 165
Configuring Bundling and Minification 165
Adding Files for Bundling and Minification 166
Visual Studio Integration 167
Bundling on Change 167
Bundling on Build 168
Using the Task Runner Explorer 169
.NET Core CLI Integration 169
Creating the Web Service Locator 170
Creating the IWebServiceLocator Interface 170
Creating the WebServiceLocator Class 170
Adding the WebServiceLocator Class to the DI Container 171
Creating the WebAPICalls Class to Call the Web API Service 171
Creating the IWebApiCalls Interface 171
Creating the Base Class Code 172
Implementing the Base HTTP Get Calls 173
Implementing the Base HTTP Post and Put Calls 174
Implementing the Base HTTP Delete Call 175
Creating the WebApiCalls Class 176
Adding WebApiCalls Class to the DI Container 179
Adding the Fake Authentication 179
Building the Authentication Helper 179
Adding the AuthHelper Class to the DI Container 180
Creating the Action Filter for the Fake Authentication 180
Adding the Action Filter for All Actions 182
Adding the View Models 182
Summary 184
Chapter 5: Building the SpyStore Application with ASP.NET Core MVC 185
Tag Helpers 185
Enabling Tag Helpers 187
The Form Tag Helper 188
The Anchor Tag Helper 188
The Input Tag Helper 188
The TextArea Tag Helper 189
The Select Tag Helper 189
The Validation Tag Helpers 190
The Link and Script Tag Helpers 191
The Image Tag Helper 191
The Environment Tag Helper 191
Custom Tag Helpers 191
Making Custom Tag Helpers Visible 192
Building the Controllers 192
The Products Controller 193
The Constructor 193
The Error Action 193
The Details Action 194
The GetListOfProducts Helper Method 194
The Index, Featured, and Search Actions 195
The Index and Featured Actions 195
The Search Action 195
The Orders Controller 196
The Route 196
The Constructor 197
The Index Action 197
The Details Action 197
The Shopping Cart Controller 198
The Route 198
The Constructor 198
Creating the AutoMapper Configuration 199
The Index Action 199
Model Binding 199
The AddToCart Actions 201
The HTTP Get Action 201
The HTTP Post Action 201
The Update HTTP Post Action 202
The Delete HTTP Post Action 203
The Buy HTTP Post Action 204
Validation 204
Server Side Validation 204
Custom Server Side Validation 205
Greater Than Zero Attribute 205
Must Not Be Greater Than Attribute 206
Client Side Validation 208
Custom Client Side Validation 208
Greater Than Zero Attribute: Attribute Updates 208
Greater Than Zero Attribute: JavaScript 209
Must Not Be Greater Than Attribute: Attribute Updates 209
Must Not Be Greater Than Attribute: JavaScript 210
Specifying Formatting for Client Side Validation Errors 210
Updating the View Models 210
View Components 211
Building the Server Side Code 211
Building the Client Side Code 214
Invoking View Components 214
Invoking View Components as Custom Tag Helpers 214
Updating and Adding the Views 215
The ViewImports File 215
The Shared Views 215
The Login Partial View 215
The Layout View 216
The Validation Scripts Partial View 219
The Add to Cart View 220
The Display Templates 221
The DateTime Display Template 221
The Editor Templates 221
The AddToCartViewModel Editor Template 222
The Cart Views 223
The Index View 223
The Update Partial View 225
The Editor Templates 226
The CartRecordViewModel Editor Template 226
The Orders Views 228
The Index View 228
The Details View 229
The Products Views 231
The ProductList View 232
The Display Template 232
The ProductAndCategoryBase DisplayTemplate 232
Running the Application 233
Using Visual Studio 2017 233
Using the .NET Command Line Interface (CLI) 234
Using the Combined Solutions 234
Summary 235
Part II: Client-Side Tooling and JavaScript Frameworks 236
Chapter 6: JavaScript Application Tools 237
What Tools Are We Covering? 237
Node.js 238
Manually Installing Node.js 238
Installing Node using the Chocolatey Package Manager 239
Setting Up Visual Studio to Use the Latest Version of Node 239
Getting Started with Node.js 240
Introduction to NPM 241
Saving Project Dependencies 243
Executable Packages 244
Installing Packages Locally vs. Globally 246
Bower 246
Bower and Visual Studio 248
Installing Bower Prerequisites 248
Installing Git 248
Installing Bower 248
Using Bower 249
Installing Bower Packages 249
Installing Bower Packages Using Visual Studio 250
Gulp 253
Installing Gulp 254
Copying Files Using Gulp 255
Dependencies in Gulp 256
Task Runner Explorer Within Visual Studio 257
Gulp Conclusion 258
Module Loaders 259
What Is a Module 260
SystemJS 261
WebPack 263
Summary 266
Chapter 7: Introduction to TypeScript 267
Why TypeScript? 267
TypeScript Basics 268
An Overview of TypeScript Syntax 268
Datatypes 268
Core Constructs 272
Classes 272
Inheritance 273
Interfaces 275
Generics 276
Compiler Settings 277
Modules 278
Implementing a Basic TypeScript Application 279
Setting Up a Sample Project 280
Working with TypeScript Files 283
NPM Packages 285
Adding TypeScript 287
Classes and Inheritance 288
Adding a Product List 292
Debugging TypeScript 298
Finishing the Application by Adding a Product List 302
Summary 305
Chapter 8: Angular 2 307
Creating a New Visual Studio Core Project 307
Project Files 310
Setting Up the Startup Class 310
NPM Install 312
Gulp Setup 313
Typescript Setup 313
Main SpyStore App Component Setup 314
Creating the Root index.html Page 315
Creating the Root App Component 317
Creating the App Module 318
Creating the Angular Bootstrap 318
Core Concepts 319
Application Initialization 319
Components 320
Services 321
Templating 323
Interpolation 323
Property Binding 323
Event Binding 324
Two-Way Binding 324
Structural Binding 325
Routing 326
Building the SpyStore Angular App 329
Adding Routing 329
Adding a Product Component 329
Creating the Route 330
Adding the Router and Components to the App Module 331
Setting Up the Router Outlet in the App Component 332
Connecting to Services 332
Route Parameters 337
Search Page 339
Product Details Page 342
Setting Up the ProductDetails Component 342
CartService Add To Cart 344
Setting Up the Product Detail Route 346
Cart Page 346
Creating the Cart Component 347
Creating the Cart Record Component 349
Creating the Cart Route 351
Adding the Cart Record Component to the App Module 351
Checkout 352
Creating the Checkout Component 352
Adding a Route for the Checkout Component 353
Summary 354
Chapter 9: React 355
Solution Overview 355
Creating a New Visual Studio Core Project 356
Project Files 358
Setting Up the Startup Class 359
NPM Packages 360
TypeScript Setup 363
Initial Project Folder 364
WebPack 368
Introduction to React 377
Components 377
Application Organization 381
Models 382
Services 383
Initial Components 387
Routing 388
App Component 391
CategoryLinks Component 395
Products Component 397
ProductDetail Component 402
Cart Component 406
CartRecord Component 410
Additional Thoughts 412
Summary 413
Index 414