Saturday, June 2, 2018

Angular Js Directive Examples with Filters

Note:
Variables initialized in ng-init are different from the properties defined using ng-model directive. The variables initialized in ng-init are not attached to $scope object whereas ng-model properties are attached to $scope object.

ng-repeat Example


<html>

<head>

    <script src="angular.min.js"></script>



</head>

<body ng-app="" ng-init="students=['a','b','c']">

    <ol>

        <li ng-repeat="name in students">

            {{name}}

        </li>
    </ol>
    <div ng-repeat="name in students">
        {{name}}
    </div>
</body>
</html>


Output:


Angular Js Events:

I want to handle the click Event Now using angular Js


 Example :

 Javascript Code:

 var myapp = angular.module("myapp", [])
            .controller("mycontroller", function ($scope) {
                var employee = [
                     { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad" ,YouHaveClickedMe :0},
                     { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", YouHaveClickedMe: 0 },
                     { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", YouHaveClickedMe: 0 }
                ];
                $scope.employees = employee;
                $scope.ClickedMeEventSelected = function (name)
                {
                    name.YouHaveClickedMe++;
                }

            });


Default

<html>
<head>
    <script src="angular.min.js"></script>
    <script src="MyJavascript.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
    <table>
        <tr ng-repeat="employee in employees">
            <td>{{employee.FirstName}}</td>
            <td>{{employee.LastName}}</td>
            <td>{{employee.Gender}}</td>
            <td>{{employee.Address}}</td>
            <td>{{employee.YouHaveClickedMe}}</td>
            <td>
                <input type="button" value="You Have Clicked Me" ng-click="ClickedMeEventSelected(employee)" />
            </td>
        </tr>
    </table>
</body>
</html>


Output:



AngularJS Filters

Filters are used to format data. Filters can be used with the binding expression or directives


Currency It formats a number to a currency format.

Date It formats a date to a specified format.



Filter It select a subset of items from an array.



Json It formats an object to a Json string.


Limit It is used to limit an array/string, into a specified number of elements/characters.

Lowercase It formats a string to lower case.

Number It formats a number to a string.

Orderby It orders an array by an expression.

Uppercase It formats a string to upper case.


Example : 

Add filters to expressions


We can add filters to expresssion by using pipe character to the expression



Javascript Code:



/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "Kumar"
});




Default Page:

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ firstName | uppercase }}</p>  
</div>    
</body>  
</html>


Output:


Example 2:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller('mycontroller', function ($scope) {
                $scope.firstName = "RajaKonda Uday",
                $scope.lastName = "KUMAR"
});

Default Page:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>My  name is {{ lastname | lowercase }}</p>  
</div>    
</body>  
</html>


Output:


Add filters to directives


order by filter which is used to sort an Array


Example :

Javascript :



/// <reference path="angular.min.js" />

var myapp = angular.module('myApp', []).controller('mycontroller', function ($scope) {

    $scope.names = [

        { name: 'Z', eno: 1 },

        { name: 'B', eno: 8 },

        { name: 'C', eno: 3},

        { name: 'E', eno: 5 },

        { name: 'Q', eno: 4 },
        { name: 'I', eno: 6 },
        { name: 'P', eno: 7 },
        { name: 'U', eno: 9 },
        { name: 'O', eno: 2 }
    ];
});


Default Page


<html>  
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>  
<div ng-app="myApp" ng-controller="mycontroller">  
<p>Looping with objects:</p>  
<ul>  
  <li ng-repeat="x in names | orderBy:'eno'">  
    {{ x.name + ', ' + x.eno }}  
  </li>  
</ul>  
</div>     
</body>  
</html>

Output:


Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
});



Default Page:

<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


output:



