Friday, March 27, 2015

Using Grunt in 5 project

We will continue this with the code which I have done in my last post.
What is Grunt? Grunt is an open-source tool that you can use to build all of the frontend resources for your project.
In this demo, I will mainly use Grunt for JavaScript minification.
There are three types of Package Managers in Visual Studio 2015.

  • Nuget
We use Nuget for manage .net packages like MVC, EntityFramework and etc. We define those packages in project.json file.
  • NPM(Node Package Manager)
We can manage NPM packages from this and we have to define those packages in package.json file.
  • Bower
This is a front end package manager, which we can use for Angular JS, JQuery, Bootstrap and etc.

First we will define Grunt package in NPM. For that we need to add NPM file like below.
Change the content of package.json file like below. It will add, NPM packages  into the project.
Add Grunt.js file and change content of that file for JavaScript minification process. This code will minify all javscript files in Scripts folder and create app.js file in wwwrootUglify combines JavaScript files according to the order they have defined in Grunt Configuration.
Add Scripts folder and add a javascript file into that folder. Open Task Runner in Visual Studio.
Run Uglify command. This will create app.js minified file in wwwroot folder.
It's easier if you bind the Uglify command to automatically run in After Build.

Thursday, March 26, 2015

Using Web API in 5

In my last post I created a Web Project using 5. Now we will create some web api controllers.
First, add MVC nuget package to the project.
Then change the Startup.cs class like below.
When you run the application, the browser must open following page, which means your IIS works correctly.
In 5, there are two primary concepts.

  • Middleware
Middleware is in the HTTP pipeline. When HTTP request comes in it will go through all the middleware according to the order they have defined. After complete that request, response with flows back through the same route.
  • Services
Using dependency injection pattern, services are availabled to all middleware components. For example, DbContext, Logger service and etc.

Change the Startup class like below. Above mentioned middleware and Service codes are applied from Startup class. This code has configured to use DbContext using DI pattern.
Create folder named Controllers and add a Web API Controller class like below.
If you have data in your database, then you will be able to see an output like below.
Assume, there was an exception occurred. Change the web api controller code like below.
Change the Startup.cs file content.
When you run the project, you will see a beautiful error handling page which contains lots of details.

Using Entity Framework 7

In this post I'm going to demonstrate about how to use Entity Framework 7 in MVC 6 project. I will use Visual Studio 2015 CTP version.
First create a New Project like below.
I want to build my project from scratch. Therefore create an Empty 5 preview project.
There are some visible structural changes in the MVC project. There's a file called Startup.cs, where you can configure your HTTP request pipeline. wwwroot is the web root, where you can put all your static files.
In the references folder, there are two target frameworks which has defined in project.json file.

We need to add references for EntityFramework as nuget packages like below.

Create a folder called Model. Inside that create Student.cs class like below.
Next we need to add DbContext file for this SchoolApp.
Then we need to add EntityFramework migration files. So, open Package Manager Console, and go to SchoolApp folder where the project.json file exists.
We have to execute the following command to add initial migration.
This will give an error due to inability to load the command. Add following command to project.json file.
After the above step, execute following commands.
This will add migration files and also create the database.