How to Use Bootstrap modal With Asp.net MVC and Angular Js

Before Add Entity Mode First You Need to Know How To Add New Project In Asp.net MVC for this Read My Privious Blog

1). How To Create proejct In Asp.net MVC using visual studio

2). How To Add Nuget Package or angular js Using Nuget in visual Studio

3).  How to Add Asp.net MVC with Angular Js

4).How to add Data Entity Model in mvc

If you Already Know All the above Define concepts  and code the Please skip and Read this blog Continue, Now Next Main objective is in this blog is how to add Data entity model in project ,with in new or in existing Project . To do Please Follow This Steps


C# Code

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Validation;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
using AngularFirstWithMVC.DataEntity;
using AngularFirstWithMVC.Filter;
using AngularFirstWithMVC.Models;

namespace AngularFirstWithMVC.Controllers
{
    [Authorize]
    public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetEmployees()
        {
            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var Employee = db.Employees.Select(E => new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }).ToList();

                return Json(Employee, JsonRequestBehavior.AllowGet);
            }
        }

        public ActionResult Create()
        {

            return View(new EmployeeModel());

        }
        [HttpPost]

        public ActionResult Create(Employee employee)
        {
            if (!ModelState.IsValid)
                return View(employee);
            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var E = db.Employees.Add(employee);
                if (db.SaveChanges() > 0)
                {
                    return Json(new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json(new { success = false, responseText = "The attached file is not supported." }, JsonRequestBehavior.AllowGet);
                }
            }

        }

        public ActionResult Export()
        {
            return View();

        }

        [HttpPost]
        [ValidateInput(false)]
        public FileResult Export(FormCollection frm)
        {
            string body = string.Empty;

            using (StreamReader reader = new StreamReader(Server.MapPath("~/Views/Shared/invoice.cshtml")))
            {
                body = reader.ReadToEnd();
            }

            return File(Encoding.ASCII.GetBytes(body), "application/vnd.ms-excel", "Grid.xls");
        }


        public ActionResult Edit(int? id)
        {

            if (!id.HasValue)
                return RedirectToAction("index");

            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var E = db.Employees.Find(id);
                return Json(new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }, JsonRequestBehavior.AllowGet);
            }


        }

        [HttpPost]

        public ActionResult Edit(Employee employee)
        {
            if (!ModelState.IsValid)
                return View(employee);
            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var Emp = db.Employees.Find(employee.id);
                if (Emp != null)
                {

                    db.Entry(Emp).CurrentValues.SetValues(employee);
                    if (db.SaveChanges() > 0)
                    {
                        var E = db.Employees.Find(employee.id);
                        return Json(new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }, JsonRequestBehavior.AllowGet);
                    }
                    else
                    {
                        return PartialView(employee);
                    }

                }
                else
                    return View(employee);
            }

        }
        public ActionResult Details(int? id)
        {
            if (!id.HasValue)
                return RedirectToAction("index");

            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var E = db.Employees.Find(id);
                return Json(new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }, JsonRequestBehavior.AllowGet);
            }



        }

        public ActionResult Delete(int? id)
        {
            if (!id.HasValue)
                return RedirectToAction("index");

            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var E = db.Employees.Find(id);
                return Json(new EmployeeModel { id = E.id, UserId = E.UserId, phoneno = E.phoneno, Age = E.Age, Fname = E.Fname, address = E.address, }, JsonRequestBehavior.AllowGet);
            }

        }
        [HttpPost]
        public ActionResult Delete(int? id, Employee employee)
        {
            if (!ModelState.IsValid)
                return View(employee);
            using (FirstAngularJsWithMVCEntities db = new FirstAngularJsWithMVCEntities())
            {
                var Emp = db.Employees.Find(employee.id);
                if (Emp != null)
                {
                    db.Employees.Remove(Emp);
                    if (db.SaveChanges() > 0)
                    {
                        return Json(new EmployeeModel { id = employee.id, UserId = employee.UserId, phoneno = employee.phoneno, Age = employee.Age, Fname = employee.Fname, address = employee.address, }, JsonRequestBehavior.AllowGet);
                    }
                    else
                    {
                        return View(employee);
                    }
                }
                else
                    return View(employee);
            }

        }
    }
}


