How To Create Application Configuration With Two SignalR Hubs

How To Create Application Configuration With Two SignalR Hubs

1).first You Need to Create Owin Startup Class At Root Of the Project

 Note: before doing code first you need to change sql database where notification table exist write this code in sql 

ALTER DATABASE [DBNAME] SET ENABLE_BROKER WITH ROLLBACK IMMEDIATE

using Microsoft.Owin;

using Owin;

[assembly: OwinStartupAttribute(typeof(PowerHMS.Startup))]

namespace PowerHMS

{

public partial class Startup

{

public void Configuration(IAppBuilder app)

{

app.MapSignalR();

}

}

}

2).Set up Code Withing Global.aspx class 

using System;

using System.Web;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

namespace MyProject

{

public class MvcApplication : System.Web.HttpApplication

{

//string con = ConfigurationManager.ConnectionStrings["sqlConString"].ConnectionString;

protected void Application_Start()

{

BundleConfig.RegisterBundles(BundleTable.Bundles);

AreaRegistration.RegisterAllAreas();

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

//SqlDependency.Start(con);

////new Code

NotificationComponent nc = new NotificationComponent();

var currentTime = DateTime.Now;

nc.RegisterNotification(currentTime);

}

protected void Session_Start(object sender, EventArgs e)

{

var currentTime = DateTime.Now;

HttpContext.Current.Session["LastUpdated"] = currentTime;

}

protected void Application_End()

{

//here we will stop Sql Dependency

// SqlDependency.Stop(con);

}

}

}

3).Create A connection Class For SignalR

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Threading.Tasks;

using Microsoft.AspNet.SignalR;

namespace MyProject

{

public class NotificationHub : Hub

{

public readonly static ConnectionMapping<string> _connections = new ConnectionMapping<string>();

public override Task OnConnected()

{

string name = Context.User.Identity.Name;

_connections.Add(name, Context.ConnectionId);

return base.OnConnected();

}

public override Task OnDisconnected(bool stopCalled)

{

string name = Context.User.Identity.Name;

_connections.Remove(name, Context.ConnectionId);

return base.OnDisconnected(stopCalled);

}

public override Task OnReconnected()

{

string name = Context.User.Identity.Name;

if (!_connections.GetConnections(name).Contains(Context.ConnectionId))

{

_connections.Add(name, Context.ConnectionId);

}

return base.OnReconnected();

}

}

}

4).Create A Notification Component Class

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Linq;

using System.Web;

using System.Data.SqlClient;

using Microsoft.AspNet.SignalR;

namespace MyProject

{

public class NotificationComponent

{

//Here we will add a function for register notification (will add sql dependency)

public void RegisterNotification(DateTime currentTime)

{

string conStr = ConfigurationManager.ConnectionStrings["sqlConString"].ConnectionString;

string sqlCommand = @"select [NotiMessage],[SenderID],[Recivers],[NofiTable],[NotiColumn],[NotiValue],[AddedOn],[ReadOn],[IsDeleted] from [dbo].[Notification] ";

//you can notice here I have added table name like this [dbo].[Contacts] with [dbo], its mendatory when you use Sql Dependency

using (SqlConnection con = new SqlConnection(conStr))

{

SqlCommand cmd = new SqlCommand(sqlCommand, con);

//cmd.Parameters.AddWithValue("@AddedOn", currentTime);

if (con.State != System.Data.ConnectionState.Open)

{

con.Open();

}

cmd.Notification = null;

SqlDependency sqlDep = new SqlDependency(cmd);

sqlDep.OnChange += sqlDep_OnChange;

//we must have to execute the command here

using (SqlDataReader reader = cmd.ExecuteReader())

{

// nothing need to add here now

}

}

}

void sqlDep_OnChange(object sender, SqlNotificationEventArgs e)

{

if (e.Type == SqlNotificationType.Change)

{

SqlDependency dependency = sender as SqlDependency;

dependency.OnChange -= sqlDep_OnChange;

var notificationHub = GlobalHost.ConnectionManager.GetHubContext<NotificationHub>();

foreach (var user in NotificationHub._connections.GetEnumerator())

{

foreach (var ids in NotificationHub._connections.GetConnections(user))

{

notificationHub.Clients.Client(ids).notify("added");

}

}

RegisterNotification(DateTime.Now);

}

}

GetNotificationsUser

}

}

5). Create Hubs

          a).Schedulehub.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using System.Threading.Tasks;

namespace MyProject

{

public class scheduleHub : Hub

{

public void Modify(string action, Object data)

{

Clients.Others.AddToSchedul(action, data);

}

public void Send(string GroupName,string message)

{

Clients.Others.addNewMessageToPage(HttpContext.Current.User.Identity.Name, message);

}

}

}

      B).Notificationhub.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Threading.Tasks;

using Microsoft.AspNet.SignalR;

namespace MyProject

{

public class NotificationHub : Hub

{

public readonly static ConnectionMapping<string> _connections = new ConnectionMapping<string>();

public override Task OnConnected()

{

string name = Context.User.Identity.Name;

_connections.Add(name, Context.ConnectionId);

return base.OnConnected();

}

public override Task OnDisconnected(bool stopCalled)

{

string name = Context.User.Identity.Name;

_connections.Remove(name, Context.ConnectionId);

return base.OnDisconnected(stopCalled);

}

public override Task OnReconnected()

{

string name = Context.User.Identity.Name;

if (!_connections.GetConnections(name).Contains(Context.ConnectionId))

{

_connections.Add(name, Context.ConnectionId);

}

return base.OnReconnected();

}

}

}

6). Finally Create Code for Hub in javascript to communicate Dom

$(function () {

//Create SignalR Hub Server Connection

var connection = $.hubConnection("/signalr",

{

seDefaultPath: false

});

//Creating Proxy Hub For "ScheduleHub" Hub

var scheduleHubProxy = connection.createHubProxy('scheduleHub');

//Creating Proxy Hub For "NotificationHub" Hub

var notificationHub = connection.createHubProxy('notificationHub');

notificationHub.on('notify', function (message) {

if (message && message.toLowerCase() == "added") {

}

});

scheduleHubProxy.on('AddToSchedul', function (action, data) {

if (data != null) {

$("#Schedule1").ejSchedule('instance').notifyChanges(action, data);

var schedule = $("#Schedule1").data("ejSchedule");

}

});

connection.start().done(function () {

window.actionComplete = function (args) {

if (args.methodType == "public")

args.appointment = null;

if (args.methodType != "public" && (args.type == "appointmentCreated" || args.type == "appointmentEdited" || args.type == "appointmentDeleted" || args.type == "drag" || args.type == "navigation")) {

scheduleHubProxy.invoke('modify', args.type, args.appointment);

}

};

});

});

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>