Angular JS CRUD Application with ASP.NET Webforms

• Download source code - 538.8 KB

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.

<!-- html template ttable.html -->
<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.