__________________________________________________________________________
//AngularJs Employee controller
__________________________________________________________________________
/// <reference path="../angular.js" />
/// <reference path="../angular-route.min.js" />

// Define a Angular app module Property

var myEmp = angular.module('EmployeeApp', ["ui.bootstrap", "ngRoute"]);


// Angular Controller For Employee,and Property of Angular App Module Object (becouse of its a child of it)
myEmp.controller('EmployeeController', ['$scope', '$http', '$uibModal', '$location', '$timeout', 'Employeeservice', function ($scope, $http, $uibModal, $location, $timeout, Employeeservice) {
    //Initialize Scope Employee list Object  
    $scope.Employee = [];
    $scope.oldEmployee = {};
    GetEmployee();
    //Get Request Of All Employees
    function GetEmployee() {
        var Onsucess = function (data) {
            $scope.Employee = data.data;
        };
        var OnError = function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        };
        Employeeservice.GetEmployee().then(Onsucess, OnError);
    }

    //Get Request Of Create
    $scope.open = function () {
        $scope.employee = { id : 0, UserId: "", phoneno:"", Age :"", Fname : "", address : "" };
        var modalInstance = $uibModal.open({
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: '/Views/Employee/Create.html',   
            scope: $scope,
        }).result.then(function () { }, function (res) { });

    }

    //Get Request Of Edit
    $scope.editEmployee = function (id) {
      
        var Onsucess = function (data) {
            $scope.employee = data.data;
            $scope.oldEmployee = data.data;
            console.log($scope.oldEmployee);
            var modalInstance = $uibModal.open({
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '/Views/Employee/Edit.html',
                scope: $scope,
            }).result.then(function () {
               
            }, function (res) {

            });
        };
        var OnError = function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        };
        Employeeservice.GetEmp(id).then(Onsucess, OnError);
    }
    //Get Request Of Details
    $scope.detailsEmployee = function (id) {
        var Onsucess = function (data) {
            $scope.employee = data.data;
            var modalInstance = $uibModal.open({
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '/Views/Employee/Details.html',
                scope: $scope,
            }).result.then(function () {

            }, function (res) {

            });
        };
        var OnError = function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        };
        Employeeservice.GetEmp(id).then(Onsucess, OnError);
    }

    //Get Request Of Delete
    $scope.deleteEmployee = function (id) {
        var Onsucess = function (data) {
            $scope.employee = data.data;
            var modalInstance = $uibModal.open({
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '/Views/Employee/Delete.html',
                scope: $scope,
            }).result.then(function () {

            }, function (res) { });
        };
        var OnError = function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
        };
        Employeeservice.GetEmp(id).then(Onsucess, OnError);
    };

    //Post Request of Employee On Click Submit Button for Create new employee
    $scope.submitEmployeeForm = function () {
        var onSuccess = function (data, status, headers, config) {
            $timeout(function () {
                $('.close').trigger('click');
            }, 100);
            $scope.Employee.push(data.data);
            console.log($scope.Employee);
         };
        var onError = function (data, status, headers, config) {
            alert('Error occured.' + status);
        }
        Employeeservice.PostEmployee($scope.employee).then(onSuccess, onError);
       
    };

    //Post Request of Employee On Click Submit Button for Create new employee
    $scope.UpdateEmployeeForm = function () {
        var onSuccess = function (data, status, headers, config) {
            $timeout(function () {
                $('.close').trigger('click');
            }, 100);    
            var index = $scope.Employee.indexOf($scope.oldEmployee);
            $scope.Employee.splice(index, 1);
            $scope.Employee.push(data.data);
        };
        var onError = function (data, status, headers, config) {
            alert('Error occured.' + status);
        }

        Employeeservice.PutEmployee($scope.employee, $scope.antiForgeryToken).then(onSuccess, onError);
    };

    //Post Request of Employee On Click Submit Button for Remove employee
    $scope.RemoveEmployeeForm = function () {
        var onSuccess = function (data, status, headers, config) {
            $timeout(function () {
                $('.close').trigger('click');
            }, 100);
            var index = $scope.Employee.indexOf(data.data);
            $scope.Employee.splice(index, 1);
        };
        var onError = function (data, status, headers, config) {
            alert('Error occured.' + status);
        }       
        Employeeservice.DeleteEmployee($scope.employee, $scope.antiForgeryToken).then(onSuccess, onError);
       
    };

}]);

