4.29 out of 5
1756 reviews on Udemy

ASP.Net MVC Quick Start: a real-world resume-builder for you

Build your own public-facing CRUD (Create, Read, Update, Delete) website w/MVC and Entity Framework in a weekend.
Brian Gorman
17,691 students enrolled
English [Auto-generated]
Understand the major pieces of the Microsoft ASP.Net Framework
Have a public-facing website with authorization, authentication, and real-world value to enhance your resume/electronic portfolio
Understand how to use the code-first approach to generating a database using Entity Framework
Discuss the differences between Models, Views, and Controllers
Have the tools to setup and host a basic CRUD Web Application online
Have a basic understanding of working with Git, BitBucket, and AppHarbor

    This course is a very quick workshop to take you through the basic actions that will be required for you to create an awesome, real-world CRUD web application in just a few hours (you could do it over a weekend very easily) using ASP.Net MVC, the Entity Framework (code-first development approach), and the built-in scaffolding capabilities of ASP.Net MVC.  In the end, you’ll have your own public-facing website to enhance your resume and show off your skills in your own e-portfolio for job interviews and applications!  

    MVC = Model, View, Controller, and is a well-known and established design pattern.  Microsoft has made it extremely easy and convenient to create your web solutions using this pattern.  In Microsoft’s MVC framework, we find that convention is favored over configuration, so as long as we follow a few simple guidelines, the system will do a lot of the work for us. 

    We’ll also be taking a quick look at how we can use the Entity Framework to easily model and create a database for us.  By using the code-first approach, we’ll simply create our models and then look at writing a DBContext to store the models.  We’ll also create an initializer class which will see our database for us, so that we can quickly and easily test our system. 

    After we’ve learned about the different aspects of our application, we’ll quickly create a controller and use ASP.Net MVC’s built-in view and scaffolding generators to easily build our CRUD operations against our database. 

Other things we will learn throughout the course involve the use of Git for source control, pushing our repository to BitBucket, and linking an AppHarbor project to BitBucket so that we can get continuous integration setup. You could also use GitHub if you prefer that to BitBucket.  

To close out the course, we’ll put DataTables.js on our Index view so that we can easily show the data, as well as provide built-in javascript tools that will filter and sort the data for us.  This will make your application “pop” when people look at it because it will be fast and easy to sort through the data and filter for results.

By the end of the course, you’ll be familiar with the major working parts of creating an Asp.Net MVC CRUD application and publishing to a public-facing website with a fairly nice and responsive UI.  You’ll have working knowledge of Models, Views, and Controllers, as well as how they interact to create a functional web application.  You’ll also be exposed to the Entity Framework and Code First Migrations with use of a SQL Server backend.  The best part is that although this sounds pretty daunting, it’s actually quite easy with a majority of the work done for us.

Getting Started

Introduction, Welcome, and Overview

