ASP.NET Core 1.0 MVC 6 Using WEB API And AngularJS

Introduction

In this article we will see in detail how to create ASP.NET Core 1.0 MVC 6 using WEB API and AngularJS .

You can also view our previous article.

Prerequisites

Visual Studio 2015: You can download it from here.
ASP.NET 5 /Core 1.0: download ASP.NET 5 RC from this link.

In this article we will see in detail how to:

• Create our ASP.NET Core 1.0 Web Application.
• How to change the Default Connection string to our SQL Server Connection String.
• How to add Model and DbContext Class for using in WEB API
• How to add Entity framework Service in Startup.cs file.
• How to add our WEB API Controller.
• How to add grunt package using NPM configuration file
• How to configure Grunt File.
• How to Run the Grunt file using Visual Studio Task Runner Explorer
• How to create our AngularJS Module, Controller and Service file and get WEB API data for bind in MVC page.

Reference link

Create our ASP.NET Core 1.0 Web Application.

After installing both Visual Studio 2015 and ASP.NET 5 RC.click Start, then Programs and select Visual Studio 2015 - Click Visual Studio 2015. Click New, then Project, select Web and select ASP.NET Web Application. Enter your Project Name and click OK.



Select Web Application under ASP.NET 5 Template and click ok.



Database Connection String:

Now we need to change the local connection string from ASP.Net 5 project with our SQL Server connection.

Note:

In ASP.NET 5 we need to use “appsettings.json” file instead of web.config. Yes in ASP.NET 5 there is no web.Config file for connection string we need use the “appsettings.json” .We can find the “appsettings.json” file from our Asp.NET 5 solution.



To change the default connection string with our SQL connection open the “appsettings.json” file .Yes this is a JSON file and this file looks like the below Image by default.



Now the default connectionstring will be something like this,
Now we change this to our SQL Connection like below,
Here you can change as per your SQL Connection and save the “appsettings.json” file. The updated JSON file will be looks like this.



Creating our Model

We can create a model by adding a new class file in our Model Folder.



Right click the Models folder and click add new Item .Select Class and enter your class name as “StudentMasters.cs”



Here our class will be look like the below image. Here we will add our model field property.



Add the header file usingSystem.ComponentModel.DataAnnotations; and add all our table field name as property in this model class like the below code.

Now we have created our Model, thenext step is to add DBContext for our model.

Creating DbContext

Now we need to create a DBContext for our Entity Framework. Same as with Model Class, add a new class to our Models folder.

Right click the Models folder and click add new Item .Select Class and enter your class name as “StudentMastersAppContext.cs”



Here our class will be look like the below image.



Now first we need to add the header file for Entity framework as usingMicrosoft.Data.Entity;

Next inherit the DbContextto our class and then create object for our DBContext like below code.

Now we can created our DB context and the next step is to add a Service for our Entity Framework.

Adding Entity Framework Service in Startup.cs

Next we need to add our Entity Framework service in Startup.cs . We can find the Startup.cs file from our solution explorer .



Open the Startup.csfile and we can see by default the ApplicationDBContext will be added in ConfigureServices method.



Now we can add one more DBContext for our StudentMastersAppContext like below code.
Next step is to add WEBAPI Controller.

Creating our WEB API Controller

Right click the Controller folder and click add new Item .Select API Controller with Action, using Entity Framework and click Add.



Now we need to select our newly created Model class and our Data Context Class.

Model Class: In Model Class select our Model Class which we created as “StudentMasters”.

Data Context Class: In Data Context select our DBContext class which we created as “StudentMastersAppContext”



Give our Controller name with API and click ADD.

Now we can see our WEB API Controller has been created,



To test it we can run our project and copy the get method api path here we can see our API path for get is api/StudentMasters/

Run the program and paste the above API path to test our output.



Create Scripts and Controller Folder:

Next we need to add a new folder in our project for AngularJs.
Create a new folder named “Scripts” .Right click our project and click add new Folder and name the folder as “Scripts”



Now we create one more folder for our AngularJs controller named as “Controllers”



Adding grunt package using NPM configuration file

Now we need to add a NPM Configuration File for adding a grunt package to run our Java scripts.
As we have created as a Web Application the NPM Configuration File will be located in our project.
By default we can’t view our NPM Configuration File. The NPM Configuration File will be in the name of “package.JSON”. TO view that from the Solution Explorer click on “Show All Files”



Now we can see NPM file as “package.JSON”



Dependencies Folder:



In dependency folder we can see the entire installed NPM package. Here we can see by default grunt package has not been installed .Here we will see how to add the grunt package.

If this “package.JSON” is not available

Right click our Project and click Add New Item to add our NPM Configuration File. Select Client-Side and Select NPM Configuration File and click Add.



Now open the “package.JSON” file .Now first we need to change the name to our project Solution name and add our grunt package. We can see the code here below the image.



Here we have changed the name as our Solution name and also added the grunt package.