Jan
8
2015

Creating an ASP.NET 5 Empty Application

This blog post is part of a series covering ASP.NET 5  To follow along, this post requires installing Visual Studio 2015 (currently in preview).

To accelerate the learning process for ASP.NET 5 (aka ASP.NET vNext), this post will cover:

  • Creating the project
  • Examining the project
  • Modifying the project
  • Running the project

The goal of these topics is not only to show “how-to”, but to answer the “what is that…” and “why is that” as well.  It is written as if you are following along in Visual Studio 2015 (tutorial style), yet with enough supplemental detail to simply read (article style). Although not an exhaustive dive into each area, it should provide enough context to quickly get started with ASP.NET 5.

Creating the project

To create a new ASP.NET 5 application, it is necessary to think in terms of projects, not web sites.  The Web Site… option as seen below is still supported in Visual Studio 2015 to support legacy site development.  The specific “ASP.NET vNext” features require the Project… option. With this in mind, in Visual Studio 2015 select from the top menu bar: File --> New --> Project...

image

After selecting Project…, a new project dialogue box appears.  On the left side of the box, select the Web option under the language of preference (Visual C# used below).  From there, select ASP.NET Web Application and choose the solution/project name and file location.  This post will use ASPNET5 as the solution name, and ASPNET5Blank as the project name.

image
ASP.NET 5 Class Library and Console Application project templates will be covered in an upcoming blog post

Another dialogue box will appear to fine tune the type of web project desired.  Choose the ASP.NET 5 Empty template as seen below.  Although you may see other options, proceed forward with default values (items remain unchecked).
image

Examining the project

Once the project has loaded in Visual Studio, Solution Explorer will reveal the following:

image

The project corresponds to the following file/folder structure:
image

The following is a brief explanation of the projects file/folder contents:

Project_Readme.html HTML help file (not required to be in project, can be discarded)
*.kproj File for managing ASP.NET 5 projects in Visual Studio
*.kproj.user File for managing project user options in Visual Studio
   
wwwroot Folder of static files served to client. No code or ‘razor’ goes here
project.json File for managing project settings
Startup.cs File for startup and configuration code

The first three items above are there for the benefit of the developer (help file) and Visual Studio (*.kproj.* files).  The latter three are needed for development.

Let’s take a look at the initial contents of the project.json file:

{
    "webroot": "wwwroot",
    "version": "1.0.0-*",
    "exclude": [
        "wwwroot"
    ],
    "packExclude": [
        "**.kproj",
        "**.user",
        "**.vspscc"
    ],
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0.0-beta1"
    },
    "frameworks" : {
        "aspnet50" : { },
        "aspnetcore50" : { }
    }
}

As can be seen above, the file contains name/value pairs (see schema at GitHub).  This new approach to managing web configurations (notice no web.config) enables simplified dependency management.  Instead of adding assembly references, you now add NuGet packages as dependencies.  How is this better?  Instead of hard-coupling a reference to an assembly, you can now simply add the dependency by just typing it into the file above.

The contents of the Startup.cs file are as follows:

using System;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;

namespace ASPNET5Blank
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
            // In empty template, no code is here...
        }
    }
}

The Configure method of the Startup class is automatically called at runtime. The IApplicationBuilder instance (with parameter name app highlighted above) provides methods to configure the app and to access the HTTP request.  An example of the UseWelcomePage method is used in the article Create a Web API in MVC 6.  However, when I attempt to access this method in my project, I do not see it:

image

The only method displayed is Use.  In the next topic, the project will be modified to enable the use of other methods off of the IApplicationBuilder instance passed in. 

Modifying the Project

In Visual Studio, open the project.json file. We are going to add a dependency to the Microsoft.AspNet.Diagnostics package which is needed to get access to the UseWelcomePage method. Under dependencies, the name of the package is provided paired with the version.  It must be typed accurately.  However, when doing so in Visual Studio, we get discovery and auto-completion via IntelliSense!

image

In the above screen capture, I started adding the Microsoft.AspNet.Diagnostics package.  When ready to add the corresponding value for version, IntelliSense came to the rescue again!

image

After saving the project.json file, the output window in Visual Studio reveals what happened:

image

The Microsoft.AspNet.Diagnostics package was installed along with its dependencies.  Did this modify the project.json file to show the two new packages?  No.  And that is good news.  Why?  There is no need to clutter the file with hierarchies of dependencies.  When a new package is referenced, the dependencies (and their dependencies) are automatically added.  When removed, all dependencies are removed too!

Returning to the Startup.cs file, when I now attempt to access the UseWelcomePage method, it exists!

image

The Configure method is now updated to look as follows:

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

What will this do?  Let’s find out!

Running the Project

By default, the project will be deployed to IIS Express for testing.  The classic Debug menu options still work here:

visual studio debugging options

When selecting either Start Debugging [F5] or Start Without Debugging [Ctrl+F5], the app will run showing the welcome screen as seen here:

usewelcomepage screen

Summary

This post examined the very essentials of an ASP.NET 5 application. In addition to learning how to create, modify, and run an app, we poked around with the initial files and learned how cool dependencies are managed in the project.json file. 