This is the introductory lecture for the course.  This lecture explains what this course covers, including creating a new ASP.Net MVC web application from the ground up and being able to deploy the application to AppHarbor using Git [BitBucket].  The application will use MSSQL as the database backend (one video covers setting up the free database at AppHarbor.  Additionally, we'll use Facebook to authenticate our users and allow them to each store their own contact information as they so desire.

The Job Posting

The entire idea for this course came from a job posting that I saw a couple of years ago.  Essentially, the task was to create a public-facing website that allows the user to store "Person" objects with critical details like name and phone number.  In addition to the minimums they ask for the ability to be able to filter and sort, add, delete, and modify the items.  We'll learn how to do all of this very easily in this course, and by the end of the course would have a public-facing URL that could be sent with our application for this position.

Install Visual Studio Community 2017

In this video, we'll get Visual Studio 2017 community installed.  We can install side-by-side with 2015 (or older versions) if desired.  Most projects are easily upgradable to 2017 without issue, however older projects that are no longer supported should not be upgraded.

Install SQL Server 2017 Express

In this video, we'll get SQL server 2017 express installed.  With VS 2017 we can still use the local db file, but if you don't want to, you can put sql express on your machine and run off a local version of the db.  It's good for us to get used to using a lightweight version of the real db anyway, and this will give us a chance to work with the local db outside of visual studio as needed.


Install SQL Server management Studio

The best way to interact with SQL Server express directly is via the Management Studio tool.  SSMS [SQL Server Management Studio] is a free tool that allows us to easily connect to databases, set up security and new databases, and query existing databases.  We'll want to have this tool so that we can directly interact with our database outside of the visual studio environment.  Even better news is that once we have the tool setup, we can also connect to our AppHarbor database and be able to easily query the database there as well.

Install GIT for Windows

VS 2017 has plenty of built-in tools to work successfully with GIT, however the videos from our course use GitForWindows.  I did a video a month or so ago and wanted to share this with you as it is more recent.  

Creating The Project

IMPORTANT UPDATE: Although it is not shown in the video, you can save yourself a LOT of pain if you select to create a GIT repository for the solution.  This will auto-generate a .gitIgnore file that will keep a lot of painful things from being tracked.

If you do create the git repo at this time, you won't need to create it manually later, but you will still need to wire it up with the upstream later [this will make sense when you get there].

If you are past this lecture and you didn't create a .gitIgnore file, refer to the updates portion of the course for cleaning up our GIT repository.

This video takes us through the creation of the project that we'll be building for the remainder of the course.  When we create a default MVC project, we're set up with the tools and frameworks we need in order to create a fully-functional web application in ASP.Net MVC with C#.  

We'll modify some of this and we'll still need to add in our database information in future lectures, but we'll see that things are wired up pretty well right out of the box.

Setup your project to use a local instance of SQLExpress [Optional]

Setup and Configuration

Changing the Folder Structure

In this video we are going to blow away some of the default folders so we can set up our project with a more-common web layout.  We'll also get a chance to work through the restructuring to see how the different components work together.  For our web app to be complete, we'll need to recreate a folder for our javascript and css and also will have to add in a folder for images.  We'll be taking care of most of that in the next few lectures.

Get JQuery

JQuery is one of the most powerful and widely-used javascript libraries available.  JQuery allows us to quickly work with javascript to build robust UI experiences on the client side of our application.  While we won't be using a lot of it in our course, we'll need it in order to work with Bootstrap, as well as having this is a common staple in .Net development.

Get Bootstrap

One of the most widely-used and powerful responsive frameworks for web development is Bootstrap.  Bootstrap is a wrapper on CSS that allows us to quickly and easily skin sites and have them respond directly to the sizing of our device, from a small phone to a midsized tablet to a fullscreen monitor.  By custom tailoring our site, we'll be able to have the pages work differently in order to render correctly on each device.  We won't be learning a lot of Bootstrap in this course, but our site will rely on it for the overall layout.

Get a Bootswatch Theme

IMPORTANT NOTE: If you are using Bootstrap 3, you will need to make sure to get a bootswatch theme that works for Bootstrap 3. Use this link: https://bootswatch.com/3/

Bootswatch is a cool site that allows us to grab a free skin for our Bootstrap layout.  We don't absolutely need to use this, but this is the quickest way to go from a vanilla look to something that looks a lot more professional, just with simple color schemes and default settings.  We'll pick our favorite free template and use that in our site.

Get DataTables

One of the requirements for the original job-posting is to be able to easily filter and sort on the different contacts that we'll be working with.  DataTables is a powerful javascript library that allows us to easily do the filtering, searching, and sorting that was requested in the original post.  This is a great tool to have in your toolbox for professional development as it will be useful in many different situations in the professional world.

Create Site.css

Every website should have it's own unique CSS file to keep track of certain aspects of the site that are unique to it.  In this video, we create the site.css file that will store our unique css styles for our website.

Fix Bundle Config

The bundle config is a file that lets the system easily put groups of css and javascript files into a "bundle" and then perform a simple reference to use them on our web pages.  Since we wiped out a lot of the core folders and have changed some of the files we're using and their locations, we need to reset the bundle config to work with our layout.  This video will take us through getting the bundle-config back to where it needs to be.

Fix Layout.cshtml and Run the Application

The layout.cshtml file is the file that all of our views will inherit from.  As such, common structures like the NavBar and footer are located here.  Also, we'll note that the section has a "RenderBody" call that will feed in the specific code for the view being rendered.  There is also a place to render scripts, which allows individual views to be able to render their own javascript scripts and have them run at the appropriate time.


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

Source Control

Git For Windows

In our course we'll be relying on Git via BitBucket to set up and maintain our coding repository.  In order to easily work with Git, we'll walk through the installation of a Git Client for Windows.  

Create the Repository

Every project needs to have a repository that stores the information about the files and folders involved in the project.  In this video, we'll create a Git repository on the folder with our project.  This will allow us to commit our code to the repository.  The advantages of the repository are that the repo will allow us to easily see and track our changes, rollback to a previous version of our code if something goes horribly wrong, and ultimately can share our code with other team members who can then do modifications.  By having the repository, team members could easily collaborate and make changes, check them in (commit), and everyone can pull the latest version to get the most up-to-date code at anytime.

Get an account and push our source to BitBucket

BitBucket is my favorite place to store code, simply because they allow you to make private repositories.  If you are already using GitHub and/or want to use GitHub for this project, you should feel free to do so.  While I'll be doing the videos in BitBucket and wiring up AppHarbor to link to my BitBucket account, there is no reason you cannot do that with GitHub (or other tools).  AppHarbor will for sure link to either BitBucket or GitHub, so either is perfectly acceptable.  Just remember if your repo is public, you will probably want to encrypt your AppSecret, AppId, and connection Strings so that others would not have access to them.

Once we have our source 'committed' then it is time to push it out.  To "push" out the code means to upload it to the common repository.  Since we are working by ourselves at this point, we don't need to worry about anyone else and should have admin rights so we won't have to ask to have our code merged into the default branch (in fact, we'll only be working on the default branch).

In this video I'll create the repo on my BitBucket Account.  You'll need to set up your BitBucket account if you don't have one and then you can create your repo in the same manner.  

Get an Account at AppHarbor

While we could use Microsoft's Cloud hosting - Azure - to do our applications. I have found that it is incredibly easy and FREE to work with AppHarbor for basic applications.  AppHarbor also works like Azure in that you can spin up more worker processors or a larger database as needed (for a fee, of course).

You'll need to create an account at AppHarbor, and then follow along with the video to create the project at app harbor.  

Link our Bitbucket account to AppHarbor

Linking our Repo to AppHarbor is a quick and easy way to ensure that our code is automatically deployed when we create a new commit on the main branch of our repository.  Using GitHub should have similar results as AppHarbor will allow you to wire up to GitHub as well.  For our videos, we're using AppHarbor with BitBucket, and this video will show how to create the link.  A really nice feature is that every time the code is committed, AppHarbor will build and deploy the new version without us having to do any extra work.  After the code is built and deployed, AppHarbor will also place a comment on our repository at BitBucket to let us know that it is complete.

Supplemental Instruction

This video exists because I ran into an unexpected problem with AppHarbor and the Roslyn files from ASP.Net.  The good news is that you get to see me sweat through a couple of changes and attempts to fix the application deployment.  In the end, we figure out the correct fix and get the application to deploy and work on the AppHarbor site.  I could have gone back and fixed this so that you would not know I had these errors, but I wanted to leave them.  This is the kind of thing that you will encounter all the time as a developer, so it's good to see that everything is not always just bells and whistles.  In the end, we get it working and we get to see how that happens.  That's pretty cool.


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.


Create Your App on Facebook

Taking a step away from our application for a moment, we'll go out to Facebook for developers and create an application.   To make this work, you'll of course need a facebook account and register to work as a developer for facebook applications [this is all explained on the facebook site if you have questions].  

I should have just setup a test project right away (I have to do that in a later video).  That being said, if you follow along with the videos you'll be just fine.  Here we set up our facebook application that we'll use to allow users to authenticate on our site via their facebook login.  

I really love the idea of third-party authentication.  This means that I don't have to store a password locally and also means that it reduces the risk to me as the creator of this application.  If users login via a third-party, then the security is mostly on them for authenticating the actual person, and I just have to wire-up my app to correctly integrate the interaction with that third-party provider. 

Facebook Authentication UPDATE - Please read before moving on to adding Facebook

Please review this article before moving to Lecture 23 about Facebook Authentication.

Facebook and application Setup as of 2018.06.29

Facebook constantly makes changes.  Please refer to this document to be able to work with Facebook locally on your system.  At this time, setting up Facebook at a public-facing URL will most likely cost money, unless you can find both hosting and an SSL included with your domain for free.  If you find a place where you can do this, please share with us!

Add Facebook Authentication to the project

********* PLEASE NOTICE: Please make sure you have completed Lecture 23 before doing this lecture.  If you do not upgrade your Facebook OWIN package, you will most likely get stuck at login when trying to use Facebook. *****************************

Once we have our application setup at Facebook, we need to set the web project to use Facebook authentication.  This video walks through how to make that happen in our web application.

Register with our Facebook ID

This video is a live demonstration of registration with the newly wired-up Facebook authentication.

Register using native built-in authentication

Of course not all of our users will have a third-party option.  Luckily, ASP.Net authentication comes with powerful registration and account management tools out of the box for our application.  

This video just walks through registering via the local application, in the absence of any third-party provider.

Create the database on AppHarbor

Now that we have authentication, we see that it's stored in a database locally.  When we move the application to the web, we need a database that is accessible to the web application.  In this video, we'll go out to our AppHarbor account and go to the project we are working on and create a new free database instance to use in project.

Add Release configuration for database settings to point to AppHarbor

By default, ASP.Net Web applications use the web.config file to find things like connection strings and other variables that are needed to make our web systems work.  The nice thing is that we can use the web.config.release version to create settings that are specific for our web deployment in production. 

In this video, we'll modify the web.release.config to contain our settings for the AppHarbor database.  When we deploy, then we'll be connected to the web-accessible database, and not the database on our local machine.

Setup Test Application on Facebook

Since we have a local test application and a production release application, it only makes sense that we would have both a test and a release version of the application on Facebook.  In this video, I go back and make the test application on Facebook that we'll be using locally.

Make our AppId and AppSecret pull from web.config

Now that we have both the test and production versions of the application for Facebook, we also need to make sure that we can pull the correct settings from our appropriate web.config file.

In this video, we'll set up the appid and appsecret keys in the web.config and wire our application to pull from them.

Deploy by checking changes into source control

To deploy our application when things are correctly wired up, all we need to do is check our changes into our repository.  This will then use the continuous integration that we've wired up to build and auto-deploy at App Harbor.  When this is complete, we can go out and view our changes on the recently deployed version.

This video shows me checking in my changes and then running into a couple of small surprises after deploying.  Again, I could have edited all this out, but I really feel that you seeing me struggle through this and troubleshooting will give you more of a real-world feel, as this is yet another example of the types of things we run into as developers.

Fixing Web.Config transforms to point to correct AppId and AppSecret

In this video, I walk through the problems I was having with the release configuration.  This is a good chance to see how important it is to review what is actually going to deploy in your config files.  Once I saw what it was doing, I was able to figure out a way to create the config so that the correct keys would work as expected, and we were actually hitting the correct Facebook AppId and AppSecret.


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

Creating Models

Restore from source control

It's incredibly important to be able to restore our project from the repository when things go wrong.  In this video, I restore my project from the repo.  Here I note that I never saved the local database files to the repository, so that means they need to be recreated. In a normal situation, there would not already be the database registered on the machine (and even if there is you could remove it with Sql Server Management Studio Express).  

Had I shut everything down, I could have saved my local database files to the repo, but I didn't do that. So now the dilemma is how to proceed.  The easiest way is just change the filename so that it creates a new database and does not run into a conflict.  Again, ordinarily you would not need to do this step and would be able to easily restore to a new machine or clean machine.

The Contact Model

The "M" in MVC is Model.  Models are the code classes that allow us to describe our objects in detail.  In this video, we'll create the contact model with all the properties we'll need to store the data for each of our contacts in our systems.

Reminder: Check your changes into source control

Make sure that as you progress and hit a level where you would want to restore to that you check your changes into source control.  There is no penalty for the number of times you check in.  In fact, some workplaces mandate checkins by day or even by a shorter interval.  Ultimately, you need to find your own groove!


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

Views and Controllers

Create The Contacts Controller

The "C" in MVC is Controller.  In our application, the Contacts Controller is where the logic will happen and the routing will happen.  The requests come into the controller with the correct HTTP verb (GET/PUT/POST/etc).  Once the request comes in, the controller runs the correct code to accomplish the task and passes information to the View (the "V" in MVC).  The good news is that ASP.Net MVC will set up a lot of this for us when we create the objects.

In this video, we'll create the controller and have it scaffold our views so that we'll have CRUD operations wired up without having to write any code.  Of course we will modify this a bit as we go.

Looking at the Contacts Controller

In this video we will take a look at the controller methods that will respond to the appropriate HTTP Verbs as requests are routed to the controller.

Review the Views

Now that our Controller scaffolded our Views for us, we should take a look at the resulting views.  We'll note that each Controller will get it's own folder to hold views and that the folder will be named exactly the same as the controller without the word "Controller."  This will allow us to easily see which views go with which controller for our projects.

In this video, we'll look at the views that were created for Details, Index, Create, Edit, and Delete.

More Source Control Info

In this video we'll do just a bit more with source control to make sure we are checking in and committing our changes and to make sure we are comfortable with the process.  


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

The Database [Entity Framework]

Create the Contact Web Migrations

We'll set up two different database connections (even though we're connecting to the same database).  This allows us to keep our authentication separated from our application logic.  In this video, we need to create the db migrations to set up the Migrations for our ContactWebContext.

Add the ContactWebContext db connection to the web.config.release

Now that we've created the ContactWebContext, we need to add the settings to the web config.  This will allow us to make sure to connect to the correct database when we release.  We'll see later that the way this works is a bit tricky so it won't work as we set it up here, even though it looks like it should.

Find our UserId

In order to set up some data, we need to find out what our UserId is.  In this video we take a look at a couple of different ways to get that information.

Seed Some Data

Seeding data allows us to put data in code that will actually be inserted or updated in the database at the start of the program after it is deployed.  This is a quick and easy way to set up some data that we can see on the website and start to interact with.  In this video, we'll set up some seed data.

Add Authorization and respond to the correct user

In this video we'll set up authorization so that the user has to be signed in to be able to work with the specific views that list, create, edit, or delete contacts.  Furthermore, not only does the user have to be signed in to work with the data, but with the correct setup we now can ensure that the correct user only sees their own contacts.

Check in and make sure the changes propagate and work on AppHarbor

In this video we check in our changes and deploy so that authorization is in place.  This is part one of two as we'll have to do a quick correction on the web config in part two to get things working as expected.

Final Fixes for a successful deploy after adding in Database changes

When we created the release config for the contact web database, we set up keys in the transform that made sense to replace.  However, what we find is that the transform didn't work as expected, so we have to do a remove and insert in order to get things working as expected.  In this video we get that taken care of so that the database will be correctly referenced.


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

Make our application worthy of going public

Render Across the whole page

Using Bootstrap, we can set the class on our main container to "container-fluid" which will expand the content so that it takes up the entire page width.  In this video, we will set up our containers to work as container-fluid.

Cleaning up the NavBar

The top-level navigation bar is one of the most important aspects of our site.  Without it, the users won't know where to go to get to the correct information that we want them to be able to use.  We need to setup the Navigation so that we have a direct link to our Contact Management pages.  We can easily do this by pointing to the correct controller and view/controller method for responding to the "GET" request when clicking on the link in the navigation bar.  This video will show us getting our navigation bar cleaned up and ready for deployment.

Cleaning up common layout and login partial layout

This video is going to clean up a few of our layout and rendering issues.  The first thing we will do is cleanup the footer and review what we can clean up in the _Layout.cshtml common layout page.  Then we move to the _LoginPartial.cshtml view, which allows us to change how the login controls render.  We add a new css class for padRight8px and then use that to render our page so that login controls don't render right up to the right side of the screen.

Index Table Layout and Adding Scripts to our Views

In this video, we review the Index view.  We note that the index has a default model of a list of contacts.  This allows us to easily have a list of the contacts in our system and put them into a table.  We review how the table lists out each of the model properties for each of the contacts in the system.  Use the file for contact index display table to get the code for the page without having to type it all out by name.  By the end of the video it will be clear how the data is displayed on the view.

At the end of the video, we set up our scripts area to prepare us for the datatables script that we'll be using for filtering and sorting.  We set the script up wrong on purpose so that we can show how the rendering works.  In order to complete this correctly, we need to make sure to put all of our scripts into the render scripts section.  Now that we know about that and have our page wired up for scripting, we are ready for putting in the datatables script to make our data render nicely in datatables.

Adding DataTables to our Index View

In this video, we go over adding the script in place to render our data using DataTables.   We talk a bit about the id selector and how to reference that in JQuery with the "#" [hastag] identifier.  This allows our DataTables to target the correct table.  Then we talk about how to line up our DataTables script with columns on the table, and how to make the columns have default or adjusted widths. We look briefly at the rest of the settings for datatables and know that we can refer to the site documentation in the future to find out more information as needed.

The Create View

In this video, we fix up the Create View so that have the ability to create without showing the UserId to the users.  This is important to keep that information secret and also keep it available for the ability to store a contact in the database under their profile.  

As we go through the Create.cshtml, we talk a bit about razor syntax and the JQuery validation option that we had removed at the start of our course.

We then run the page and create a contact, verifying that the UserId is not shown and that we can create a contact and save it into the database.

We finish up by showing that we need to store the userid in a way that persists across some posts, in case of error or in the case when the view is re-rendered and we didn't put the userid into the ViewBag.  Once we do that, we get the page saved as expected.

JQueryUI for DatePicker

Now that we have our page looking a lot nicer and ready to go, it's time to talk about making a better UI experience for the users.  JQuery UI is a powerful tool that allows us to quickly add some pre-formatted controls to the page and use them to give our users a better experience.  In this video, we'll take the time to add in a simple date-picker control.  By doing this, the user will be able to easily select a date and have it render into the control for saving.  By doing this, the user won't have to type dates in any specific format on their own, and we'll also ensure that data coming in on the Post is formatted correctly as a date, so this is definitely a win-win for everyone.

The Edit View

So far we've fixed up the Create and Index.  It's time now to fix up the Edit page.  Here we need to remove the user id from display, and add the datepicker for the birthdate.  As mentioned in the video, a lot of this will be extremely similar to the create page, so we'll be practicing the same things one more time.

A more advanced user might want to take the time to look into a partial view.  There are a lot of similar elements here that exist in both Create and Edit, and it might be possible to put all the common stuff into a partial view and then use that partial view for the create and edit views to eliminate some duplicate html/razor code.  We won't be going to this level in our course, but it is something you might want to look into for the future.  Just remember - ANYtime you find your pages having a lot of repeated/similar layout, think about using a partial view.

The next part of this video shows how a URL hijacker might be able to get to data that we don't want them to see.  With that in mind, we add another code check in place to make sure that the user can only see valid contacts that exist for their own user id.  This is another critical piece that you should consider as a web developer, and you want to make sure to prevent users from hitting your pages in a way that might bring harm to your system or your other users.

In the final part of the video, I had made a mistake on the wiring up of the datepicker.  This is awesome because it allows you to see how I can quickly use the tools available to check if the code is working as expected, and when I eliminate all of that, I can then check my own code to see where I went wrong.  In this case, I put the needsDatePicker class in the wrong place, and once I move that to the correct place, our code works as expected.

The Delete and Details Views

In this video we will quickly fix up the Delete and Details page to handle the final security on the Delete operations and also making sure that the users can only see the details on a contact that is under their own user profile.

We talk a bit about how you could dress up the UI for these pages, but we won't be doing much of that in our course, and we'll leave that up to you to take it from here.  Of course we do want to make sure not to show the User Id on any of the views as we really don't want users to see that information.

Fixing Images for JQuery UI on AppHarbor Deploy

I had fixed up the website and was all excited about the final deploy to AppHarbor, and when I got there, I found out that the UI was not rendering the JQueryUI images as expected.  For some reason (I'm not really sure why), the image paths were expecting to be under a path called Content/images on AppHarbor.  A quick and dirty fix for this was to just create the path as expected and put the images in that folder, and then we can see they rendered correctly in the release on AppHarbor.

One other thing to consider is to make sure that when you put content in your project that needs to be deployed on the webserver, you should right-click on the files and select "Copy if Newer" or "Copy Always" to make sure the content will be available on the webserver to be rendered.  This is especially important for things like PDF documents or other content files that you want the user to be able to reference or download.


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

Updates, Fixes, and Cleanup

Clone The Repository

This lecture starts off our cleanup section by cloning the repository to a new folder.  This simulates what would happen if our hard drive crashed or if we were working on a team and multiple people need to build the project, or if we just got a new machine and needed to start fresh.

In this video, I show three different ways to clone the repository, using Visual Studio, Git GUI and Git Bash.

Update the Web.Config for Local connection strings and Fix the transformations

In most situations, we want to use an actual development database, not the built in LocalDb Files.  In this video, I go over setting my connection strings to point to the local SQL Express, starting with creating the database and then setting the connection strings.

It is important to note that in our current state, we won't be able to use this just yet.  A fix is coming in the next few lectures.

In addition to setting the connection strings to the local database, I also show how to correctly set the transformations to use the SetAttributes function and use the key or name locator, depending on which item we are replacing attributes for.  This fixes the issues where we had to manually remove a key before re-inserting on transformation.

Solving some Commit issues

Because our repository is not in an ideal state, we might get some issues where we can't commit our changes. 

I did create and switch to a branch here, and then ultimately had to close out Visual Studio and use the command line to commit the files.  Since all we really had to do was shut down the reference from visual studio, you could have done the commit via the GUI as well if you are more comfortable with that approach.

Fix Migrations and DB Configuration Conflicts

This is a major fix that we all need to do, but is not necessarily a fun one if we have a lot of stuff out in production.

Locally, our database is new so we won't have any issues doing what I do in this video.  When we go to push to production, however, we will need to do a couple of manual steps not shown here.  At that point, we'll likely have to point our web.config directly at the database and run the updates manually in order to actually get them to apply.

In this video, we cover what is wrong with the migrations and fix the namespace conflict, rename the Configuration so it is more useful, and then delete the migration for the initial that was there and add in two initial migrations - one for each db context configuration.

Check in changes - push to remote

In this video, we check in the changes we made to fix the db context configuration conflicts, and push to remote.

Remember that if you are pushing to master your application will likely rebuild and deploy to AppHarbor.  If you get an issue that it will not work based on your entity framework, you will need to point your local web.config at the AppHarbor database and run the updates manually.  Additionally, you may have to set the configuration to allow for data loss.

Cleaning up our GIT repository - part 1

In this video, we are starting to clean up our GIT repository.  This is also something every one of us should do.

We start by getting a .gitIgnore file created (if we would have added to source control on creation of the project that would have been done for us!).  Once we have the GIT Ignore file in place, we have to run some super advanced GIT commands.

First, we remove everything from the git cache so that anything that was tracked that should have been ignored would be removed from cache.

Then we will perform a clean on our physical directory.

Finally, in part 2, we'll finish up our cleaning operation and make sure everything still works.

Cleaning up the GIT Repository - part 2

In this video, we continue and finish the cleanup of our GIT repository.

Clean up your GIT repository
Merging branches when there are likely some problematic files

In this video, I show how the branch can be merged back in using a pull request.

With the fact that our branch no longer has all the bad files, switching between the two branches locally can get a bit hairy.  Therefore, I go through the operation, and ultimately perform the merge at BitBucket using a pull request.

Although I am going from one branch to another, you could easily go from a branch to master.

Setup Fetch with Prune - keep our remote refs clean

After deleting a branch at remote, nothing is automatically cleaned up locally with the branches.

In this video, I show how to easily turn on the "fetch with prune" option in visual studio that allows us to clean up all of our remote refs automatically whenever a fetch is executed.

We still have to manually delete the local branches we no longer want to track.

Set our application to run with HTTPS, and perform some updates

In this lecture, we set our application to run locally with HTTPS protocol so that we can easily connect to facebook locally and not have any issues with the authentication.  Remember that to do this on production would likely require a valid domain and ssl cert, running around at least $20/month.

Also remember that to run .Net 4.7.2+ you will likely need to make sure your visual studio is updated to the latest version.

Finally, because we reworked the layout, even if you update bootstrap and such, it will just restore that original layout which will make a mess, so I don't recommend updating bootstrap in this way.  In some ways I wish we would have left the original structure, but by moving it like we did we definitely get to see how the bundle config and such all play together nicely.  You could update all if you want, it shouldn't hurt anything.  IF you do, and if bootstrap 4 is applied, you may need to also update bootswatch.

Get Facebook Working

In this video, I simply update my facebook app to work more like a new app would work, with required HTTPS and the callback URL in place.

Once that is all set, we are able to run locally and authenticate with facebook as expected.

Completing Our Study

How can we make the site better?

This video talks briefly about a couple of things we can do to make the site better and touches on some web debugging tools.

As you create your own sites, you want to be able to dress-up or fix rendering on your pages.  We talk briefly as a review that the layout should be handled on the views, and the interaction between the views and the database should be handled using models and controller actions.

We then move into a little bit of web debugging using the built-in dev tools in Chrome.  We show how to override/change styles so that we can see where we would need to modify the css files to reset colors, fonts, and other layouts.  We also take a look at using the "toggle devices" so we can view what our site would look like as it is rendered on various devices with various orientations.

Next Steps

This video is a simple presentation on what we've covered throughout the course.   The presentation then goes on to talk about your next step for where you would like to go to learn concepts that are important.  Next steps will really depend on you and where you want to go.  Do you want to concentrate on the front-end?  Then perhaps just look into javascript, css, and js frameworks like Angular, and maybe a little WebAPI.  Do you want to do just backend development?  Then learn about database theory, how to set up and work with databases, and how to access them.  You can then think about things like WebAPI, EntityFramework, and WCF Services to get directly to your data.  If you want to be full stack, then for sure you'll want to start learning all of these things, and you can choose which way to lean first (web ui or database/server backend).

Finally, the lecture ends with a bit of discussion about how to actually learn technical topics and gives some solid strategies to go about learning anything in the technical field.

Course Wrap-Up

This video is just a brief wrap-up for our course.  I am grateful you chose to work through the material to this point and hope that you have found it useful and fun, and that taking this course has piqued your interest in becoming a more-advanced web-developer and/or has further enhanced your skills.  Hopefully, now that you've seen the MVC framework in action, you can see the power and benefit of using this framework for creating your next web application.  All the best to you!


The files attached at the end of each section will be my files as they were at the end of the section with some of the private information (passwords) and any Git references removed.  Please note that these files are really for reference only.  You should be building your own version of the site as you go to maximize your learning.

[DEPRECATED] Making sure we have MVC

This video just allows us to make sure we have the version of MVC we are looking to use for our course ready to go.

[DEPRECATED] Installing Visual Studio 2015 Community Edition

For our course, we'll be developing our project in Visual Studio Community 2015.  This is a completely free editor that allows us to do all of the main things that are needed to be done to create our projects in the .Net framework.  This video will show how to get the editor and install it on our machine.


Bonus Lecture - Links and Coupons for Other Courses

Hello Everyone –

Here is the link for the project I created throughout the course:

ContactWeb on AppHarbor [http://contactweb.apphb.com]

Here is the link for my main website, where you can always find the latest information from me:

My Websitehttp://www.majorguidancesolutions.com 

Courses at Major Guidance Solutions  [check out the great offer on the entire "GIT: From Beginner to Fearless" course]

Here are some links and coupons for other courses I offer at Udemy:

GIT Branching and Merging  ************* RELEASED 10/19/2017 ***************

Git Branching and Merging $10

GIT Advanced Commands:   ************* RELEASED 10/20/2017 ****************

GIT: Advanced Commands

Introduction to HTML:

Intro to Web Development: HTML for $10

Bootstrap UI For Everyone:

Bootstrap UI for Everyone for $10

Introduction to Java programming for online learners (this is NOT JavaScript!!!): 

Introduction to Programming in Java for $10

Introduction to Unit Testing in Java with J-Unit 4 (included already in the Intro to programming course):

Introduction to Unit Testing in Java - FREE ACCESS!!!!

I hope you have found our time together valuable and have enjoyed learning the material!


You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.3 out of 5
1756 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
30-Day Money-Back Guarantee


7 hours on-demand video
11 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion