In our previous post we have overview .NET Core 1.0 with initial files that included by default in .Net Core 1.0 empty template. In this post we are goin to add MVC to our empty application.

As we know .NET Core 1.0 is unified, MVC & WEB Api become one which inherit from same base class. Let’s add MVC service to our application.

MVC 6

According to our previous discussion open/create .NET Core empty project & let’s modify project.json file for enable MVC 6 feature in our sample application.

Click save & it will autometically start restoring the packages to the application.

 

 Request Pipeline & Services

Now let’s add MVC(midleware) to request pipeline. In statrup class we need to modify to inject our added services.

Let’s add MVC(middleware) in Config section in startup class.

In ConfigureServices method we need to add framework service. For MVC we have added services.AddMvc();

 MVC Folder Structure: 

Let’s add MVC folder structure to our sample application.

In those folder we have added view files in views folder & MVC controller in Controllers folder like old MVC application.

Here you may notice that there is a new file in views folder “_ViewImports.cshtml”, this file is nothing but responsible for setting up namespaces that can be accessed by the views in your MVC 6 project, which was previously done by the web.config file in the views folder.

We are almost done. Let’s modify our view content with welcome message.

Now run the application, as you can see welcome message is appear in home page.

Client-side Dependencies

Bower & NPM is package manager, GULP is task runner.

1. Bower manage clientend dependencies
2. Bower manage libraries like jQuery, AngularJS.
3. NPM install modules like minifiers
4. NPM manage the entire dependencies where bower not.

It’s better to use NPM over Bower.

Bower: Right click on project Add > New Item > Client-side then select Bower Configuration file then click add.

The initial view will look like below image. In dependencies we will specify our required dependency with version.

This is bower config file that contain the path that bower going to use to put the download packages.

Here we have installed bootstrap package.

The installed package is placed in wwwroot\lib\ bootstrap folder.

As you can see the package in solution explorer.

Reference: Open _layout.cshtml file to reference bootstrap from lib folder.

Here we have reference jquery &  bootstrap in our layout page.

NPM-Angular2: Let’s add angular2 with Node Package Manager. Right click on project Add > New Item > Client-side then select npm Configuration file then click add.

In npm Configuration file let’s add dependencies & save changes.

As you can see in solution explorer Angular2 is installed.

Now it’s time to get a task runner, in our next step we have explain that how to use Gulp.

GULP: Right click on project Add > New Item > Client-side then select Gulp Configuration file then click add.

 

Here is gulp initial template

Let’s modify task for angular2

To run the task

In solution explorer here it is, the task has been done by Gulp.

 

Hope this will help 🙂