//Angular Factory service
myEmp.factory("Employeeservice", ["$http", function ($http) {
    //initialize Employee service Object array 
    var Employeeservice = {};

    //method of Employee service Object For Get Employee List
    Employeeservice.GetEmp = function (id) {
        return $http({
            method: 'GET',
            url: '/Employee/Edit/' + id
        });
    }
    Employeeservice.GetEmployee = function () {
        return $http({
            method: 'GET',
            url: '/Employee/GetEmployees'
        });
    }

    //Below All Request Are Post Type Request Used For Perform ,create ,update ,delete Employee

    //method of Employee service Object Post Request For New Employee Register
    Employeeservice.PostEmployee = function (employee) {
        return $http({
            method: 'POST',
            url: '/Employee/Create',
            data: employee
        });
    }

    //method of Employee service Object Put Request For Update Employee Register
    Employeeservice.PutEmployee = function (employee) {
        console.log(employee);
        return $http({
            method: 'POST',
            url: '/Employee/Edit',
            data: employee,

        });
    }
    //method of Employee service Object delete Request For delete Employee Register
    Employeeservice.DeleteEmployee = function (employee) {
        return $http({
            method: 'POST',
            url: '/Employee/Delete',
            data: employee,
        });
    }

    return Employeeservice;
}]);

_________________________________________________________________________________

HTML Views

________________________________________________________________________________

//index.cshtml

@section Header

{

}

