ASP.NET Core MVC New Project Tour

Update

This article was updated to include changes from 6.0.0-rc1

ASP.NET Core MVC is formerly MVC 6. In ASP.NET Core, MVC will be a middle-ware component of ASP.NET Core and is no longer identified as a separate framework. The version number of MVC will also change to 1.x in subsequent releases.

ASP.NET Core MVC (formerly MVC 6) is a ground up rewrite of the popular .NET web platform. Sweeping changes were made throughout, with even some of the most basic elements being reorganized. These changes are immediately apparent when starting a new ASP.NET Core MVC project, especially to developers familiar with previous versions of the framework.

Let’s hit “file new project” and take a tour of the new ASP.NET Core MVC project template. We’ll look at what’s missing from MVC5, what we can expect to stay the same, and what’s new.

file-new-mvc6-project

What’s missing

Before beginning work on a new project it’s important to understand where some familiar items have gone. Considering that ASP.NET Core MVC is a complete rewrite, some changes should be expected, however there are some key players missing that might come as a surprise.

All items in this list that have a replacement counterpart will be explained in detail under the “What’s new” section.

  • App_Start – The App_Start folder previously contained various startup processes and settings such as configuration, identity, and routing. These items have been replaced by the Startup.cs class which is now responsible for all app startup tasks.
  • App_data – The App_data folder once held application data such as local database files and log files. The folder isn’t included in this release but it can be added back and used. If you choose to use the app_data folder, proceed with caution so as to not make files publicly available by accident. (See: App_Data directory in ASP.NET5 MVC6 on Stack Overflow for details)
  • Global.ASAX – The Global.ASAX is no longer needed since it was yet another place for startup routines. Instead all startup functionality has been placed in Startup.cs.
  • Web.Config – It may come as a surprise that the root Web.Config file is gone from MVC. The Web.Config was once the XML equivalent to a settings junk drawer, now all application settings are found in config.json. Note: A Web.Config can still be found in MVC for configuring static application resources.
  • Scripts – The scripts directory used to house the application’s JavaScript files has been given a new home. All JavaScript files now reside under wwwroot/js as a static resource.
  • Content – Much like the aforementioned Scripts folder, static site resources can be found under wwwroot.

What’s the same, well mostly

Very few things remain unchanged in the ASP.NET Core MVC project template. In fact the only three items that really stayed the same are the fundamental components of the MVC pattern itself: Models, Views and Controllers.

  • Models – The models folder remains with a minor change. The Models folder will now contain data Models only.
  • Views – Views in ASP.NET Core MVC are as they were in previous versions, they are dynamic HTML (or .cshtml) rendered on the server before being sent to the client. Views contain the application UI and are by default built with Bootstrap. One new addition to the views folder is the _ViewImports.cshtml. The _ViewImports file provides namespaces which can be used by all other views. In previous MVC projects, this functionality was the responsibility of the web.config file in the Views folder. However, the web.config no longer exists and global namespaces are now provided by _ViewImports.
  • ViewModels – The ViewModels folder was added to differentiate between models used for data and models used specifically for View data. This addition helps promote separation of concerns within the application.
  • Controllers – In ASP.NET Core MVC the controllers folder retains its responsibility to hold application controllers. Controllers were commonly used to return views, but can serve as Web API endpoints now that Web API and MVC have merged. In ASP.NET Core MVC, both MVC controllers and Web API controllers use the same routes and Controller base class.

What’s new

At first glance, it’s apparent that there’s a lot of new parts to an MVC project. From the root folder down there are many new files and folders that come with all new conventions. Let’s explore the new items and understand their purpose in the project.

file-new-mvc6-template

  • src – The absolute root folder of the project is the src (source) folder. This folder is used to identify the source code of the project. It was added in this version of .NET to match a convention commonly found in open source projects, including many popular ones on GitHub.
  • wwwroot – The wwwroot folder is used by the host to serve static resources. Sub-folders include js (JavaScript), CSS, Images and lib. The lib folder contains third party JavaScript libraries that were added via the Bower package manager.

wwwroot

  • Dependencies – More package management options are available in ASP.NET Core MVC. Bower and NPM support has been added in this version. Configuration for both Bower and NPM can be managed via the GUI here. Additionally, configuration can be managed by their respective .json files found in the root src folder.

dependencies-2

  • Migrations – ASP.NET Core MVC ships with Entity Framework 7 (EF7) which no longer supports EDMX database modeling. Because EF7 is focused on code first, the migrations folder is where you’ll find database creation, initialization, and migration code.
  • Services – Services are at the forefront of ASP.NET Core MVC. Since ASP.NET Core MVC was built with dependency injection at it’s core, services can easily be instantiated by the framework and used throughout the application. (see: Dependency injection in ASP.NET Core MVC for more information)
  • bower.json & package.json – (hidden by default) To support “all things web,” ASP.NET Core MVC has added first class support for Bower and NPM. These popular package management systems were born from the web and open source development communities. Bower hosts popular packages like Bootstrap while NPM brings in dependencies like Gulp. The bower.json and package.json files are used to register and install Bower and NPM packages with full Intellisense support.

bower

  • gulpfile.js – Gulp is another tool built “for the web, by the web.” It is given first class support in ASP.NET Core MVC. Gulp is a Node.js-based task runner that has many plug-ins available from NPM. There are packages for compiling, minifying and bundling CSS. There are also packages for .NET developers for invoking MSBuild, NuGet, NUnit and more. gulpfile.js is where Gulp tasks are defined for the application.
  • hosting.ini – ASP.NET 5 is designed with a pluggable server layer, removing the hard dependency on IIS. The hosting.ini file is mainly used for configuring WebListener for hosting without IIS & IIS Express.
  • project.json – The project.json file is used to describe the application and its .NET dependencies. Unlike prior versions of MVC, .NET dependencies for your application can be added and removed using the project.json file. These dependencies are resolved through NuGet and full Intellisense is enabled within the file. This means that you can begin typing the desired NuGet package name and suggestions will appear on-the-fly. Cross platform compilation and build scripts are also configured here.

project

  • startup.cs – In previous versions, MVC application startup was handled in App_Start and Global.asax. With ASP.NET 5, startup is handled in Startup.cs. The Startup method is the first method in the application to run and is only run once. During startup the application’s configuration is read, dependencies are resolved and injected, and routes are created.

Wrapping up

The ASP.NET Core MVC project template embraces the web in many ways. From the root folder and below, most of the project structure has changed to align with the ever changing web. The inclusion of NPM and Bower in addition to NuGet provide developers with a wide range of options for bringing modular components to their application. The standardization on the JSON format for configuration further aligns with web methodologies. While many things have changed in the project template, the core MVC components have remained.

“File new project” may be a bit intimidating at first, but knowing where to find each piece and its purpose will give you a head start.

Header image courtesy of macknz.smith

Comments

  • Waldemar Pross

    Very nice, thanks for sharing!