Building a ASP.NET MVC 5 Membership Website
This highly modular and proven no-fluff course will teach you how to implement a fully functional ASP.NET MVC 5 membership website complete with an Entity Framework code-first database and two user interfaces; one for administrators and one for the end-user. I have used the teaching technique used in this video course for many years with fast superb results for my students.
Gone are the days when you learned programming through short incoherent examples, in this course you will learn by implementing a complete web application while “looking over my shoulder” as I implement it with you in short step-by-step scenarios. This course is laser-focused and highly targeted to web developers just starting out who have a completed at least one beginner MVC 5 course prior to this course; the prerequisites for this course are that you have a basic understanding of MVC 5 and the C# language, other than that I only ask that you keep an open mind and are ready to learn.
Complete this course and be proud of your achievement. Host the web application online and showcase it in your CV on job interviews or wen negotiating your salary with your boss. You can even use your knowledge to work online selling your services on sites such as Fiverr and UpWork.
Technologies, frameworks and languages:
- C# (you need to be proficient)
- MVC 5 (create/modify models, views and controllers)
- Razor syntax
- HTML5/CSS3 (you need basic knowledge – I have included a basic PDF course for you to get started or to use as a refresher)
- Bootstrap (used for styling and create a responsive design)
- Ajax (used for asynchronous server calls)
- LINQ (to query the database)
- Extension methods (to clean up your C# code and enable re-use)
- HTML Helper methods (to clean up your HTML and enable re-use)
- Use settings from the web.config file
- Deploy to Azure (BONUS)
Three BONUS courses that will get off to a flying start:
- HTML5/CSS3/Bootstrap [PDF] – Will teach you basic HTML5, CSS3 and Bootstrap.
- MVC 5 For Beginners [PDF] – Will teach you the beginner stuff needed for this course.
- Azure [VIDEO] – How to setup and deploy your web application to the Azure cloud.
FREQUENTLY ASKED QUESTIONS
1. Do this course cover ASP.NET Core 1.0?
2. Why should I pay for this course when there are lots of free tutorials available?
Free tutorials and YouTube videos are free for a reason. They introduce you to a few concepts here and there, but soon you’ll find yourself jumping from one tutorial to another without getting the full picture; this will cause you to waste valuable time that you could spend with your family and friends or to make money. By taking a highly structured course, such as this one, you will learn the necessary skills in a real world scenario step-by-step.
I hope you love the course!
The first video in this section itroduces the website you will be building in this course and the second video show you how to setup the project in Visual Studio 2015.
This video will show you how to setup the Memeberships Visual Studio 2015 solution and how to add necessary folders and files.
The video also shows how to connect an already existing TFS source control folder to the Memberships solution. Disregard the parts about TFS if you are not using TFS source control.
When you open the solution source code project it might ask if you want to connect to Team Foundation, just answer No and the solution will open correctly.
You can find the source code committed in steps at the following GitHub repository:
Since JWPlayer require you to pay, I have put together a short tutorial
on how you can add the VideoJS player instead. Download the PDF below.
Module 1 - Adding the Admin menu to the navigation bar
This is an intrduction to what you will be creating in this module.
Adding the Admin area where the Admin Controllers, Actions and Views will be created.
This iintroductory video will describe what the menu look like that you will be creating in this section.
This is the second of four videos showing how to add the Admin menu. Adding the drop-down menu using a partial view.
This is the second of four videos showing how to add the Admin menu. Removing links from the navigation bar in the Admin area.
This is the fourth of four videos showing how to add the Admin menu. Adding Menu items to the Admin menu.
Module 2 - Creating the Database
This introduction video gives an overview of what you will be creating in this section.
With the help of the remaining videos in this section you will create the necessary entity model classes which will become the tables in the database that you will create with Entity Framework Code-First. You will apply certain attribute to the properties representing the table columns to restrict them and to force certain settings in the database.
Learn how to enable database migrations, configure settings and create the database.
Adding the Section table to the database and look at its settings in the Server Explorer window.
Adding the Part table to the database and look at its settings in the Server Explorer window.
Adding the ItemType table to the database.
In this video you will add the Item table to the database. This table has the most columns of all the tables in the database. It is one of the core tables which will contain items, or pieces of content, associated with one or more products.
Adding the Product table to the database. This is one of the core tables which jolds information about products that can be associated with one or more subscriptions.
Adding the ProductType table to the database. The product type defines what type of product it is, i.e. a book, a video, a course, ...
Adding the ProductLinkText table to the database. This table contain enticing link texts which are meant to get the user to click into a product and view it's content. The text is displayed in the green animated link on the product image.
Adding the Subscription table to the database. This is one of trhe core tables which holds inforamtion about individual subscriptions that the user can subscribe to by entering a registration code. A sunscription can contain one or many products.
Adding the ProductItem table to the database. This is a connection table between the Product and the Item tables accociating one or more items with one or more products.
Adding the SubscriptionProduct table to the database.This is a connection table between the Product and the Subscription tables accociating one or more products with one or more subscriptions.
Adding the UserSubscription table to the database. This is a connection table between the Subscription and the AspNetUsers tables accociating one or more subscriptions with one or more users.
Modifying the AspNetUser table through the ApplicationUser class. Three additional columns will be added to this auto-generated table making it possible to store additional data such as the first name of the registered user.
Module 3-1 - Creating the Admin User Interface for the Section entity
This is an introduction to the Controllers, Actions and Views needed for the minor entities asscociated wth the Section, Part, ItemType, ProductType and ProductLinkText tables.
Scaffold the controllers, actions and views for the Section table.
Modify the Create view for the Section table.
Create a partial view containing a "Back to List" button which will navigate back to the Index view of the current controller.
Modify the Edit View creating buttons instead of links and use Bootstrap to style the view.
Modify the Details View creating buttons instead of links and use Bootstrap to style the view. We will also create a partial view called _EditButtonPartial which will navigate to the Edit view of the current controller.
Modify the Delete View and replace the Back To List link with the _BackToListButtonPartial view.
Modify the Index View and add a new partial view called _CreateButtonPartial which will navigate to the Create view associated with the current controller.
Add a class called SmallButtonModel which will be used when creating a partial view containing the table buttons.
Add a a partial view called _SmallButtonPartial which will be used for each button in the partial view containing the table buttons.
Add a partial view called _TableButtonPartial using the _SmallButtonPartial view for its intrinsic buttons.
Module 3-2 - Adding controllers for the rest of the Minor tables
Adding Controller, Actions and Views for the Part table.
Adding Controller, Actions and Views for the ItemType table.
Adding Controller, Actions and Views for the ProductLinkText table.
Part 4-1 - Creating the Admin User Interface for the Item entitiy
A brief description of what we will be implementing in this and the next module for the Item, Product and Subscription tables.
In this module you will scaffold and modify the controllers, actions and views for the Item table.
Add an extension method called GetPropertyValue which will be used when fetching Items.
Add an extension method called GetPropertyValue which will be used when fetching Items.
Add an extension method called ToSelectListItem which will be used when displaying items in drop-down controls.
Add the Create view for the Item controller and replace some of the textboxes with drop-downs.
Alter the Create view for the Item controller by changing a property data type in the Item entity class, updating the database and changing the textbox to a checkbox.
Styling the links to Bootstrap buttons in the Create view.
Add items to the Item table to have some data to work with.
Changing the textbox for HTML content into a text area to allow for multiple rows.
Create a model object for the drop-downs in the controller for the Edit view and style the it with Bootstrap.
Styling the Details view with Bootstrap and partial views.
Styling the Delete view with Bootstrap and partial views.
Styling the table in the Index view with Bootstrap and replacing the links with buttons created with a partial view.
Part 4-2 - Creating the Admin User Interface for Product and Subscription
Add data to the minor entities associated with the Product table to have some data to work with when adding products later.
Add the ProductModel class which is used to transport data from the Product controller to its views.
Add the asynchronous Convert extension method that will convert a collection
of Product objects into a collection of ProductModel objects.
Add a new Convert extension method which converts a single Product into a ProductModel instance and use it to create the model for the Details view.
Use the Convert extension method added in the previous video to create a model for the Delete view. Also delete a product to see that the view is working.
Part 4-3 - Creating the Admin User Interface for the ProductItem entity
Connector entities are tables which are used to create a many-to-many relationship in the database.
In this module you will scaffold and modify the controllers, actions and views for the ProductItem table.
Add the ProductItemModel class which transports data from the controller to its views.
Styling the view with Bootstrap and changing textboxes to drop-downs.
Adding a model to the action methods and make them asynchronous. The model is rendered with the view.
Add an overload for the Convert extension method to handle object conversions from a list of ProductItem objects to a list of ProductItemModel objects.
Saving the ProductId and ItemId sent to the view when it was rendered in hidden fields called OldProductId and OldItemId; these ids will then be used to remove the old item when the drop-down selections has changed and the user clicks the Edit submit button. A transaction will be used when removing the old values and storing the new values to make sure that both changes will be propagated to the database.
Add an overload for the Convert extension method to handle object conversions from a ProductItem object to a ProductItemModel object.
Create a method called GetProductItem which fetches ProductItem from the database based on a product id and a item id. This method will then replace the default call to the FindAsync method in the HttpGet Edit Action.
This is an introductory video to the GetChange method which checks if a ProductId-ItemId combination can be changed in the ProductItem table.
Implement the GetChange method which checks if a ProductId-ItemId combination can be changed in the ProductItem table.
Explains how to implement the Change method which alters a ProductId-ItemId combination in the ProductItem table.
Add calls to the CanChange and Change methods to persist the changes to the database for the ProductItem instance.
Send in two parameters instead of the default one and call the GetProductItem method we created in a previous video.
Add the EditButtonModel class which is used to send ids to the _EditButtonPartial view.
Altering the _EditButtonDetailsPartial view to use the EditButtonModel class as its view; the partial view is then rendered from the Details view.
Change the view to use the ProductItemModel class as its view model. Use the _EditButtonetailPartial view and the EditButtonModel class to replace the Edit link with an Edit button in the view. Alter the Delete action to take two parameters and call the GetProductItem method instead of the FindAsync method to fetch the desired Productitem to remove from the database. Style the other links to buttons with Bootstrap classes.