418
Building Web Applications with Visual Studio 2017 Using .NET Core and Modern JavaScript Frameworks Philip Japikse Kevin Grossnicklaus Ben Dewey

 · 2020-06-20 · vii Contents About the Authors x

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

  • Building Web Applications with Visual Studio 2017

    Using .NET Core and Modern JavaScript Frameworks—Philip JapikseKevin GrossnicklausBen Dewey

  • Building Web Applications with Visual

    Studio 2017Using .NET Core and Modern

    JavaScript Frameworks

    Philip Japikse

    Kevin Grossnicklaus

    Ben Dewey

    [email protected]

  • Building Web Applications with Visual Studio 2017

    Philip Japikse Kevin Grossnicklaus Ben DeweyWest Chester, Ohio Ellisville, Missouri Charleston, South CarolinaUSA USA USA

    ISBN-13 (pbk): 978-1-4842-2477-9 ISBN-13 (electronic): 978-1-4842-2478-6DOI 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 SpahrEditorial Director: Todd GreenAcquisitions Editor: Todd GreenDevelopment Editor: Laura BerendsonTechnical Reviewer: Eric PotterCoordinating Editor: Jill BalzanoCopy Editor: Kezia EndsleyCompositor: SPi GlobalIndexer: SPi GlobalArtist: 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 [email protected], or visit www.springeronline.com. Apress 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-mail [email protected], or visit http://www.apress.com/ rights-permissions.

    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 at http://www.apress.com/bulk-sales.

    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 www.apress.com/9781484224779. For more detailed information, please visit http://www.apress.com/source-code.

    Printed on acid-free paper

    [email protected]

    mailto:[email protected]:[email protected]://www.apress.com/rights-permissionshttp://www.apress.com/rights-permissionshttp://www.apress.com/bulk-saleshttp://www.apress.com/9781484224779http://www.apress.com/source-code

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

    —Philip Japikse

    [email protected]

  • v

    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

    [email protected]

  • vii

    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

    [email protected]

  • ■ Contents

    viii

    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

    [email protected]

  • ■ Contents

    ix

    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

    [email protected]

  • ■ Contents

    x

    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

    [email protected]

  • ■ Contents

    xi

    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

    [email protected]

  • ■ Contents

    xii

    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

    [email protected]

  • ■ Contents

    xiii

    ■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

    [email protected]

  • ■ Contents

    xiv

    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