Call Async Post Method

using (var client = new HttpClient())
{
 client.BaseAddress = new Uri("Your URL");
 client.DefaultRequestHeaders.Accept.Clear();
 client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
var response = client.PostAsync("API method name", new StringContent(JsonConvert.SerializeObject( "Parameter to send").ToString(), Encoding.UTF8, "application/json")).Result.Content.ReadAsStringAsync().Result;
var resultList = JsonConvert.DeserializeObject<List<"Your DTO Type">>(response ).ToList();
}

Angular JS CRUD - DB

Service.js

/// <reference path="D:\Projects\testapi\testapi\Scripts/angular.min.js" />


app.service('personservice', function ($http, $location) {

    this.personlist = function () {
        return $http({
            method: "GET",
            url: "/api/people"

        }).then(function (result) {
            return result.data;
        });
    };

    this.addPerson = function (name, age) {

        return $http({
            method: "POST",
            url: "/api/People",
            data: { name: name, age: age }
        }).then(function (result) {
            return result.data;
        })
    };

    this.deletePerson = function (id) {
        return $http({
            method: "delete",
            url: "api/People/" + id,
        }).then(function (result) {
            return result.data;
        })
    };

});


Controller.js

/// <reference path="D:\Projects\testapi\testapi\Scripts/angular.min.js" />

app.controller('personcontroller', function ($scope, personservice, $location) {

    init();
    function init() {
        personservice.personlist()
        .then(function (result) {
            $scope.people = result;
        });
    }

    $scope.addPerson = function () {
        var name = $scope.newPerson.name;
        var age = $scope.newPerson.age;
        personservice.addPerson(name, age)
           .then(function (result) {
               $scope.addedPerson = result;
           });
    }

    $scope.deletePerson = function (id) {
        personservice.deletePerson(id)
            .then(function (result) {

                $scope.deletedPerson = result;
            });
    };

});



App.js
/// <reference path="" />
var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider.when('/add',
        {
            controller: 'personcontroller',
            templateUrl: 'AngularCRUD/Person/views/add.html'
        })
    .when('/edit/:id', {
        controller: 'personcontroller',
        templateUrl: 'AngularCRUD/Person/views/edit.html'
    })
    .when('/list', {
             controller: 'personcontroller',
             templateUrl: 'AngularCRUD/Person/views/list.html'
         }).
    otherwise({ redirectTo: '/list' });

});

AngularJS - Temp CRUD

Service.js

app.service('personservice', function () {
    var people = [{ id: 1, name: 'rishi', age: 32 }, { id: 2, name: 'jaismee', age: 26 }, { id: 3, name: 'romita', age: 28 }];

    this.personlist = function () {
        return people;
    }

    this.addPerson = function (name, age) {
        var topId = people.length + 1;
        people.push({ id: topId, name: name, age: age });
    };

    this.deletePerson = function (id) {
        for (var i = people.length - 1; i >= 0; i++)
        {
            if (people[i].id === id)
            {
                people.splice(i, 1);
                break;
            }
        }
    }

    this.getDetail = function (id) {
        for (i = people.length - 1; i >= 0; i++)
        {
            if (people[i].id === id)
            {
                return people[i];
            }
        }
    }

});


Controller.js

app.controller('personcontroller', function ($scope, personservice, $location) {
    init();
    function init() {
        $scope.people = personservice.personlist();
    }

    $scope.addPerson = function () {
      var name =  $scope.newPerson.name;
      var age =  $scope.newPerson.age;
        personservice.addPerson(name, age);
     
        $scope.newPerson.name = '';
        $scope.newPerson.age = '';
        //$location.path('#/list');
    }

    $scope.deletePerson = function (id)
    {
        personservice.deletePerson(id);
    }

});

app.js
/// <reference path="" />
var app = angular.module('app', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider.when('/add',
        {
            controller: 'personcontroller',
            templateUrl: 'AngularCRUD/Person/views/add.html'
        })
    .when('/edit/:id', {
        controller: 'personcontroller',
        templateUrl: 'AngularCRUD/Person/views/edit.html'
    })
    .when('/list', {
             controller: 'personcontroller',
             templateUrl: 'AngularCRUD/Person/views/list.html'
         }).
    otherwise({ redirectTo: '/list' });

});

list.html
<h1>List</h1>
<ul ng-repeat="person in people">
    <li>{{person.name}}{{person.age}} </li><a ng-click="deletePerson(person.id)" href="#"> delete</a>
</ul>

Add.html
<h1>Add</h1>
<div>
    Name : <input type="text" ng-model="newPerson.name" />
</div>
<div>
    Age : <input type="text" ng-model="newPerson.age" />
</div>
<div>
    <a ng-click="addPerson()" href="#/add" >Add</a>
</div>

MVC + Genreic Repository + UOW

enable-migrations -contexttypename schoolcontext
add-migration initialcreate
update-database
install-package PagedList.Mvc
[DatabaseGenerated(DatabaseGeneratedOption.None)] - provided by user - rather generating.
Install-Package SimpleInjector.Integration.Web.Mvc  @Html.ListBox("Categories", (MultiSelectList)ViewBag.Categories , new { @class = "form-control", data_placeholder = "Choose a Category" })

 ViewBag.Categories = new MultiSelectList(db.Categories.ToList(), "Id", "Name");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

[DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode =true)]

 $(function(){
            $(".datepickerClass").datepicker({ dateFormat: 'dd/mm/yy' });
        });

IRepository
public interface IRepository<T> where T : class
    {
        // CRUD
        T Add(T entity);
        IEnumerable<T> All();
        IEnumerable<T> FindBy(Expression<Func<T, bool>> predicate);
        void Edit(T entity);
        T Delete(T entity);

    }

Implement IRepository
 public abstract class Repository<T> : IRepository<T> where T : class
    {
        protected DbContext db;
        public Repository(DbContext _db)
        {
            db = _db;
        }
        public virtual T Add(T entity)
        {
            return db.Set<T>().Add(entity);
        }

        public virtual IEnumerable<T> All()
        {
            return db.Set<T>().AsEnumerable();
        }

        public virtual T Delete(T entity)
        {
            return db.Set<T>().Remove(entity);
        }

        public virtual void Edit(T entity)
        {
            db.Entry(entity).State = EntityState.Modified;
        }

        public virtual IEnumerable<T> FindBy(Expression<Func<T, bool>> predicate)
        {
            return db.Set<T>().Where(predicate).AsEnumerable();
        }

    }

IUnitofWork
public interface IUnitofWork : IDisposable
    {
        int commit();

    }
UnitOfWork
 public sealed class UnitofWork : IUnitofWork
    {
        private  DbContext db;
        public UnitofWork(DbContext _db)
        {
            db = _db;
        }
        public int commit()
        {
            return db.SaveChanges();
        }

        public void Dispose()
        {
            if (db != null)
            {
                db.Dispose();
                db = null;
            }
            GC.SuppressFinalize(db);
        }

    }


Injector DI - App Start
https://simpleinjector.readthedocs.io/en/latest/mvcintegration.html
var container = new Container();
            container.Options.DefaultScopedLifestyle = new WebRequestLifestyle();

    // Register your types, for instance:
    container.Register<IUserRepository, SqlUserRepository>(Lifestyle.Scoped);

    // This is an extension method from the integration package.
    container.RegisterMvcControllers(Assembly.GetExecutingAssembly());

    // This is an extension method from the integration package as well.
    container.RegisterMvcIntegratedFilterProvider();

    container.Verify();


    DependencyResolver.SetResolver(new SimpleInjectorDependencyResolver(container));