Tech Junkie Blog - Real World Tutorials, Happy Coding!: July 2016

Friday, July 29, 2016

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.

Friday, July 22, 2016

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.

@{
    Layout = null;
}

The code above tells ASP.NET MVC to not assign any layout to the page because it is being set to null. In this blog we will build on our existing NorthwindCafe.Web  project and add a default layout view to the project so that each page in the project will have a common layout.  This is similar what you would a master page for in web forms.

Monday, July 18, 2016

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.


Sunday, July 17, 2016

In the previous blog post we created an empty Blogger template with just the bar minimums.  In this post we are going to build on that and display our posts in just 32 lines of code. In your template type in the following code.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*]]></b:skin>
  </head>
  <body>
          <b:section class='main' id='main' name='Main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
              <b:includable id='post' var='post'>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
 <data:post.body/>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
</b:includable>
            </b:widget>
          </b:section>
      <b:section id='side-bar-left'/>
</body>
</html>

It could be frustrating to edit your blogger template with the overwhelming size of the code.  Talk about a single page application, not in a good way.  There are thousands of lines of code in the blogger Template. The tag help site is not very helpful Blogger Help. In this blog series we are going to edit the Blogger template the from scratch using the least amount of code possible and then use bootstrap to do the styling once we get the bare bones elements in place.  The first step is to get start with the least amount of code possible then start from there.  So I have a boilerplate for the least you can have for a Blogger template below.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*]]></b:skin>
  </head>
  <body>
    <b:section id='main'/>
      <b:section id='side-bar-left'/>
</body>
</html>

Friday, July 15, 2016

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

Thursday, July 14, 2016

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

Wednesday, July 13, 2016

In this blog post we are going to add the jQuery, AngularJS, 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 to configure the dependencies that you will need on the client-side.

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

1. First let's make bower.json part of the "NorthwindCafe.Web" project, click on the "Show All Files" icon in solution explorer, then right click on the bower.json file, and then choose "Show in Solution Explorer"

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

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

Tuesday, July 12, 2016

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.  Don't be surprise if I update the version midstream because the product is still pre-release.  I will be using Visual Studio 2015 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.

Search This Blog