New post

1:  import { NgModule }   from '@angular/core';  
2:  import { BrowserModule } from '@angular/platform-browser';  
3:  import { AppComponent } from './app.component';  
4:  @NgModule({  
5:   imports:   [ BrowserModule ],  
6:   declarations: [ AppComponent ],  
7:   bootstrap:  [ AppComponent ]  
8:  })  
9:  export class AppModule { }  

Eager loading, Lazy loading and work through using DTOs

Eager Loading: use the Include method like
db.books.Include(b=>b.Related_entity);

Lazy Loading: EF automatically loads the related entity when navigation property is referenced. To enable lazy loading, make the navigation property virtual.
public virtual Author Author{get;set;}

Problem of Circular Reference during Serializing models.
When both entities have navigation property with each other, it created a problem when we serialize the models. It creates a circular object graph.

Solution:
We need to use DTO and load all data in them before returning it. 

Code first Data Migration EF

In Code First we write the code first (Models) and let migration tools create tables.

From Tools --> Library Package Manager --> Package Manager Console.

Enter command:  Enable-Migrations

This command adds a folder named Migrations and file Configuration.cs in the folder.

The file has Seed method to pre-load the tables with data.

Type command: Add-Migration Initial

update-database

The first command generates code that creates the database and second command executes that code.

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));