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

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

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>


No comments:

Post a Comment

Thank You For Your Great Contribution

Featured Post

Sql dynamic query With Join And search using like query with multiple column

Sql dynamic query With Join And search using like query with multiple column declare @keyword varchar(100) DECLARE @sqlCommand va...

Popular Posts