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.
Course info
Rating
(251)
Level
Intermediate
Updated
Oct 9, 2015
Duration
2h 29m
Table of contents
Consolidating MVC Views Using Single Page Techniques
List and Search Data Using MVVM, MVC5, and Bootstrap
Add and Validate Data with Data Annotations, MVVM, and MVC 5
Modify & Delete Data Using Hidden Fields and Data Dash Attributes
Reusability Using a View Model Base Class
Description
Course info
Rating
(251)
Level
Intermediate
Updated
Oct 9, 2015
Duration
2h 29m
Description

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.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
Angular Security Using JSON Web Tokens
Intermediate
2h 50m
Apr 2, 2018
More courses by Paul D. Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Consolidating MVC Views Using Single Page Techniques
Hello everybody! Paul Sheriff here with Pluralsight. This course is Consolidating MVC Views Using Single Page Techniques. There're a lot of reasons to watch this course. We're going to learn how to eliminate pages in MVC. So instead of having five pages that are normally scaffolded, we're going to end up with one CRUD on a single page. So all of our Create, Read, Update, and Delete will be on one page. We're also going to use the Model-View-View-Model approach to accomplish this, and that will help us reduce code in the controller and will make it a little bit more UI Agnostic so that we can move these view models to other UIs. We're going to create a reusable base class. But more importantly, I'm going to show you how to do this step by step. So let's jump into it.

List and Search Data Using MVVM, MVC5, and Bootstrap
Hello everybody. Paul Sheriff here with Pluralsight. This module is List and Search Data Using MVVM, MVC 5 and Bootstrap 3. There're a lot of reasons to watch this particular module. We're going to learn to list and search data on an MVC page. We're going to do it step by step all the way from a specification to implementation. We're going to refactor our code to use the Model-View-View-Model approach. And in the process, learn how to simplify our MVC controllers. So my boss comes in and gives me this spec. Now that looks like a spec to you. Just on the back of a napkin of course. So what he wants to do is he wants to be able to search by product name or maybe additional fields later, show a list of products, and be able to add, edit, and delete those products. So my job--we're going to turn this into a real-world web page, and we're going to use MVC and Bootstrap. Now my approach--well, first off I'm going to prototype the screen. I always like to do that, run it by the boss, make sure that's kind of what he was thinking based on his spec. I'm going to create some model classes for the product data and create the HTML table to do the list of data. I'm going to add a view model class and call it from the controller. And I'm going to create one property for the command that I want to send in and one public method within that view model class. Now the command is something like "list, " "search, " "add, " "edit, ", "delete, " etc. And we're going to see how that works in a bit. And then, finally, we're going to implement the search so we can actually see results in our HTML table.

Add and Validate Data with Data Annotations, MVVM, and MVC 5
Hello everybody! Paul Sheriff here with Pluralsight. This module is Add and Validate Data with Data Annotations, MVVM and MVC 5. There're a lot of reasons to watch this module. We're going to learn how to turn areas of our page visible and invisible using properties in our view model. We're going to add input fields on a page. And we're going to learn how to validate data using data annotations and then add on some additional business rules in our Manager class. And then we'll learn how to display those messages within a Bootstrap alert area. So I talked it over with my boss, and our approach is going to be something like the following: We're going to control the visibility of the page. We're going to add a new panel on with Save and Cancel buttons. And then we're going to kind of create a few more private methods. So we're going to kind of break things down a little bit more. We'll add then the rest of the product detail input area to our new panel with the Save and the Cancel buttons. We'll add data validation using our data annotations and then add on additional validation that we can use to display additional error messages that are outside of the data annotation area. So let's take a look at how we get started doing all of this.

Modify & Delete Data Using Hidden Fields and Data Dash Attributes
Hello everybody! Paul Sheriff here with Pluralsight. This module is Modify and Delete Data Using Hidden Fields and Data Dash Attributes. Now there're a lot of reasons to watch this module. What we're going to do is we're going to store the primary key in a data- attribute. And then we're going to store that data- to a hidden field called EventArgument. This will be passed to our view model then through binding. And then we're going to use that to be able to edit or delete the particular piece of data. So the approach we're going to take for this--my boss and I decided what we're going to do is we're going to add an Edit button to the HTML table, and we'll store the primary key in a data- attribute of that button. So we're going to then use that. We're going to take that value out, bind it to a hidden field using a little bit of jQuery. So that way we'll be able to get a single row of data for editing, display that in the input form, validate, and then save that data back. We're then going to do the same thing for deleting a row of data. So let's take a look at how this works.

Reusability Using a View Model Base Class
Hello everybody! Paul Sheriff here with Pluralsight. This module is Reusability Using a View Model Base Class. A lot of reasons to watch this module are learn to eliminate code from each view model. We've created one view model so far, but obviously you're going to create a lot. And what we want to do is create a view model base class that each one of these can inherit from. And then we're going to see how to override the various methods that we have in there, but at least we have kind of a base to start with. In this way, we're going to create code that is very reusable. So how are we going to do this? Well, we're going to create a view model base class first. We're going to move the state methods that we've already written like AddMode and EditMode because they're very generic, so we can move them down into our base class. We'll create some virtual overridable modification methods, the Add, the Edit, and the Delete. We're not going to take the actual code, but we'll at least put the stubs down there in the base class. And then, finally, we'll move the HandleRequest method that we can then override as well.