Be sure to check the series covering ASP.NET 5 for new and updated topics!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
3
2015

Install Visual Studio 2015

This blog post is part of a series covering ASP.NET 5

The following is a step-by-step guide to installing Visual Studio 2015 (currently in Preview).

  1. Download Visual Studio 2015 Preview
  2. Execute the file when the download is complete.  You will be prompted with a screen similar to what is shown next:image
  3. Select the options relevant to your development needs.  Although all options are checked in the screen capture below, the highlighted items below are essential for web development:image
  4. After clicking the Install button, the application will start to acquire files and perform the install:
    image
  5. If you previously selected Visual C++ Cross Platform Mobile Development or Tools for Apache Cordova, you will see the following:
    image
    This enables features as seen below:
    image
    After clicking Install, you will see a secondary installer to enable the desirable third-party features:
    image
    The secondary installer will confirm selected features:
    image
    The installation will continue with acquiring needed files and applying:
    image
  6. Once Visual Studio 2015 is installed, you will need to sign in with your Microsoft account:image

Visual Studio 2015 is now installed and ready!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
2
2015

ASP.NET 5

A collection of posts, articles, videos, and resources to learn ASP.NET 5

Overview, Concepts, & Resources

ASP.NET 5 How-Tos

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
27
2014

Sharing a TouchDevelop App

Making an app has never been easier.  Just visit TouchDevelop and try yourself!  After creating an app, you will likely want to get feedback and share it with others.  Although the publishing process offers a way to share the app, here is what to do if you want to share it later.

1) Sign in to TouchDevelop

2) Locate the app you created under “my scripts” and select it

image

3) Select the “share” option

image

4) Use the URL provided however you wish Smile

image

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
12
2014

Universal Windows Apps with Angular

Starting with Visual Studio 2013 (with update 2), developers can create an app with a single solution to target multiple devices such as PCs, tablets, or phones.  This type of solution can generate universal Windows apps.  These can be written with C#, C++, or JavaScript. For video training on the topic, please check out the free course at the Microsoft Virtual Academy.

If written with JavaScript, web developers who use Angular will be happy to know you can continue to do so while making apps.

For a jumpstart on the development process, I have created a starter solution with a bare-bones shell that properly sets up Angular for use in the project.  The starter solution is named AngularVS (Angular for Visual Studio) and is available publicly at github.

A key factor for Angular to work properly in these types of apps is the use of the the ng-csp directive as seen below.  Not only will this enable Angular to work smoothly, if declared before other popular libraries|frameworks such as jQuery, it helps enable them safely too!

ngcsp

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
26
2014

IsPrime Function in JavaScript

The following code sample illustrates how to use JavaScript to determine if a number provided is a prime number or not. In this example, the number is hardcoded in the JavaScript. You can edit this and experiment with other values at the isPrime at CodePen

var theNumber = 22;
var primeResult = isPrime(theNumber);
document.write("<hr />" + primeResult);

function isPrime(n) {

  var s = [2,3,5,7];
  var ld = [1,3,7,9]; 
  var divs = [];

  if (n==1) {return false;}
  if (s.indexOf(n) > -1) {return true;}
  
  if (ld.indexOf(n%10) > -1) {
     divs = getDivisibles(n);
     document.writeln(divs);
  } else {
    return false;
  }
  
  return (divs.length == 0);
  
}// isPrime

function getDivisibles(n) {
  var i = 2;
  var divs = [];
  while (i*i<=n) {
      if (n%i==0) {
        var upper = n/i;
        divs.push(i);
        if (upper>i) {divs.push(upper);}
      }
      i++;
  }// while
  divs.sort(function(x,y){return x-y;});
  return divs;
}// getDivisibles

See the Pen isPrime by J Michael Palermo IV (@palermo4) on CodePen.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
26
2014

Demo jQuery Selectors

The demo below shows how to find a count of elements using different jQuery selectors. To modify the expressions yourself, feel free to make edits at the jQuery selectors demo at CodePen


$(document).ready(function () {
  // start the results of methods below with this:
  writeLine("Selectors<hr />");

  // count of all elements
  writeSelectorLength("*");

  // count of elements in body
  writeSelectorLength("body *");

  // count of all divs and p tags
  writeSelectorLength("div,p");

  // count of all p tags direct children of divs
  writeSelectorLength("div > p"); 

  // count of all li tags
  writeSelectorLength("li"); 
});

// helper method to write content at specific location in page
function writeLine(anyHtml) {    
    var output = $("#output");
    var currentOutputContent = output.html();
    output.html(currentOutputContent += anyHtml + "<br />");
}
// helper method to write results of getSelectorLength
function writeSelectorLength(anySelector) {
    writeLine(getSelectorLength(anySelector));
}
// helper methos wrapping results of query in a span
function getSelectorLength(anySelector) {
    return anySelector + 
        "<span class='smaller'> has </span>" + 
        $(anySelector).length + 
        " <span class='smaller'>matches</span>";
}

See the Pen MVA140826-jQuery by J Michael Palermo IV (@palermo4) on CodePen.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).