AngularJS best practice with WebAPI and MVC

Angular-Js with MVC + Web API

Pagination + Sorting with Angular JS

You may also check : Insert,delete,update,select using angularjs with mvc

Here in this tutorial, we will try to show, How to create ASP.Net MVC project using Angular JS, Create Database in Sql Server and Create WebApi.

I wil going to describe in proper way to Binding the Data in Angular Grid. Here, I am using Entity framework 5.0 .

Step 1:- Create ASP.Net MVC Project with VS2013

       

           1. Open your VS IDE 2013

           2. Go to file menu and select New  

           3. Click on create Project

           4. Asp.Net Web Application

               Select MVC template, Click on Add button, Give name as DemoApp.

               Now your MVC project is ready to go for next process.

Step 2:- Create Database and Demo Table Student with some data.

1.    Open your Sql Server

2.    Create a database name as DemoDb by using command Create database DemoDb

3.     Now your database is ready.

4.    Create a table into database by clicking on table folder from DemoDb(Database).

To create table use the following below code.

CREATE TABLE [dbo].[Student](

 [StudentId] [nvarchar](10) NOT NULL,
 [FirstName] [nvarchar](50) NULL,
 [LastName] [nvarchar](50) NULL,
 [Age] [int] NULL,
 [Gender] [nvarchar](50) NULL,
 [Batch] [nvarchar](50) NULL,
 [Address] [nvarchar](50) NULL,
 [Class] [nvarchar](50) NULL,
 [School] [nvarchar](50) NULL,
 [Domicile] [nvarchar](50) NULL,

) 

To insert some data in table use the following below code.

INSERT INTO [dbo].[Student]
           ([StudentId]
           ,[FirstName]
           ,[LastName]
           ,[Age]
           ,[Gender]
           ,[Batch]
           ,[Address]
           ,[Class]
           ,[School]
           ,[Domicile])
     VALUES
           (1,
           'Rahul','Patankar',
           24,'Male','27','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (2,
           'Dnyanesh','Kunde',
           24,'Male','15','Hyderabad','10','Hyderabad Public School','Hyderabad'),
     (3,
           'Shailesh','Wagh',
           24,'Male','10','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (4,
           'Arjun','Shinde',
           26,'Male','17','Sambhajinagar','10','A.K Waghmare','Sambhajinagar'),
     (5,
           'Sayali','Wavikar',
           23,'Female','27','Sambhajinagar','10','Godavari Public School','Sambhajinagar'),
     (6,
           'Sumeet','Chautmal',
           24,'Male','22','Sambhajinagar','10','Godavari Public School','Sambhajinagar')
         
GO

Step 3:- Add Entity Data Model into your project 

1. Select and Right click on Model folder
2. Select  Add
3. Go to New Item
4. In search box, enter Entity Data Model and add it by giving Name as StudentModel.
5. After clicking on add button you able to see one window, Now click on EF designer from   database and press Next.
6. Now you need to create new database connection and fill the information reqd. by clicking on New Db connection.
7. Click on test connection.
   

Step 4:- Creating Web Api project in the same solution name as DemoApp

1. Right Click on Solution Name
2. Click on Add
3. New Project
4. Select Asp.Net Web app
5. Create Name as DemoApp.Api

Select Web API Template and Click on OK.

Here, I am binding the data from Our Database DemoDb with Angular Grid into our MVC Application DemoApp by using Web Api.
So it is required to write some logic to interact with our Database DemoDb and Performing reqd. operations.

Add the reference of DemoApp MVC projects ref.to DemoApp.Api.
By Right Clicking on refereces => add ref. => select reqd. project =>click on Ok.

Note:- Plese Copy the Connection string from your DemoApp web.config file and Paste it into web.config of DemoApp.Api Project.

So, to implement this follow below steps.
                     1. Right Click on Controller Folder into DemoApp.Api project
                     2. Click on Add Controller
                     3. Select Empty Controller and click on add.
                     4. Give name as DemoApiController. Just Copy and Paste the below Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace DemoApp.Api.Controllers
{

    [RoutePrefix("api/DemoApi")]
    public class DemoApiController : ApiController
    {
        Private DemoDbEntities db = new DemoDbEntities();
        [Route("GetStudents")]
        public IEnumerable GetStudents()
        {
            return db.Students.AsEnumerable();
        }
        [Route("GetStudentsAsc")]
        public IEnumerable GetStudentsAsc()
        {
            return db.Students.AsEnumerable().OrderBy(x=>x.StudentId);
        }
        [Route("GetStudentsDesc")]
        public IEnumerable GetStudentsDesc()
        {
            return db.Students.AsEnumerable().OrderByDescending(x => x.StudentId);
        } 
    }
}

config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

Step 5 :- Using Web Api (DempApp.Api) into Web Application (DemoApp).

Now move to DemoApp( MVC web app project),
              1. In DemoApp, Right click on Controller Folder
              2. Add Controller
              3. Select Empty Controller Give name as DemoController
              4. Your controller Should look like below :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DemoApp.Controllers
{
    public class DemoController : Controller
    {
        // GET: Demo
        public ActionResult Index()
        {
            return View();
        }
    }
}
  5. Right Click on Index Action and Add Empty View.
               6. Right Click on Scripts folder into DemoApp
               7. Add new Javascript file Give name as App.js and add below code into it.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
    var paginationOptions = {
        pageNumber: 1,
        pageSize: 10,
        sort: null
    };
    $scope.gridOptions = {
        paginationPageSizes: [10, 20, 30,40,50,60,70,80,90],
        paginationPageSize: 10,
        useExternalPagination: true,
        useExternalSorting: true,
        columnDefs: [
        { name: 'StudentId' },
        { name: 'FirstName', enableSorting: false },
        { name: 'LastName', enableSorting: false },
        { name: 'Age', enableSorting: false },
        { name: 'Gender', enableSorting: false },
        { name: 'Batch', enableSorting: false },
        { name: 'Address', enableSorting: false },
        { name: 'Class', enableSorting: false },
        { name: 'School', enableSorting: false },
        { name: 'Domicile', enableSorting: false },
        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
                if (sortColumns.length == 0) {
                    paginationOptions.sort = null;
                } else {
                    paginationOptions.sort = sortColumns[0].sort.direction;
                }
                getPage();
            });
            gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                paginationOptions.pageNumber = newPage;
                paginationOptions.pageSize = pageSize;
                getPage();
            });
        }
    };
    var getPage = function () {
        var url;
        switch (paginationOptions.sort) {
            case uiGridConstants.ASC:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudentsAsc';
                break;
            case uiGridConstants.DESC:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudentsDesc';
                break;
            default:
//URL of your Web Api running Path.
                url = 'http://localhost:57868/api/DemoApi/GetStudents';
                break;
        }

        $http.get(url)
        .success(function (data) {
            $scope.gridOptions.totalItems = 100;
            var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
            $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
        });
    };

    getPage();
}
]);

After adding the Script as App.js into your scripts folder, add the below code into your view i.e. Index.cshtml.








  


              


        

            

        
  




Now everything is done.
Just need to do some settings as below.

1. Set Multiple project Startup to start WebApp and WebApi project parallel.

    1. Now Right click on solution
    2. Set as startup project
    3. Click on button multiple project
    4. Choose both project as start.
2. To Give Cross Origin Resource Sharing (CORS)



<system.webServer>
<httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="*">
        <add name="Access-Control-Allow-Headers" value="Content-Type">
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS">
      </add></add></add></customheaders>
    </httpprotocol>
</system.webServer>