Angular GridView Insert Update and Delete in ASP.NET MVC

Angular GridView Insert Update and Delete in ASP.NET MVC

Today, We want to share with you Angular GridView Insert Update and Delete in ASP.NET MVC.
In this post we will show you AngularJS GridView Edit, Update and Delete Example, hear for Insert, Update and Delete in AngularJS we will give you demo and example for implement.
In this post, we will learn about Angular js with ASP.NET MVC Insert,Update, Delete with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.AngularJS – GridView Edit, Update and Delete Example

Simple GridView Example with Row Edit and Delete Options – HTML and PHP

GridView used Mostly Large data of databased.to simple way to handle data.It’s data cross verify to all data in using GridView. GridView is a one type of control to handle data with databased.Mostly it’s used to editing data and easy way to confirm.There are two ways of the databinding in angularjs GridView Control.You have more than many ways to GridView make a ways and AngularJS features.It’s is used to Edit or update row on GridView Control.

READ :  AngularJS Nested ng-repeat Get Multiple checkbox value

GridView is a other stands to lightweight table or GridView.
Angular-GridView is a Package of AngularJS directives that allows you to create editable and GridView elements.

<html>
<head>
<title>Simple GridView Example with Row Edit and Delete Options - HTML & PHP</title>
<script src="js/angular.min.js"></script>
<script src="js/xeditable.js"></script>
<script src="js/angular-mocks.js"></script>

 <link rel="stylesheet" href="css/xeditable.min.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
</head>
<h4>AngularJS - GridView Edit, Update and Delete Example</h4>
<div ng-app="infinityknowapp" ng-controller="GridViewCtrl">
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">

 <!-- start Gridview table -->
 <table class="table table-bordered table-hover table-condensed">
 <tr style="font-weight: bold">
 <td style="width:40%">ngUSER_Name</td>
 <td style="width:30%">ngUSER_Status</td>
 <td style="width:30%">ngUSER_Group</td>
 <td style="width:30%"><span ng-show="tableform.$visible">Action</span></td>
 </tr>
 <tr ng-repeat="user in users | filter:filterUser">
 <td>
 <!-- text with editable username (text with validation) GridView-->
 <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)">
 {{ user.name || 'empty' }}
 </span>
 </td>
 <td>
 <!-- it's JSON OF editable status (select-local) -->
 <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in ng_statuses">
 {{ showStatus(user) }}
 </span>
 </td>
 <td>
 <!-- REMOTE using editable group (select-remote) -->
 <span editable-select="user.group" e-form="tableform" onshow="loadGroups()" e-ng-options="g.id as g.text for g in groups">
 {{ showGroup(user) }}
 </span>
 </td>
 <td><button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">Del</button></td>
 </tr>
 </table>

 <!-- HTML create a buttons(Edit,save,delete) -->
 <div class="btn-edit">
 <button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">
 Data Edit Table
 </button>
 </div>
 <div class="btn-form" ng-show="tableform.$visible">
 <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
 <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">Table Data save</button>
 <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
 </div> 
 
 </form>
</div>
<script>
 var appinfinityknow = angular.module("infinityknowapp", ["xeditable", "ngMockE2E"]);

appinfinityknow.run(function(editableOptions) {
 editableOptions.theme = 'bs3';
});

appinfinityknow.controller('GridViewCtrl', function($scope, $filter, $q, $http) {
$scope.users = [
 {id: 1, name: 'Virat Kohali', status: 2, group: 4, groupName: 'admin_master'},
 {id: 2, name: 'Sachin Tendulakar', status: undefined, group: 3, groupName: 'vip_people'},
 {id: 3, name: 'M S Dhoni', status: 2, group: null}
 ]; 

 $scope.ng_statuses = [
 {value: 1, text: 'PHP Task'},
 {value: 2, text: 'Magento Task'},
 {value: 3, text: 'MYSQL Task'},
 {value: 4, text: 'AngularJS Task'}
 ]; 

 $scope.groups = [];
 $scope.loadGroups = function() {
 return $scope.groups.length ? null : $http.get('/groups').success(function(data) {
 $scope.groups = data;
 });
 };

 $scope.showGroup = function(user) {
 if(user.group && $scope.groups.length) {
 var selected = $filter('filter')($scope.groups, {id: user.group});
 return selected.length ? selected[0].text : 'Not set';
 } else {
 return user.groupName || 'Not set';
 }
 };

 $scope.showStatus = function(user) {
 var selected = [];
 if(user.status) {
 selected = $filter('filter')($scope.ng_statuses, {value: user.status});
 }
 return selected.length ? selected[0].text : 'Not set';
 };

 $scope.checkName = function(data, id) {
 if (id === 2 && data !== 'admin') {
 return "Username 2 (MUST) should be `admin`";
 }
 };

 // The new filter users to show here
 $scope.filterUser = function(user) {
 return user.isDeleted !== true;
 };

 // Now this one is mark user as deleted
 $scope.deleteUser = function(id) {
 var filtered = $filter('filter')($scope.users, {id: id});
 if (filtered.length) {
 filtered[0].isDeleted = true;
 }
 };

 // crate or add New user alloweded
 $scope.addUser = function() {
 $scope.users.push({
 id: $scope.users.length+1,
 name: '',
 status: null,
 group: null,
 isNew: true
 });
 };

 // reset or cancel all changes
 $scope.cancel = function() {
 for (var i = $scope.users.length; i--;) {
 var user = $scope.users[i]; 
 // it's undelete data
 if (user.isDeleted) {
 delete user.isDeleted;
 }
 // record remove new 
 if (user.isNew) {
 $scope.users.splice(i, 1);
 } 
 };
 };

 // Current save edits
 $scope.saveTable = function() {
 var results = [];
 for (var i = $scope.users.length; i--;) {
 var user = $scope.users[i];
 // This function is used to actually delete user
 if (user.isDeleted) {
 $scope.users.splice(i, 1);
 }
 // and then this function can be used mark as not new 
 if (user.isNew) {
 user.isNew = false;
 }

 // request send on server
 results.push($http.post('/saveUser', user)); 
 }

 return $q.all(results);
 };
});

// ------------ Get method for mock $http requests ---------------------
appinfinityknow.run(function($httpBackend) {
 $httpBackend.whenGET('/groups').respond([
 {id: 1, text: 'user_groups'},
 {id: 2, text: 'customer_groups'},
 {id: 3, text: 'vip_groups'},
 {id: 4, text: 'admin_groups'}
 ]);
 
 $httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data) {
 data = angular.fromJson(data);
 return [200, {status: 'ok'}];
 });
});
</script>
<!--body End-->
</body>
</html>

We hope you get an idea about Angular GridView Insert Update and Delete in ASP.NET MVC
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

READ :  C# Console Hello World Application in visual studio

We hope This Post can help you…….Good Luck!.

Add a Comment

Your email address will not be published. Required fields are marked *