ASP.NET MVC with Entity Framework and CSS (eBook)

Lee Naylor has 15 years experience as a software engineer with experience in Finance (Banking and Accounting), Retail, Automotive and Gaming/Gambling. His current areas of expertise are ASP.NET MVC, Entity Framework, Front End Development with CSS, JavaScript and JQuery. In the past he has worked with several technologies, including Classic ASP, VB, Access, Java, Oracle, Unix and search engine software such as Google Search Appliances and Autonomy/Verity. He is also experienced in Project and Team Management, mentoring/teaching others and understand all aspects of Software Projects from proposals and budgeting through analysis, estimations, planning, development, testing, UAT, and release management.

Contents at a Glance 6
Contents 8
About the Author 20
About the Technical Reviewer 22
Acknowledgments 24
Introduction 26
Chapter 1: Building a Basic MVC Web Site 27
MVC and ASP.NET MVC 27
Entity Framework and Code First 28
Using Code First with an Existing Database 28
Software Required for Web Site Development 28
Creating the Project 28
Viewing the Web Site 31
How the Home Page Works 32
The About and Contact Pages and ViewBag 33
Routing: How the Web Site Knows Which Controllers and Methods to Request 34
Using the Optional URL ID Parameter 35
The Purpose of the Layout Page 36
Summary 38
Chapter 2: Creating Views, Controllers, and a Database from Model Classes 39
Adding the Model Classes 39
Adding a Database Context 41
Specifying a Connection String 41
Adding Controllers and Views 42
Adding a Category Controller and Views 42
Examining the CategoriesController Class and Methods 43
Examining the Category Views 47
The Categories Index View 47
Category Details View 49
The Category Create View 50
The Category Edit View 53
The Category Delete View 54
Adding a Product Controller and Views 55
Examining the Product Controller and Views 56
Using the New Product and Category Views 57
Examining the Newly Created BabyStore Database 58
Adding Some Data Using the Views 60
Changing the Way the Category and Product Name Properties are Displayed Using DataAnnotations 62
Splitting DataAnnotations into Another File Using MetaDataType 64
A Simple Query: Sorting Categories Alphabetically 65
Filtering Products by Category: Searching Related Entities Using Navigational Properties and Include 66
Summary 68
Chapter 3: Searching, Advanced Filtering, and View Models 69
Adding Product Search 69
Updating the Controller for Product Searching 69
Testing Product Search 70
Adding a Search Box to the Main Site Navigation Bar 71
How to Style Using Bootstrap 73
Filtering the Search Results by Category Using ViewBag 74
Updating the ProductsController Index Method to Filter by Category 75
Adding the Filter to the Products Index Page 75
Using a View Model for More Complex Filtering 78
Creating a View Model 78
Updating the ProductsController Index Method to Use the View Model 80
Modifying the View to Display the New Filter Using the View Model 81
Summary 84
Chapter 4: More Advanced Data Management 85
Deleting an Entity Used as a Foreign Key 85
Enabling Code First Migrations and Seeding the Database with Data 87
Enabling Code First Migrations 87
Seeding the Database with Test Data 90
Creating the Database Using the Initial Database Migration 92
Adding Data Validation and Formatting Constraints to Model Classes 95
Adding Validation and Formatting to the Category Class 96
Adding Formatting and Validation to the Product Class 101
How Validation Works 105
Summary 108
Chapter 5: Sorting, Paging, and Routing 109
Sorting Products by Price 109
Adding Sorting to the Products Index View 111
Adding Paging 115
Installing PagedList.Mvc 116
Updating the View Model and Controller for Paging 116
Updating the Products Index View for Paging 118
Routing 121
Adding Routes 122
Using Routes in Forms 129
Using a Route in a Hyperlink 130
Setting a Project Start URL 130
Summary 131
Chapter 6: Managing Product Images: Many-to-Many Relationships 132
Creating Entities to Store Image Filenames 132
Uploading Images 133
Defining Reusable Constants 133
Adding a ProductImage Controller and Views 135
Updating the ProductImagesController Class for File Uploads 136
Updating the View 139
Testing File Uploads 141
Checking for Unique Records Using Entity Framework 143
Allowing Multiple File Uploads 147
Updating the ProductImagesController Class for Multiple File Uploads 147
Updating the Upload View for Multiple File Uploads 154
Testing Multiple File Uploads 154
Working with the DbContext Object and Entity States 156
Viewing SQL Generated by Entity Framework 159
Performance Considerations When Using db.SaveChanges() 161
Dealing with Maximum Request Length Exceeded Errors 162
Upping the Allowed Maximum Request Size 162
Adding a Custom Error Page for Maximum Request Length Exceeded Errors 163
Associating Images with a Product 165
Adding a Many-to-Many Relationship with Payload 165
Adding Images to a New Product 167
Creating a View Model for Product Creation and Editing 168
Specifying a Fixed Number of Images per Product 169
Updating the ProductsController to Add Images to a New Product 169
Updating the Product Create View 170
Updating the HttpPost Version of the ProductsController Create Method: Manual Model Binding with a View Model 173
Displaying Images in Product Details 175
Testing Product Creation with Images 177
Displaying Images in Search Results 179
Editing a Product’s Images 182
Updating the GET Version of the ProductController’s Edit Method 182
Updating the Product Edit View 184
Updating the ProductsController HttpPost Edit Method: Performing Model Binding Using TryUpdateModel 186
Testing Product Image Editing 191
Deleting Images and Products 192
Testing Image Deletion 194
Seeding the Database with Image Data 196
Updating Image Editing, Details, and Index Views 203
Creating a Partial View for Creating and Editing Products 204
Summary 208
Chapter 7: Authentication and Authorization Using ASP.NET Identity 209
Examining the Automatically Created BabyStore Project Identity Code and Database 210
Working with Roles 213
Adding a Role Manager 213
Creating an Admin User and Admin Role Whenever the Identity Database Is Created: Using a Database Initializer 214
Logging In as the Admin User 216
Adding a Roles View Model and RolesAdminController 217
Displaying All Roles 220
Adding Authorization at a Controller Class Level 221
Displaying Role Details 222
Creating a Role 224
Fixing the Navigation Bar Style Issues 227
Editing a Role 228
Deleting a Role 231
Adding a Basic Admin Controller and View 234
Adding Authorization to the Admin Controller and Admin Link 235
Working with Users 237
Adding Extra Properties for a User 237
Working with Two Database Contexts: Updating the Identity Database for the New User Properties 239
Updating the Admin User Creation Code for the New User Fields 242
Creating a Users Role on Database Creation 244
Adding a UsersAdminController 246
Displaying All Users 247
Displaying User Details 249
Using a Display Template 253
Creating a New User as Admin 255
Using an Editor Template 260
Editing a User as Admin 266
Dealing with Deleting Users 274
User Self-Registration 275
Allowing a User to View Personal Details 284
Allowing Users to Edit Personal Details 288
Allowing Users to Reset Their Passwords 295
Managing Password Complexity 297
Adding Authorization for Product and Category Administration 297
Adding Authorization to Categories 297
Adding Authorization to Products 300
Improving Redirection after Logging In or Registration 302
Redirecting Correctly After an Unsuccessful Then Successful Log In Attempt 302
Always Redirecting to the Previous Page after Log In 303
Always Redirecting to the Previous Page After Registration 304
Summary 308
Chapter 8: Creating a Shopping Basket 309
Adding a BasketLine Entity 309
Adding Basket Logic 311
Adding a Basket View Model 327
Adding a Basket Controller 328
Adding a Basket Index View 331
Allowing a User to Add to Basket 335
Updating the Basket: Model Binding to a List or an Array 339
Deleting a Line or Product from the Basket 344
Displaying a Basket Summary 348
Migrating a Basket When a User Logs In or Registers 351
Migrating the Basket Upon Login 351
Migrating the Basket Upon Registration 354
Summary 356
Chapter 9: Checkout: Creating and Viewing Orders 357
Modeling Orders 357
Creating Sample Order Data and Updating the Database 359
Displaying Order Data 362
Adding an OrdersController Class 362
Displaying a List of Orders 363
Displaying Order Details 366
Placing an Order 369
Creating an Order for Review 369
Displaying an Order for Review 370
Saving an Order to the Database 375
Updating Product Deletion to Avoid Foreign Key Conflicts 378
Adding Links to the Orders Index View 379
Searching and Sorting Orders 380
Orders Text Searching 380
Searching Orders by Date 383
Sorting Orders 387
Summary 394
Chapter 10: Advanced Scenarios and Common Workarounds 395
Asynchronous Database Access 395
A Simple Asynchronous Example: Adding Best Sellers to the Home Page 395
Adding Asynchronous Paging 400
Making Asynchronous Paging Reusable with an Extension Method 402
Adding Page Links to the View and Building an Html Helper 404
Dealing with Concurrent Database Updates 415
Warning Users When the Values They are Editing Have Been Changed by Another User 415
Checking for Conflicts on Deletion 422
Running Raw SQL Queries via Entity Framework 425
Adding Custom Error Pages to the Site 426
Common Entity Framework Problems and Workarounds 428
Cannot Attach the File Filepath/DatabaseName.mdf as Database “DatabaseName” 428
Cause 428
Workaround 428
Code First Migrations Become Out of Order or No Longer Run Correctly 428
Cause 428
Workaround 428
You Want to Roll Back a Migration 429
Cause 429
Workaround 429
Summary 429
Chapter 11: Using Entity Framework Code First with an Existing Database 430
Create a Database to Use with Code First 430
Setting Up a New Project and Generating a Code First Data Model from the Database 436
Setting Up a Controller and Views to View the Data 443
Updating the Existing Database Using Code First Migrations 445
Summary 449
Chapter 12: Introduction to ASP.NET Core v1.0 (MVC6 and EF 7) 450
Creating an ASP.NET Core v1.0 MVC Project 450
Adding Product and Category Models 453
Adding a Database Context 454
Seeding the Database with Test Data 454
Configuring the Connection String for the Database 455
Configuring the Project to Use the SeedData Class and StoreContext 456
Using Migrations to Create the Database 457
Adding Controllers and Views 457
Viewing the Data in the Web Site 460
Correcting Bugs with the Scaffolding Generated Code 462
Summary 463
Chapter 13: Deploying to Azure 464
Preparing to Deploy to Azure 464
Changing from Using a Database Initializer to using a Code First Migrations Seed Method 464
Setting Up Azure 467
Deploying to Azure from Visual Studio 472
Configuring Database Publishing 475
Redeploying Code Changes to Azure 481
Remote Debugging an Azure Web Application 483
Viewing and Editing an Azure Database with Visual Studio 485
Connection Resiliency When Using Azure 487
Summary 488
Chapter 14: Restyling the Web Site: An Introduction 489
CSS: The Basics 490
Styles 490
Stylesheets 490
Selectors 490
Group Selectors 491
Descendant Selectors 491
Sibling Selectors 491
Inheritance 491
Cascading 492
The Box Model 493
Borders 493
Margins 493
Padding 494
Inline and Block Display 494
Putting It Together: Visualizing the Box Model 494
Viewing the Box Model 496
Updating the BabyStore Site to Use Your Own Stylesheet 498
Using a CSS Reset 501
Adding Basic Formatting 504
Fading In Each Page 505
Summary 506
Chapter 15: Styling the Home Page 507
Styling the Footer 507
Using Line Height to Vertically Align Text 508
Rounding Corners 509
Styling the Home Page Headings by Using Font Weights and em Values for Font-Size 510
Introducing Float for Displaying Images Next to One Another 511
Using Clear After a Floated Element 512
Styling the Images 513
Basic Link Styling 515
Styling a Hyperlink to Look Like a Button 517
Removing an Element from the Page Flow Using CSS 520
Summary 521
Chapter 16: Styling Forms, Grid Layouts, and Tables 522
Styling the Categories Index Page 522
Adding Space Between Table Cells 523
Styling the Links 524
Styling the Category Edit Form 526
Adding Vertical Space Using Margins 527
Adding a Grid Layout 528
Styling Labels and Text Boxes 530
Revisiting the Grid System: Adding Blank Columns Using Margins 531
Styling Buttons 532
Styling the Cursor 533
Styling Error Messages 534
Changing the Flow of the Page Using the Display Property 535
Styling the Other Forms in the Site 535
Forcing Inheritance 536
Aligning Text 539
Box-Sizing 541
Using Line-Height with Box-Sizing:Border-Box 544
Vertically Aligning Something with Another Element Containing Text 545
Styling Definition Lists 547
Styling Tables 550
Styling the Paging Links 554
A Sibling Selector Example: Styling the Create New Links 556
Summary 557
Chapter 17: Advanced CSS 558
Styling the Navigation Bar 558
Transforming the Navigation Bar Content to Display Horizontally 560
Moving Elements Using Positioning 563
Styling Text 565
Adding a Shadow to Text 566
Styling Letters and Lines of Text Using CSS 566
Adding Images Using CSS 568
Positioning a Background Image 570
Floating Elements to the Right 571
Adding Animation to Links Using Scaling 572
Introducing jQuery 574
How the Project References jQuery 574
jQuery Syntax 574
Using jQuery to Update the Main Image in the Product Details Page 575
Summary 580
Chapter 18: Responsive Web Sites: Styling for Mobile/Cell and Tablet Sized Devices 581
Introducing Media Queries 581
Designing a Responsive Site 582
Developing for Mobile/Cell Using Google Chrome 582
Making the Home Page Responsive 583
Styling the Navigation Bar for Mobile/Cell 589
Showing/Hiding the Navigation Bar 592
Selectively Adding Columns 598
Displaying Tables on Smaller Screens 610
Viewing a Visual Studio Project on Another Device 619
Summary 622
Index 623