Hour 13 ASP.NET Core : Add NorthwindContext To Startup Class And Create Database

In this post will are going to finally create the database that we have been preparing for in the last previous blog posts.  It's a two step process, first you have to add the NorthwindContext to the application in the Startup class, then you have to run the Entity Framework migration tool.

Here are the steps to create your NorthwindCafe database:

1.  Open the Startup.cs file, then type the following lines in the ConfigureServices method

 
            var connectionString = Configuration["Data:NorthwindContextConnection"];

            services.AddDbContext<NorthwindContext>(options => options.UseSqlServer(connectionString));

The line above gets the connection string from the appSettings.json file that we've created earlier. Then use the AddDbContext method in the services instance.  Dependency injection will take care of the plumbing for you.  Using lamba expression we tell the Entity Framework to use the Sql Sever provider for Entity Framework core.

Make sure you have the following namespaces in your Startup class

using NorthwindCafe.Web.Models;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.EntityFrameworkCore;

ASP.NET MVC : Installing and Setting Up Ninject For Dependency Injection

In this post we are going to install Ninject which is a lightweight IOC container.  You can think of an IOC container as a magic toolbox that gives you the tools that you need when you need it.  Hence its called dependency injection, meaning it injects the dependencies that you need.  As with any IOC container there needs to be a mapping between the interfaces and the implementation.  That's where Ninject comes in.

First let's install Ninject with Nuget. here are the steps:

1. Open the Nuget Management Console and type in the following command

Install-Package Ninject -Version 3.2.2
Install-Package Ninject.Web.Common -Version 3.2.2
Install-Package Ninject.Mvc3 -Version  3.2.1

End-to-End ASP.NET MVC : Create an ASP.NET MVC Empty Project

A lot of people think that you can only create one kind of ASP.NET MVC  project, the one with the sample application.  But the reality is that you can create an Empty ASP.NET MVC, you just need to do more work.  However, it is cleaner and you can add what you need, instead of having everything in place already like the default template.  So you might run into more errors with the empty project, but I think you will learn more about MVC than if you just have the default template.  Plus it's more streamline.  I always start with an empty project on my MVC projects.  In order to follow this tutorial you must have Visual Studio 2017 installed.

ASP.NET MVC 5 From Scratch : Add KnockoutJs to Project With NuGet

In this blog we will add the KnockoutJs JavaScript library to our MvcApp project.  KnockoutJs is a great lightweight data binding library.  Follow the steps below to add KnockoutJs to your ASP.NET MVC project.

Step-By-Step Instructions:

1.  Right-click on the project's "References" node, then select "Manage NuGet Packages"

End-to-End ASP.NET MVC 5 : Create Entity Data Model With Entity Framework

In our previous blogs we've created an ASP.NET MVC from scratch.  In this blog we are going to use Entity Framework as the ORM (Object Relational Mapping) as a conduit to our database, so that we can query our data as an object.  An ORM as the name implies maps database tables, views, and stored procedures as objects in a programming language so that developers can work with the data as objects.

Step-by-Step Instructions:

1.  First we need to add the Entity Framework 6.1.3 to our ASP.NET MVC, we accomplish by right-click on "References" then select "Manage NuGet Packages"

End-to-End ASP.NET MVC: Adding BundleConfig

In our previous blog we've added a _ViewStart.cshtml layout to our project, which is the default layout for our pages if no layout is specified for the page.  In this blog we will add BundleConfig for the JavaScript libraries which includes JQuery, and Bootstrap that we've added to our NorthwindCafe project in the previous blogs.  A configuration bundle allows you to group files that belongs in the same libraries together so that they can called with just one line of code.  In this blog we will be creating configuration bundles for JQuery, and Bootstrap to the NorthwindCafe project.

Step-By-Step Instructions:

1.  Right-click on the folder "App_Start", then select Add → New Item → Visual C# → Class, name the class BundleConfig.cs

End-to-End ASP.NET MVC : Add JQuery Library Using NuGet

In the previous blog we've created an empty ASP.NET MVC  project.  It's a great starting point but, it's missing a lot things that we will need later.  In this blog we will add JQuery to the empty ASP.NET MVC  project that we've just created.

Step-By-Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-to-End ASP.NET MVC: _ViewStart.cshtml The Default Layout

In ASP.NET MVC there is a default layout file that the application use when one exists.  If you look at the markup at the top of the "Index.cshtml" file you will see that there is a markup to specify the layout of the page in the code below.

End-toEnd ASP.NET MVC : Add JQuery UI Library Using NuGet

In the previous blog we've added the Bootstrap library to our empty ASP.NET MVC project.  Now let's add another commonly used JQuery library to our project.  In this blog we will add the JQuery UI library to our empty project.

Step-By-Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-to-End ASP.NET MVC : Add Bootstrap Library Using NuGet

In the previous blog we've created added the JQuery library to an empty ASP.NET MVC project. In this blog we will add the Bootstrap to the empty ASP.NET MVC project that we've just created.

Step by Step Instructions:

1. Open the empty ASP.NET MVC project that you've just created

2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages"

End-to-End ASP.NET MVC : Configure The BundleConfig Class To Use CDN

A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project.  That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder.  In the previous blog we went over how to create the BundleConfig class from scratch.  In this blog we will go over how to configure MVC to use the cdn resource instead of your local resource files.

Step-By-Step Instructions:

1.  Open the NorthwindCafe project
2.  Open the BundleConfig.cs file under the folder App_Start

End-to-End ASP.NET MVC 5 : Using Conditional Comments to Support Older Versions Of IE

Older versions of IE have problems supporting the newer JavaScript libraries and HTML5 tags.  In the previous blog we've created responsive layout in ASP.NET MVC.  In this blog we are going to use conditional comments to support older versions of Internet Explorer (IE).  Since IE 9 seems to be the cutoff point we will use it in our conditional comment base condition to decide whether we want to do something different to support IE.  We will be working with the MvcApp project.

Step-By-Step Instructions:

1.  Open the MvcApp application
2.  Open the _Layout.cshtml
3.  Inside the <head> tag

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <![endif]-->

End-to-End ASP.NET MVC: Create A Responsive Layout With Bootstrap

In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple.  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size.  The previous layout looks like screenshot below.

ASP.NET MVC : Upgrade ASP.NET MVC 4 to ASP.NET MVC 5 Using NuGet Part 2

In the previous blog we went over how to create a simple ASP.NET MVC 4 application.  In this blog we will go over the steps to upgrade our ASP.NET MVC 4 application to ASP.NET MVC 5 application.

Step-By-Step Instructions:

1. Open the "MyMVC4" project that you've created on the last blog
2. Right click on the project and select "Manage NuGet Packages..."

ASP.NET MVC : Upgrade ASP.NET MVC 4 to ASP.NET MVC 5 Using NuGet Part 1

In this blog we will go over how to upgrade your existing project which uses ASP.NET MVC 4 to ASP.NET MVC 5 using NuGet.  During the upgrade you will encounter some errors but they are easy enough to fix by changing the Web.Config file.  In the first blog we will create a simple ASP.NET MVC 4 application from scratch.

But first thing is first let's begin by creating a project in ASP.NET MVC 4:

1. Create a blank solution in Visual Studio call "MVCProjects"