Friday 1 January 2016

Hello World with MVC 6

In this post we will see how to write your first application using MVC 6 and Visual studio 2015.
We will go step by step.

First of all let us add simple MVC 6 project.

For that Open your Visual Studio 2015 and Create new project as shown below:
new-project-mvc6
and then select empty Asp.Net 5 preview.
new-project-select-empty-aspnet5-template

You can see the project structure like this:

aspnet5_beginning_demo_2

What is new in folder structure?
  • src folder – contains all projects that contain source code that make up your application.
  • global.json – this is where you put solution-level settings, and allows you to do project-to-project references.
  • wwwroot – is a folder in which all your static files will be placed. These are the assets that you web app will serve directly to the clients including HTML, CSS, Image and JavaScript files.
  • project.json – contains project settings
  • startup.cs – this is where you put your startup and configuration code.

But wait! Is it MVC?

No it is not.

Our next step is to configure the site to use MVC. This requires changes to the project.json file and Startup.cs file. First, open project.json and add “Microsoft.AspNet.Mvc” to the “dependencies” property:

So our project.json would be like this:
{
  "dependencies": {
       "Microsoft.AspNet.Mvc": "6.0.0-*",
       "Nowin.vNext": "1.0.0-*",
       "Kestrel": "1.0.0-*"
    },
  "commands": {
        "web": "Microsoft.AspNet.Hosting --server Nowin.vNext",
        "web-kestrel": "Microsoft.AspNet.Hosting --server Kestrel"
    }
}

Ok, so now it is Mvc project right?

Wait, we forgot to add configurations.

For that open Startup.cs and modify it as follows:

using System;
using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.Builder;
using Microsoft.Framework.DependencyInjection;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseServices(services =>
        {
             services.AddMvc();
        });

        app.Use(async (context, next) => 
        {
             Console.WriteLine(context.Request.Path);

             try
             {
                  await next();
             }
             catch(Exception ex)
             {
                   Console.WriteLine(ex);
             }
         });

       app.UseMvc();
      }
}

This code enables MVC and defines a route.

Voila! Yes now it is an Mvc Project.

Now let us add controlls and views.

Oh! Well we need to follow some steps to add controlers and views because we need to add simple class and make it a controller as below:
  • Add a Controllers folder
  • Add an MVC Controller called HomeController.cs class to the Controllers folder
  • Add a Views folder
  • Add Home folder in the Views folder
  • Add an Index.cshtml MVC View Page to the Views/Home folder.
The project structure should be as shown:
project-structure-controller-view

Now, Edit Index.cshtml as below:

<h1>Hello from Razor!!<h1>

And in HomeController:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Run the application – you should see Hello World output in your browser.

hello-world

Congratulations for your first MVC 6 project!


Stay tuned for more!