@{

    ViewBag.Title = "Employee List";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>Index</h2>

<div ng-app="EmployeeApp">

    <div ng-controller="EmployeeController">

        <ng-view>

        </ng-view>

        <div class="clearfix"></div>

        <div class="row">

            <div class="col-lg-12" style="    margin-bottom: 7px;">

                <div class="form-group">

                    <div class="col-md-2">

                        <span ng-click="open()" class="btn btn-primary">+ Create</span>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-md-4">

                        <select ng-model="SortOrder" class="form-control ">

                            <option value="+Fname">Fname (asc)</option>

                            <option value="-Fname">Fname (dec)</option>

                            <option value="+Age">Age (asc)</option>

                            <option value="-Age">Age (dec)</option>

                            <option value="+address">Address (asc)</option>

                            <option value="-address">Address (dec)</option>

                            <option value="+phoneno">Phoneno (asc)</option>

                            <option value="-phoneno">Phoneno (dec)</option>

                            <option value="+UserId">UserId (asc)</option>

                            <option value="-UserId">UserId (dec)</option>

                        </select>

                    </div>

                </div>

                <div class="form-group">

                    <div class="col-md-4">

                        <input type="text" ng-model="mySearch" class="form-control" />

                    </div>

                </div>

            </div>

        </div>

        <div class="clearfix"></div>

        <table class="table">

            <tr>

                <th>

                    @Html.DisplayName("Fname")

                </th>

                <th>

                    @Html.DisplayName("Age")

                </th>

                <th>

                    @Html.DisplayName("address")

                </th>

                <th>

                    @Html.DisplayName("phoneno")

                </th>

                <th>

                    @Html.DisplayName("UserId")

                </th>

                <th></th>

            </tr>

            <tr ng-repeat="item in Employee|filter:mySearch| orderBy: SortOrder">

                <td>

                    {{item.Fname}}

                </td>

                <td>

                    {{item.Age}}

                </td>

                <td>

                    {{item.address}}

                </td>

                <td>

                    {{item.phoneno}}

                </td>

                <td>

                    {{item.UserId}}

                </td>

                <td>

                    <span ng-click="editEmployee(item.id)" class="btn btn-primary">Edit</span>|

                    <span ng-click="detailsEmployee(item.id)" class="btn btn-primary">Details</span>|

                    <span ng-click="deleteEmployee(item.id)" class="btn btn-primary">Delete</span>

                </td>

            </tr>

        </table>

    </div>

</div>

@section scripts{

    @Scripts.Render("~/bundles/jqueryval")

    @Scripts.Render("~/bundles/AngularController")

}

______________________________________________________________________________

// create.html

<div class="modal-content">     

            <form ng-submit="submitEmployeeForm()">

                <intput type="hidden" id="id" name="id" ng-model="employee.id" />

                <input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />

                <div class="modal-header">

                    <h3 class="modal-title" id="modal-title">Create Employee</h3>

                    <button type="button" class="close close_employee_modal" ng-click="$dismiss()" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body" id="modal-body">

                    <div class="row">

                        <div class="col-md-12">

                            <div class="form-horizontal">

                                <div class="form-group">

                                    <label class="control-label col-md-2">Fname</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.Fname" />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <label class="control-label col-md-2">Age</label>

                                    <div class="col-md-10">

                                        <input type="number" class="form-control" ng-model="employee.Age" />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <label class="control-label col-md-2">address</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.address" />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <label class="control-label col-md-2">phoneno</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.phoneno" />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <label class="control-label col-md-2">UserId</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.UserId" />

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <div class="form-group">

                        <div class="col-md-offset-2 col-md-10">

                            <input type="submit" value="Create" class="btn btn-default" />

                            <button class="btn btn-warning" type="button"

                                    ng-click="$dismiss()">

                                Cancel

                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    

    <script src="../../Scripts/AngularControllerJs/EmployeeController.js"></script>

_________________________________________________________________________

//edit.html

<div class="modal-content">   

    <form ng-submit="UpdateEmployeeForm()">

        <intput type="hidden" id="id" name="id" ng-model="employee.id" />

        <intput type="hidden" id="oldEmployee" name="oldEmployee" ng-model="oldEmployee" />

        <div class="modal-header">

            <h3 class="modal-title" id="modal-title">Edit Employee</h3>

            <button type="button" class="close close_employee_modal" ng-click="$dismiss()" aria-label="Close">

                <span aria-hidden="true">&times;</span>

            </button>

        </div>

        <div class="modal-body" id="modal-body">

            <div class="row">

                <div class="col-md-12">

                    <div class="form-horizontal">

                        <div class="form-group">

                            <label class="control-label col-md-2">Fname</label>

                            <div class="col-md-10">

                                <input type="text" class="form-control" ng-model="employee.Fname" />

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="control-label col-md-2">Age</label>

                            <div class="col-md-10">

                                <input type="number" class="form-control" ng-model="employee.Age" />

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="control-label col-md-2">address</label>

                            <div class="col-md-10">

                                <input type="text" class="form-control" ng-model="employee.address" />

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="control-label col-md-2">phoneno</label>

                            <div class="col-md-10">

                                <input type="text" class="form-control" ng-model="employee.phoneno" />

                            </div>

                        </div>

                        <div class="form-group">

                            <label class="control-label col-md-2">UserId</label>

                            <div class="col-md-10">

                                <input type="text" class="form-control" ng-model="employee.UserId" />

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="modal-footer">

            <div class="form-group">

                <div class="col-md-offset-2 col-md-10">

                    <input type="submit" value="Create" class="btn btn-default" />

                    <button class="btn btn-warning" type="button"

                            ng-click="$dismiss()">

                        Cancel

                    </button>

                </div>

            </div>

        </div>

    </form>

        </div>

  

    <script src="../../Scripts/AngularControllerJs/EmployeeController.js"></script>

________________________________________________________________________________

//delete.html

<div class="modal-content">

            <form ng-submit="RemoveEmployeeForm()">

                <intput type="hidden" id="id" name="id" ng-model="employee.id" />               

                <div class="modal-header">

                    <h3 class="modal-title" id="modal-title">Delete Employee</h3>

                    <button type="button" class="close " ng-click="$dismiss()" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body" id="modal-body">

                    <div class="row">

                        <div class="col-md-12">

                            <div class="form-horizontal">

                                <div class="form-group">

                                    <label class="control-label col-md-2">Fname</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.Fname" name="Fname" id="Fname" disabled />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <label class="control-label col-md-2">address</label>

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.address" name="address" id="address" disabled />

                                    </div>

                                </div>

                                <div class="form-group">

                                    <div class="col-md-10 col-md-offset-2">

                                        <span class="btn btn-danger">Do You Want To Delete Employee</span>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <div class="form-group">

                        <div class="col-md-offset-2 col-md-10">

                            <input type="submit" value="Create" class="btn btn-default" />

                            <button class="btn btn-warning" type="button"

                                    ng-click="$dismiss()">

                                Cancel

                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    <script src="../../Scripts/AngularControllerJs/EmployeeController.js"></script>

_________________________________________________________________________

// Detials.html

<div class="modal-content">

    <div ng-app="EmployeeApp">

        <div ng-controller="EmployeeController">

            <form >

                <intput type="hidden" id="id" name="id" ng-model="employee.id" />

                <input id="antiForgeryToken" data-ng-model="antiForgeryToken" type="hidden" data-ng-init="antiForgeryToken='@GetAntiForgeryToken()'" />

                <div class="modal-header">

                    <h3 class="modal-title" id="modal-title">Edit Employee</h3>

                    <button type="button" class="close close_employee_modal" ng-click="$dismiss()" aria-label="Close">

                        <span aria-hidden="true">&times;</span>

                    </button>

                </div>

                <div class="modal-body" id="modal-body">

                    <div class="row">

                        <div class="col-md-12">

                            <div class="form-horizontal">

                                <div class="form-group">

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.Fname" disabled/>

                                    </div>

                                </div>

                                <div class="form-group">

                                    <div class="col-md-10">

                                        <input type="number" class="form-control" ng-model="employee.Age" disabled/>

                                    </div>

                                </div>

                                <div class="form-group">

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.address" disabled/>

                                    </div>

                                </div>

                                <div class="form-group">

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.phoneno" disabled/>

                                    </div>

                                </div>

                                <div class="form-group">

                                    <div class="col-md-10">

                                        <input type="text" class="form-control" ng-model="employee.UserId" disabled/>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <div class="form-group">

                        <div class="col-md-offset-2 col-md-10">                          

                            <button class="btn btn-warning" type="button"

                                    ng-click="$dismiss()">

                                Cancel

                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    </div>

    <script src="../../Scripts/AngularControllerJs/EmployeeController.js"></script>

</div>

How to Add Entity Data Model In Project Of MVC 

Before Add Entity Mode First You Need to Know How To Add New Project In Asp.net MVC for this Read My Privious Blog

1). How To Create proejct In Asp.net MVC using visual studio

