Hour 2: Enable ASP.NET Core to Serve Static Files

As I have mentioned before ASP.NET Core decouples the application from the infrastructure as much as possible.  Therefore, you have to tell it exactly what you want in your project.  In this blog post we are going to tell ASP.NET that we want to serve static html files in our application.

Here are the steps to serve static files in our ASP.NET Core application.

1.  Open the "NorthwindCafe.Web" project, then click on the "Startup.cs" file in the project.  You will see the following markup in the Configure method

        public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }

2.  Go into the Configure method, remove the existing code and type in the following code

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }

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

ASP.NET MVC; Get Rid Of The Port In The URL

If you have been following along with the ASP.NET MVC tutorials you would have noticed that the URLs have a port next to them.  In this post we are going to get rid of that annoying port have a just the URL as localhost/{mycustomroute}

ASP.NET MVC: Change Admin URL to More User Friendly URL With Routing

In the previous post we created a Admin Area, however we had to type in localhost/Admin/Home/Index to get to the Admin index page.  In this post we are going to make the Index page more user friendly.

To do that first let's assign the namespace to a local variable so that we can use it in multiple routes.

Open the "AdminAreaRegistration.cs" file in the /Areas/Admin folder and change the RegisterArea method to the following:

        public override void RegisterArea(AreaRegistrationContext context) 
        {
            var namespaces = new string[] { typeof(NorthwindCafe.Areas.Admin.Controllers.HomeController).Namespace };

            context.MapRoute(
                "Admin_default",
                "Admin/{controller}/{action}/{id}",
                new { action = "Index", id = UrlParameter.Optional },
                namespaces 
            );
        }

ASP.NET MVC: Add Area For Administrators

An ASP.NET MVC can get big, and it could be overwhelming.  Areas are a way to break up the application into smaller segments,  A perfect candidate for an Area is the Administrative features of the site because it has multiple pages, and functionalities.  So it is a good idea to segment off the Administration area to its own area (no pun intended).

ASP.NET MVC : Adding Font-Awesome For Northwind Cafe Navigation Icons

In this tutorial we will add icons to your navbar.  In the previous tutorial we added a responsive layout with bootstrap.  In this post we will add some icons to your navigation.  Font-Awesome gives you professional looking vector graphics, which are implemented using CSS.  Bootstrap 4 uses Font-Awesome as it's icons. Glyphaicons will goes away. So we might as start using it.

ASP.NET Core : Add Tag Helpers To NorthwindCafe Application

In this post we will add Tag Helpers support for our application.  Tag Helpers are programmable attributes that you can use throughout the application.

Follow the steps below to enable tag helpers:

1.  Right-click on the "Views" folder and create a "View Imports" file

ASP.NET Core: Add Logging To The NorthwindCafe Application

Logging is a good service to add as the application gets more complicated.  It will allow us to see what the error is when things goes wrong.

To add logging to our ASP.NET Core application follow the steps below:

1.  Open the Startup.cs file and add the logging service to the ConfigureServices method with the line

services.AddLogging();

So your ConfigureServices method should look like the following

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            var connectionString = Startup.Configuration["Data:NorthwindContextConnection"];
            services.AddDbContext(options => options.UseSqlServer(connectionString));

            services.AddLogging();
        }

ASP.NET Core: Seeding The NorwindCafe Database

In the previous blog we created the NorthwindCafe database with Entity Framework Core.  Now we are going to seed the database so that we can work with the data.

Here are the steps to seed the NorthwindCafe database:

1.  Create a file call DBInitializer in the NorthwindCafe.Web folder, in the file type in the following code

using System.Linq;

