SHASHANGKA SHEKHAR'S BLOG

Hi, I am Shashangka Shekhar, Working with Microsoft Technologies. This is my personal blog where I share some of my experiences.

ASP.NET Core PART-2

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.

core_1

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

 core_2

 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.

core_4

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

core_3

 MVC Folder Structure: 

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

core_5

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.

core_8

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

core_9

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

core_10

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.

core_11

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

core_12

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

core_13

Here we have installed bootstrap package.

core_14

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

core_15

As you can see the package in solution explorer.

core_16

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

core_17

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

core_18

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.

core_28

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

core_19

As you can see in solution explorer Angular2 is installed.

core_20

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.

 core_21

Here is gulp initial template

core_22

Let’s modify task for angular2

core_23

To run the task

core_24

core_26

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

core_27

 

Hope this will help 🙂

2 Comments

Post a comment