2). How To Add Nuget Package or angular js Using Nuget in visual Studio

3).  How to Add Asp.net MVC with Angular Js

If you Already Know All the above Define concepts  and code the Please skip and Read this blog Continue, Now Next Main objective is in this blog is how to add Data entity model in project ,with in new or in existing Project . To do Please Follow This Steps

1). First You Need To Create A Directory in to Root of Project by right click on Project and select           New item then select Add new folder Option 

2). Now A new Folder (directory ) is added into root of your project Now Write this folder new from        new folder to what you want (here i write entitymodel) of the folder

3).Now you Need to add new Data Entity model Under this entity model directory to do this you            Need to right click on directory and select Add option from menu  and then select New Item

4). Now New popup menu Open then You select Data Option from selected menu then select                    ADO.net Data Entity Model And the Write Name of Entity model Here i write AngularJs 

5). Now You Need to select Type of model content I Have Crated Database first so i choose Datafirst

      so my choise is "EF Diagram from Database" option

6).Now Click On Next button Then we Have option of selection connection string or create New            Connection string 

     If you want to use Default connect to select next option other wise click on button new                         connection 

7). Now add new connection string by Follow streps (Leave this option if You want to use Default            connection string )

     Here New Pop up Open Now Select Your Provider Type (my choise is microsoft sql server)

     and click on continue button

