Consolidating MVC Views Using Single Page Techniques
Simplify and improve the testability and reusability of your MVC applications through the use of the Single Page Application idiom and MVVM techniques.
What you'll learn
Paul's Training Company needs a web page to add, edit, delete, list, and search for products at their company. You have been tasked with building this page using MVC 5, but you don't want to use the five separate pages generated from the Visual Studio 2013 scaffolding engine. Instead you want to combine all those pages together in a "SPA"-like technique. You also want to take advantage of MVVM so you can reuse all data access and validation in a mobile application that is to come in the future. In this course, I will walk you through how to use all of these tools to accomplish this SPA-like technique in your MVC applications and improve your testability and reusability.
Table of contents
- Module Introduction 2m
- Step 1: Prototyping Paul's Training Company Product Page 1m
- Create the Paul's Training Company MVC Project 3m
- Layout a Product Search Area in Bootstrap 4m
- Create a Product Table in HTML 2m
- Step 2: Create Data Classes for Product Data 1m
- Add a Reusable Class Library Project for Product Data 3m
- Load Mock Product Data into HTML Table 4m
- Step 3: Implement Model-View-View-Model (MVVM) 2m
- Create a Product View Model Class 3m
- Step 4: Handle Multiple Requests with a Single Method 1m
- Create a HandleRequest Method in View Model 2m
- Step 5: Use Data Dash Attributes for Searching 3m
- Build Search Functionality in View Model 6m
- Implement Search Using Data Dash Attributes 5m
- Module Summary 1m
- Module Introduction 1m
- Step 1: Control Visibility of Areas on Our Page 1m
- Add Visibility Properties to View Model and View 5m
- Step 2: Add Save and Cancel Buttons and Detail Panel 1m
- Add Buttons and Control Visibility Using View Model 3m
- Step 3: Create Private Methods for Reusability 1m
- Create ListMode and AddMode methods 2m
- Step 4: Add More 'State' Properties to View Model 2m
- Add 'State' Properties and Build Product Input Area 6m
- Step 5: Add Validation 1m
- Add Data Annotations to Entity Class 9m
- Display Validations in Bootstrap Alert 4m
- Step 6: Add Custom Validation to Manager Class 3m
- Create Custom Validations in Manager Class 4m
- Add Custom Validation Messages to ModelState 5m
- Module Summary 1m
- Module Introduction 1m
- Step 1: Add Editing to the Product Page 1m
- Create Edit Button on the Product Table 2m
- Step 2: Add Data-attribute for the Primary Key 1m
- Pass Data-attribute to EventArgument 3m
- Step 3: Get Single Product for Edit and Update 3m
- Create Edit and Save Functionality 7m
- Step 4: Delete a Product 1m
- Add Delete Button to HTML Table 5m
- Module Summary 1m
- Module Introduction 1m
- Step 1: View Model Base Class 2m
- Create View Model Base Class in DLL 7m
- Step 2: Move 'State' Methods 0m
- Add State Methods to View Model Base Class 3m
- Step 3: Move 'Modification' Methods 1m
- Add Modification Methods to View Model Base Class 5m
- Step 4: Move HandleRequest Methods 1m
- Add HandleRequest to View Model Base Class 4m
- Module Summary 1m
- Course Summary 2m
About the author
Paul has over thirty years of experience architecting information systems and his expertise is in much demand from Fortune 500 companies. Paul is a Pluralsight author, has published 400+ articles, and authored over 14 books on topics ranging from JavaScript, Angular, C#, SQL Server and many .NET technologies. Paul is a frequent speaker at conferences and user groups.