namespace NorthwindCafe.Web.Models
{
    public class DbInitializer
    {
        public static void Initialize(NorthwindContext context)
        {
            context.Database.EnsureCreated();

            if(context.Categories.Any())
            {
                return;
            }

            var categories = new Category[]
            {
               new Category {Name = "Coffee", Description="Coffee", Products = new Product[] { new Product { Name = "Dark Roast", Description = "Dark Roast", Price = 2.0M } } },
               new Category {Name = "Tea", Description="Tea", Products = new Product[] { new Product { Name = "Chai", Description = "Chai", Price = 1.5M } } },
               new Category {Name = "Pastry", Description="Pastry", Products = new Product[] { new Product { Name = "Cupcake", Description = "Cupcake", Price = 1.25M } } },
               new Category {Name = "Food", Description = "Food", Products = new Product[] { new Product  { Name = "Hamburger", Description = "Hamburger", Price = 5.0M } } }
            };

            foreach (var c in categories)
            {
                context.Categories.Add(c);

            }

            context.SaveChanges();
        }
    }
}

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 Core : Configure project.json File To Support Entity Framework Core

In the previous post we created the DbContext for the Northwind Cafe application.  In this post we will configure the project.json file to support Entity Framework Core.

Here are the steps:

1.  Open the project.json file

ASP.NET Core : Create The NothwindContext ( EntityFrameworkCore )

In our previous post we created the models for our Northwind Cafe application.  In this blog we will create the DbContext class which is the conduit between your entity classes and the database.  Think of it as a bridge that the database and the entity framework has to cross to get to each other.

Follow the steps below to create the NorthwindContext:

1. Create a class in Models folder call NorthwindContext

ASP.NET Core : Entity Framework Core Models For Northwind Cafe

In the previous post we added a configuration file call appSettings.json file to store our connection string to the database that we are going to create through Entity Framework.  Even though Microsoft provides us with the Northwind database, we don't really want to use it because it's outdated.  We care going to modernize the database by rebuilding it from scratch with the code first approach with Entity Framework Core.  If you look at the existing Northwind database you will see that there's a lot of redundant data and tables.  For example there are tables for Customers, Employees, Suppliers and Shippers.  Those are basically roles, and we will take care of those roles later on in the series using the Identity framework.  What we are going to do is start out simple with just the Products, Categories, Orders, OrderDetails table and add on to those tables as we progress in building the application.

ASP.NET Core : Add appSettings.json Configuration Files With Microsoft.Extensions.Configuration Library

Now that we have most of our static contents taken care of for our application, meaning we did everything we could without a database.  It's time to create our database.  But before we can do that we need a place to store our connection string to the database.  Usually we just store the connection string in the web.config file in our web application.  However, since ASP.NET Core is trying to break free from the old way of doing things, there's a new way to store configuration information which is more flexible the old web.config way.  As usual it also requires more work.

ASP.NET Core : Adding Font-Awesome For Northwind Cafe Navigation Icons

In this tutorial we will add icons to your navbar.  In the previous tutorial we added a responsive layout with bootstrap.  In this post we will add some icons to your navigation.  Font-Awesome gives you professional looking vector graphics, which are implemented using CSS.  Bootstrap will use Font-Awesome as it's icons starting version 4.0 and beyond. Glyphaicons will go away. So we might as start using it, in anticipation of Bootstrap 4.0.

ASP.NET Core : 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 Core : Adding The Default View With _ViewStart.cshtml

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.

ASP.NET Core : Create Our First Controller and View

In the previous post we have enabled MVC on our application.  Now we want to add our first MVC controller and view to test out verify that MVC is working.  We also have to tell ASP.NET Core what pattern to look for when looking for our controllers and views.

Enable MVC On ASP.NET Core Application

In this post we will go over the process of enabling ASP.NET MVC in our application.  Just like static files, in order for us to use MVC in our application we have to tell ASP.NET Core to use Mvc in the Startup.cs file.  We will continue to use the application "NorthwindCafe" that we used in our previous blog.

Here are the steps to add MVC to your application:

1.  Open the Startup.cs file, then in "ConfigureServices" method type in the following to enable MVC

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

Enable ASP.NET Core to Serve Static Files

As I have mentioned before ASP.NET Core decouples the application from the infrastructure as much as possible.  Therefore, you have to tell it exactly what you want in your project.  In this blog post we are going to tell ASP.NET that we want to serve static html files in our application.

Here are the steps to serve static files in our ASP.NET Core application.

1.  Open the "NorthwindCafe.Web" project, then click on the "Startup.cs" file in the project.  You will see the following markup in the Configure method

        public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }

2.  Go into the Configure method, remove the existing code and type in the following code

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
        }