Filter Example with display limitNumber of Records
Javascript Code:

 /// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
    var employee = [
         { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
         { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
         { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
         { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
         { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
         { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
    ];
    $scope.employees = employee;
    $scope.rowLimit = 3;

});


Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="number" step="1" min="0" max="5" ng-model="rowLimit" />
        <br/>
        <br />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>DateofBirth(Only Month in Numbers)</th>
                <th>DateofBirth(Only Date in Numbers</th>
                <th>DateofBirth(Only MMMM Format)</th>
                <th>DateofBirth(Only MM Format)</th>
                <th>DateofBirth(Only M Format)</th>
                <th>DateofBirth(Only yy Format)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees |limitTo:rowLimit">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.DateofBirth | date:"M"}} </td>
                <td>{{ employee.DateofBirth | date:"dd" }} </td>
                <td>{{ employee.DateofBirth | date:"MMMM" }} </td>
                <td>{{ employee.DateofBirth | date:"MM" }} </td>
                <td>{{ employee.DateofBirth | date:"M" }} </td>
                <td>{{ employee.DateofBirth | date:"yy" }} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Output:
Example :  

The filter Filter

The filter Filter will be used only on arrays because it selects a subset of an array. It returns an array containing only the matching items.


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});
Default page:

 <script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
<ul>  
  <li ng-repeat="x in employees | filter : 'o'">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>

</html>

 output:

Filter and Sorting an Array based on User Input:

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [  
            'Z',  
            'Pooja',  
            'Mahesh',  
            'Raju',  
            'Mounika',  
            'Robo',  
            'Rajakonda',  
            'Uday',  
            'Kittu'  
         ];  
    $scope.employees = employee;
});

Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="findfilter"></p>
<ul>  
  <li ng-repeat="x in employees | filter:findfilter">  
    {{ x }}  
  </li>  
</ul>  
</div> 
</body>
</html>
output:

To sort in the ascending order we need to set the reverse to false

To sort in the descending order , we need to set the reverse to true.

Default  Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:'+FirstName'">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:

 Note: + means ascending order, - means descending order
Reverse to true means descending order

<tr ng-repeat="employee in employees | orderBy:'FirstName': true">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>


Now, let me add a drop down, on the dropdown change the selected column needs to be sorted


Default Page:


<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        OrderBy :<select ng-model="sortColumn">
            <option value="FirstName">FirstName Asc</option>
            <option value="-Gender">Gender Desc</option>
            <option value="LastName">LastName Asc</option>
             <option value="-salary">salary desc</option>
        </select>
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | orderBy:sortColumn">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code:


/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
                $scope.sortColumn = "FirstName";
});


Output:

Search based on particular Column


Default Page:


<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext">
                <td>{{ employee.FirstName | uppercase}}</td>
                <td>{{ employee.LastName |lowercase }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>

Javascript Code:

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});



Output:


Angular Js filters with Multiple Properties.

Default Page:

<html>
<style type="text/css">
    table, th, td {
        border: 1px solid black;
    }
</style>
<script src="angular.min.js"></script>
<script src="MyJavascript.js"></script>
<body>
    <div ng-app="myApp" ng-controller="mycontroller">
        <input type="text" ng-model="filtertext.LastName"  placeholder="LastName Search"/>
         <input type="text" ng-model="filtertext.Address" placeholder="Address Search"/>
        <input type="checkbox" ng-model="ExactMatch" />
        <table>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Gender</th>
                <th>Address</th>
                <th>DateofBirth(Only Date)</th>
                <th>salary using Number Format</th>
            </tr>
            <tr ng-repeat="employee in employees | filter:filtertext:ExactMatch">
                <td>{{ employee.FirstName }}</td>
                <td>{{ employee.LastName }}</td>
                <td>{{ employee.Gender}}</td>
                <td>{{ employee.Address}}</td>
                <td>{{ employee.DateofBirth | date:"dd/MM/yyyy"}} </td>
                <td>{{ employee.salary  | number:2}} </td>
            </tr>
        </table>
    </div>
</body>
</html>


Javascript Code :