8).  Next step to select Sql Server and then select database and then select there mode and there                credential

    Next Step is To select Datbase from list of database contain by server (note here i am using " ."            for local server)

9) Now You Need to Test Connection required to click "text connection" button to varify valid or             non  valid connetion perameter is passes

10).  Now You Need click on ok then this connection string store in entity framework connnection              string and connection pop will closed and now click next button of entity model contnet type              pop. In the next option Show what object of sql server you want to include in you entity                      framework  

12). Now You Need to setup ModelNamespace and what kind of object you want choose by check t            the check boxex, Now You can see database entity diagrame and there relations

13).The Next Step To Use This Entity  TO Use this entity include Namespace into top of controller           using "Using " keyword Before it you need to use entity class You Get by here 

      Now Finally Write Code of Employee controller I am Write below 

using AngularDemo.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using AngularDemo.EntityModel;

namespace AngularDemo.Controllers

{

    [Authorize]

    public class EmployeeController : Controller

    {

        // GET: Employee

        public ActionResult Index()

        {

            return View();

        }

         public JsonResult GetEmployees()

        {

            using (AngularDemoEntities db = new AngularDemoEntities())

            {

                var Emplist=db.Employees;

                return Json(Emplist, JsonRequestBehavior.AllowGet);

            }

        }

        // GET: Employee/Details/5

        public ActionResult Details(int id)

        {

            using (AngularDemoEntities db = new AngularDemoEntities())

            {

                var Emp = db.Employees.Find(id);

                return Json(Emp, JsonRequestBehavior.AllowGet);

            }

        }

        // GET: Employee/Create

        public ActionResult Create()

        {

            return View(new Employee());

        }

        // POST: Employee/Create

        [HttpPost]

        public ActionResult Create(Employee employee)

        {

            try

            {

                using (AngularDemoEntities db = new AngularDemoEntities())

                {

                    var Emp = db.Employees.Add(employee);

                    var s=db.SaveChanges();

                    return Json(s, JsonRequestBehavior.AllowGet);

                }

                

            }

            catch

            {

                return View(new Employee());

            }

        }

        // GET: Employee/Edit/5

        public ActionResult Edit(int id)

        {

            using (AngularDemoEntities db = new AngularDemoEntities())

            {

                var Emp = db.Employees.Find(id);

                return Json(Emp, JsonRequestBehavior.AllowGet);

            }

            

        }

        // POST: Employee/Edit/5

        [HttpPost]

        public ActionResult Edit(int id, Employee employee)

        {

            try

            {

                using (AngularDemoEntities db = new AngularDemoEntities())

                {

                    var oldemp = db.Employees.Find(id);

                   

                    db.Entry(oldemp).CurrentValues.SetValues(employee);

                    return (db.SaveChanges() > 0) ? Json(employee, JsonRequestBehavior.AllowGet) : Json(oldemp, JsonRequestBehavior.AllowGet);

                }

               

            }

            catch

            {

                return View();

            }

        }

        // GET: Employee/Delete/5

        public ActionResult Delete(int id)

        {

            using (AngularDemoEntities db = new AngularDemoEntities())

            {

                var Emp = db.Employees.Find(id);

                return Json(Emp, JsonRequestBehavior.AllowGet);

            }

        }

        // POST: Employee/Delete/5

        [HttpPost]

        public ActionResult Delete(int id, FormCollection collection)

        {

            try

            {

                using (AngularDemoEntities db = new AngularDemoEntities())

                {

                    var Emp = db.Employees.Find(id);

                    db.Employees.Remove(Emp);

                    return (db.SaveChanges() > 0) ? Json(new { sucess = "true", JsonRequestBehavior.AllowGet }) : Json(new { sucess = "false", JsonRequestBehavior.AllowGet });

                }

            }

            catch

            {

                return View();

            }

        }

    }

}