Introduction
After hours of searching, I couldn't find a simple CRUD application using Angular JS for ASP.NET Webforms. This application gives an insight into developing Single Page applications using Angular JS in ASP.NET.
Using the Code
The code attached herewith can simply be unzipped in a new folder and opened as a website. The application uses a JSON array as a data source. (This can be easily extended to use a web service / web API).
Step-by-step illustration of the code is given below:
- Create a new project and choose a blank ASP.NET Web site as the template in Visual Studio (any edition).
- Using Nuget Package manager, install Angular JS (mine was version 1.6.5). Don't worry, if you don't have Nuget. Just create a folder <Scripts> and unzip the Angular files available in the project.
- The structure of the CRUD application is as below:
- ttable.html --> Contains the HTML template for the table:
- Show the records
- An 'Edit' button to edit the record with Save/Revert option.
- A 'Delete' button to delete the record.
- An 'Add' button to insert a new record with Save/Discard option.
<div style="margin-top:10%;margin-left:10%;">
<h2> Setup Logins </h2>
<table border="1" cellpadding="2">
<tr>
<th>
<button type="button" ng-click="$ctrl.insertrow($index)"> New </button>
</th>
<th></th>
<th> Login </th>
<th>Name </th>
<th>Email</th>
</tr>
<tr ng-show="$ctrl.editrowindex==$index">
<td>
<button type="button" ng-click="$ctrl.ignorerow($index);
$event.stopPropagation();"> Ignore </button>
</td>
<td>
<button type="button" ng-click="$ctrl.addrow($ctrl.newrow);
$event.stopPropagation();"> Save </button>
</td>
<td>
<input placeholder="Login"
type="text" ng-model="$ctrl.newrow.login" />
</td>
<td>
<input placeholder="Name"
type="text" ng-model="$ctrl.newrow.name" />
</td>
<td>
<input placeholder="EmailID"
type="text" ng-model="$ctrl.newrow.emailid" />
</td>
</tr>
<tr ng-repeat="rec in $ctrl.rows | filter: $ctrl.query | orderBy:$ctrl.orderProp">
<td>
<button type="button" ng-show="$ctrl.editrowindex!=$index"
ng-click="$ctrl.deleterow(rec,$index); $event.stopPropagation();">Delete</button>
<button type="button" ng-show="$ctrl.editrowindex==$index"
ng-click="$ctrl.revertrow(rec,$index); $event.stopPropagation();">Revert</button>
</td>
<td>
<button type="button" ng-show="$ctrl.editrowindex!=$index"
ng-click="$ctrl.editrow(rec,$index); $event.stopPropagation();">Edit</button>
<button type="button" ng-show="$ctrl.editrowindex==$index"
ng-click="$ctrl.updaterow(rec,$index); $event.stopPropagation();">Save</button>
</td>
<td>
<label ng-show="$ctrl.editrowindex!=$index"> {{rec.login}}</label>
<input ng-model="rec.login"
type="text" ng-show="$ctrl.editrowindex==$index" />
</td>
<td>{{rec.name}}</td>
<td>{{rec.emailid}}</td>
</tr>
</table>
</div>
- default.js --> Contains the scripts related to Angular JS for binding the component with the data.
// store the data for the table in a JSON array.
var loginlists = [
{
"login": "Lakshmi",
"name": "Lakshmi Sivaraman",
"emailid": "lakshmi@abc.com"
},
{
"login": "Ajay",
"name": "Ajay Gupta",
"emailid": "ajaya@abc.com"
},
{
"login": "Shridhar",
"name": "Sreedharan Nair",
"emailid": "shridhar@abc.com"
},
{
"login": "Lata",
"name": "Lata Mangesh",
"emailid": "lata@abc.com"
},
{
"login": "Ram",
"name": "Ram Kumar",
"emailid": "ram@abc.com"
}
]
var app = angular.module("myapp", []); //create the angular app instance
app.component("ttable", { // create the comonent
templateUrl:'ttable.html' ,
controller: function table_controller ($http) {
this.newrow = {}; // init new row
this.prevrow = {}; // store prev state before modifying
this.editrowindex = -1; // to store the index of row being edited
this.rows = loginlists;
this.orderProp = "name"; // set the column name to sort the table
// delete row method
this.deleterow = function (row, index) {
this.rows.splice(this.rows.indexOf(row), 1);
};
// add row method
this.addrow = function (newrow) {
this.rows.push(newrow);
this.newrow = {};
this.editrowindex = -1;
};
// edit row method
this.editrow = function (row, index) {
this.editrowindex = index;
this.prevrow = angular.copy
(this.rows[this.rows.indexOf(row)]); // use element index and not the row index
}
// update row method
this.updaterow = function (row, index) {
// call to webservice
this.editrowindex = -1;
this.prevrow = {};
}
//revert row method
this.revertrow = function (row, index) {
this.rows[this.rows.indexOf(row)] = angular.copy(this.prevrow);
this.prevrow = {};
this.editrowindex = -1;
}
// insert row method
this.insertrow = function (index) {
this.editrowindex = index;
}
//ignore row method
this.ignorerow = function (index) {
this.editrowindex = -1;
}
}
});
and now finally the default.aspx page that links the JavaScript (Angular) and the template.
<head runat="server">
<title></title>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myapp" ng-cloak>
<ttable></ttable>
</div>
</form>
</body>
Create all the files in the same folder.
Please send your comments.