/// <reference path="angular.min.js" />
var myapp = angular.module('myApp', [])
            .controller("mycontroller", function ($scope) {
                var employee = [
        { FirstName: "Rajakond Uday", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth:new Date("November 23 1990"), salary:55000.788 },
        { FirstName: "Kittu", LastName: "Kumar", Gender: "Male", Address: "Chennai", DateofBirth: new Date("November 3 2000"), salary: 55343 },
        { FirstName: "Ab", LastName: "Kumar", Gender: "FeMale", Address: "Delhi", DateofBirth: new Date("August 3 1974"), salary: 29999 },
        { FirstName: "Vijay", LastName: "Kumar", Gender: "Male", Address: "Hyderabad", DateofBirth: new Date("August 3 1974"), salary: 30000 },
        { FirstName: "Sneha", LastName: "Charlapally", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1980"), salary: 38000 },
        { FirstName: "Vamsi", LastName: "Kanchee", Gender: "FeMale", Address: "Hyderabad", DateofBirth: new Date("August 3 1987"), salary: 34000 }
];
                $scope.employees = employee;
});


Output:



at No comments:

Thursday, May 31, 2018

AngularJS CRUD Operation Using ASP.NET MVC

File->New->Project


Click on Ok Button

Design the database as shown below:


Now, Add a new ADO.NET Data Model, From the Model Folder




Click on Add

Click on Next

Click on New Connection

Click on Test Connection. Once the test connection  is success
Click on Ok Button

Click on Next Button


Click on Next Button, Select the table Name on which you want to do CRUD Operations
Click on Finish Button

Now, we need to Add Angular Js Plugin





Click on Install Button

 Once Installed you can see in the script folder
Now, we will Add a EmployeeController and Add the below code

 EmployeeController:

 public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }

         /// <summary>
        /// This method is used to Get the Details of the Employee
        /// </summary>
        /// <returns>JSONRESULT</returns>
        public JsonResult GetEmployeeDetails()
        {
            using (MYDBEntities Obj = new MYDBEntities())
            {
                List<EMP> Emp = Obj.EMPs.ToList();
                return Json(Emp, JsonRequestBehavior.AllowGet);
            }
        }

         /// <summary>
        /// Insert an Employee
        /// </summary>
        /// <param name="Employe">emp</param>
        /// <returns>String</returns>
        [HttpPost]
        public string InsertEmployee(EMP Employe)
        {
            if (Employe != null)
            {
                using (MYDBEntities Obj = new MYDBEntities())
                {
                    Obj.EMPs.Add(Employe);
                    Obj.SaveChanges();
                    return "Employee Added Successfully";
                }
            }
            else
            {
                return "Employee Not Inserted! Try Again";
            }
        }

         /// <summary>
        /// This method is used to Delete an Employee
        /// </summary>
        /// <param name="Employe">emp</param>
        /// <returns>String</returns>
        public string DeleteEmployee(EMP emp)
        {
            if (emp != null)
            {
                using (MYDBEntities Obj = new MYDBEntities())
                {
                    var Emp_ = Obj.Entry(emp);
                    if (Emp_.State == System.Data.Entity.EntityState.Detached)
                    {
                        Obj.EMPs.Attach(emp);
                        Obj.EMPs.Remove(emp);
                    }
                    Obj.SaveChanges();
                    return "Employee Deleted Successfully";
                }
            }
            else
            {
                return "Employee Not Deleted! Try Again";
            }
        }
        public string UpdateEmployee(EMP Employe)
        {
            if (Employe != null)
            {
                using (MYDBEntities Obj = new MYDBEntities())
                {
                    var Emp_ = Obj.Entry(Employe);
                    EMP EmpObj = Obj.EMPs.Where(x => x.EMPNO == Employe.EMPNO).FirstOrDefault();
                    EmpObj.ENAME = Employe.ENAME;
                    EmpObj.JOB = Employe.JOB;
                    EmpObj.DEPTNO = Employe.DEPTNO;
                    EmpObj.MGR = Employe.MGR;
                    EmpObj.SAL = Employe.SAL;
                    Obj.SaveChanges();
                    return "Employee Updated Successfully";
                }
            }
            else
            {
                return "Employee Not Updated! Try Again";
            }
        }
    }

 Javascript Code:
/// <reference path="angular.js" />

 var app = angular.module("myApp", []);
