Hour 7: ASP.NET Core : Create A Responsive Layout With Bootstrap 4+

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.

Hour 6: ASP.NET Core : Add jQuery, Bootstrap, Using bower.json

In this blog post we are going to add the jQuery, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower.json file to configure the dependencies that you will need on the client-side using NPM in the backend.

Here are the steps to import the client-side dependencies into our project:

1. First let's add bower.json file of the "NorthwindCafe.Web" project, Right-click on the NorthwindCafe.Web project and add a file called bower.json in the project

2.  Open the bower.json file the markup should look like this

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
}

Hour 5: ASP.NET Core : Adding The Default View With _ViewStart.cshtml And Layout Page

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.

Hour 4: 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.

Hour 3: 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 "Configure" method type in the following to enable MVC

       
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();
            app.UseMvc();
        }

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();
        }

Hour 1: Create ASP.NET Core Project From Scratch

Technology has moved at a breakneck speed, after working with ASP.NET Core for a while, I realized that my ASP.NET MVC blog articles have become outdated.  Don't get me wrong, MVC is still a very big part of ASP.NET Core, but that's the thing it's just a part of it.  ASP.NET Core has decoupled the infrastructure from the application.  You can deploy your web app on Docker imagine that!  No longer is IIS your primary means of hosting your ASP.NET application.

However, with this new freedom comes added complexity.  No longer can you just drag and drop components into your design surface.  Those days are long gone.  This post ist meant to ease your way into ASP.NET Core.  I will using the release candidate version two of ASP.NET Core for this post and other subsequent posts.  I found out that I can't really follow my blog posts anymore to create the project with the latest version which is 2.1.  Don't use 2.2 for now because there's still not a lot of documentation on it.  So here is the updated version  I will be using Visual Studio 2017 for my development.  You can use the command line interface and notepad to develop your ASP.NET Core application.  But, I think that borders on insanity.