app.controller("myController", function ($scope, $http) {

     $scope.InsertData = function () {
        var Action = document.getElementById("btnSave").getAttribute("value");

         if (Action == "Submit") {
            $scope.Employe = {};
            $scope.Employe.EMPNO = $scope.EmpNumber;
            $scope.Employe.ENAME = $scope.EmpName;
            $scope.Employe.JOB = $scope.EmpJob;
            $scope.Employe.MGR = $scope.EmpMgrId;
            $scope.Employe.SAL = $scope.EmpSalary;
            $scope.Employe.DEPTNO = $scope.EmpDept;
            $http({
                method: "post",
                url: "http://localhost:61289/Employee/InsertEmployee",
                datatype: 'json',
                data: JSON.stringify($scope.Employe)
            }).then(function (response) {
                alert(response.data);
                $scope.Employe.EMPNO = "";
                $scope.Employe.ENAME = "";
                $scope.Employe.JOB = "";
                $scope.Employe.MGR = "";
                $scope.Employe.SAL = "";
                $scope.Employe.DEPTNO = "";
                $scope.GetAllData();
            })
        } else {
            debugger;
            $scope.Employe = {};
            $scope.Employe.ENAME = $scope.EmpName;
            $scope.Employe.JOB = $scope.EmpJob;
            $scope.Employe.MGR = $scope.EmpMgrId;
            $scope.Employe.SAL = $scope.EmpSalary;
            $scope.Employe.DEPTNO = $scope.EmpDept;
            $scope.Employe.EMPNO = document.getElementById("EmpNumber_").value;
            $http({
                method: "post",
                url: "http://localhost:61289/Employee/UpdateEmployee",
                datatype: "json",
                data: JSON.stringify($scope.Employe)
            }).then(function (response) {
                alert(response.data);
                $scope.Employe.EMPNO = "";
                $scope.Employe.ENAME = "";
                $scope.Employe.JOB = "";
                $scope.Employe.MGR = "";
                $scope.Employe.SAL = "";
                $scope.Employe.DEPTNO = "";
                $scope.GetAllData();
                document.getElementById("btnSave").setAttribute("value", "Submit");
                document.getElementById("btnSave").style.backgroundColor = "cornflowerblue";
                document.getElementById("spn").innerHTML = "Add New Employee";
            })
        }
    }

     $scope.GetAllData = function () {
        $http({
            method: "post",
            url: "http://localhost:61289/Employee/GetEmployeeDetails"
        }).then(function (response) {
            $scope.employees = response.data;
        }, function () {
            alert("Error Occur");
        })
    };

     $scope.DeleteEmp = function (Emp) {
        $http({
            method: "post",
            url: "http://localhost:61289/Employee/DeleteEmployee",
            datatype: "json",
            data: JSON.stringify(Emp)
        }).then(function (response) {
            alert(response.data);
            $scope.GetAllData();
        })
    };

     $scope.UpdateEmp = function (Emp) {
        document.getElementById("EmpNumber_").value = Emp.EMPNO;
        $scope.EmpName = Emp.ENAME;
        $scope.EmpJob = Emp.JOB;
        $scope.EmpMgrId = Emp.MGR;
        $scope.EmpSalary = Emp.SAL;
        $scope.EmpNumber = Emp.EMPNO;
        $scope.EmpDept = Emp.DEPTNO;
        document.getElementById("btnSave").setAttribute("value", "Update");
        document.getElementById("btnSave").style.backgroundColor = "Yellow";
        document.getElementById("spn").innerHTML = "Update Employee Information";
    }

})
You may get Error in the connection String, please make sure that your connection string is Correct

 <connectionStrings>
    <add name="MYDBEntities" connectionString="metadata=res://*/;provider=System.Data.SqlClient;provider connection string=&quot;data source=DESKTOP-HJAK1FL\SQLEXPRESS;initial catalog=MYDB;persist security info=True;user id=sa;Password=1234;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

  </connectionStrings>
Index:
@{
    ViewBag.Title = "Index";
}
<script src="~/scripts/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="~/scripts/CrudOperation.js"></script>
<style>
    .btn-space {
        margin-left: -5%;
        background-color: blue;
        font-size: large;
    }
</style>
<div ng-app="myApp">
    <div ng-controller="myController" ng-init="GetAllData()" class="divList">
        <p class="divHead">Employee Details</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>Employee Number</b>
                </td>
                <td>
                    <b>Emp Name</b>
                </td>
                <td>
                    <b>Job</b>
                </td>
                <td>
                    <b>Salary</b>
                </td>
                <td>
                    <b>Actions</b>
                </td>
            </tr>
            <tr ng-repeat="Emp in employees">
                <td>
                    {{Emp.EMPNO}}
                </td>
                <td>
                    {{Emp.ENAME}}
                </td>
                <td>
                    {{Emp.JOB}}
                </td>
                <td>
                    {{Emp.SAL}}
                </td>
                <td>
                    <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                    <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
                </td>
            </tr>
        </table>
        <div class="form-horizontal" role="form">
            <div class="container">
                <div class="row">
                    <h2>
                        <span id="spn">Add New Employee</span>
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Emp Number:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmpId" placeholder="Employee Number" ng-model="EmpNumber">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Emp Name:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmpName" placeholder="Employee Name" ng-model="EmpName">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Job:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputJob" placeholder="Employee Designation" ng-model="EmpJob">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Manager ID:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputMgrId" placeholder="Id of the Manager" ng-model="EmpMgrId">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Salary :</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputSalaryId" placeholder="Salary of the Employoee" ng-model="EmpSalary">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Dept Number :</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputDeptId" placeholder="Department ID of the Employoee" ng-model="EmpDept">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Html.Hidden("EmpNumber_")
</div>

Output:



at No comments:
Subscribe to: Posts (Atom)

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...

  • SUPER AGGREGATES IN SQL SERVER
    Super aggregates: Are used to calculate aggregates of aggregates There are two super aggregates functions Roll Up Cube When there is a singl...
  • Solid Priciples
    SOLID principles allows object oriented programming implementation in an  efficient better way into project development      S-->Single R...
  • Working with PDF IN ASP.NET MVC with Entity FrameWork.
    With this example you can create pdf and print pdf. If You are using ASP.NET MVC , PDF can be created by using Rotativa  Rotativa is a ...