Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
ASP.NET

Learn MVC Using Angular xEditable

Introduction

In this article, we will learn MVC using xeditable JSON data, used for HTML element & tables, which are given below.

  • HTML Control
  • Table

Angular-xeditable

Angular Directives allows you to create editable element. It is based on the idea of x-editable.

Features

  • It doesn’t depend on any library.
  • It supports Bootstrap CSS.
  • We can include some extra control from Angular UI Bootstrap.
  • It supports HTM5 controls (text, textarea, select and check box….etc.)

Follow the steps given below.

  • Create MVC project.
  • Configure Angular xeditable.
  • Work with Angular xeditable.

Create MVC Project

Open Visual Studio 2015.

MVC

Go to New menu. Click New & Project. Now, it will open New Project Window.

MVC

You can select ASP.NET Web Application on Framework 4.6. Enter the name of the project in Solution name textbox and click OK button.

MVC

One more Window should appear. Select MVC Template in this popup & click OK button. Now, it starts to play.

Configure Angular xeditable

We will download the xeditable plug in from

Open the _Layout.cshtml and refer the xeditable.js file from the downloaded folder to this view page. 

  1. <link href="~/Plugin/angular-xeditable/dist/css/xeditable.css" rel="stylesheet" />  
  2. <script src="~/Plugin/angular-xeditable/dist/js/xeditable.js"></script>   

vMy files

  1. <script src="~/App/App.module.js"></script>  
  2. <script src="~/App/App.config.js"></script>  
  3. <script src="~/App/HtmlctrlController.js"></script>  
  4. <script src="~/App/tableController.js"></script>   

Angular Module code

Add dependence “'xeditable'” keyword in Angular Module. Refer the plug in files.

  1. var XEdit = angular.module('XEdit', ['ui.router','xeditable']);  

Angular Controller code

Inject the editableOptions, editableThemes keyword and it will help to improve our UI level.

  1. function htmlctrlController($scope, editableOptions, editableThemes, $filter, $http)  

Set the theme in this Application and the code is given below. 

  1. editableOptions.theme = 'bs3';  
  2.     editableThemes.bs3.inputClass = 'input-sm';  
  3.     editableThemes.bs3.buttonsClass = 'btn-sm';  
  4.     editableThemes.bs3.submitTpl = '<button type="submit" class="btn btn-success"><span class="fa fa-check"></span></button>';  
  5.     editableThemes.bs3.cancelTpl = '<button type="button" class="btn btn-default" ng-click="$form.$cancel()">' +  
  6.                                      '<span class="fa fa-times text-muted"></span>' +  
  7.                                    '</button>';   

Work with Angular xeditable

HTML control

Open HTML page, make it design, using Editable attribute and bind the even null values also.

  1. <a href="" editable-email="xform.htmlctrl.email">{{ xform.htmlctrl.email || 'empty' }}</a>  

Here, we can see some HTML basic control.

HTML code

  1. <a href="" editable-tel="xform.htmlctrl.tel" e-pattern="\d{3}-\d{2}-\d{2}" e-title="xxx-xx-xx">{{ xform.htmlctrl.tel || 'empty' }}</a>  
  2. lt;a href="" editable-number="xform.htmlctrl.number" e-min="18">{{ xform.htmlctrl.number || 'empty' }}</a>  
  3. <a href="" editable-color="xform.htmlctrl.color">{{ xform.htmlctrl.color || 'empty' }}</a>  
  4.   
  5.   <a href="" editable-date="xform.htmlctrl.date">{{ xform.htmlctrl.date || 'empty' }}</a>  
  6.    <a href="" editable-text="xform.htmlctrl.name">{{ xform.htmlctrl.name || 'empty' }}</a>  
  7.     <a href="" editable-textarea="xform.htmlctrl.desc" e-rows="3" e-cols="30">{{ xform.htmlctrl.desc || 'no description' }}    </a>  
  8. <a href="" editable-select="xform.htmlctrl3.text" ng-init="xform.loadGroups()" e-ng-options="g.text as g.text for g in xform.groups">{{ xform.htmlctrl3.text || 'not set' }}  </a>  
  9. t;a href="" editable-textarea="xform.htmlctrl.desc" e-rows="3" e-cols="30">{{ xform.htmlctrl.desc || 'no description' }}    </a>   

Writing Angular control & assign some values for the model. Usually, we have use the ng-Model keyword for data binding but in this case, we want to use editable+ControlName.

Editable keyword

Angular/HTML keyword

Descriptions

Editable-controlname

Ng-Model

Binding the data

e-ng-options

Ng-options

Binding the value as list

e-pattern

Ng-pattern

Using Validation

e-title

Title

Set as placeholder

e-min

Min

Set minimum values

JS code 

  1. vm.htmlctrl = {  
  2.         email: '[email protected]',  
  3.         tel: '123-45-67',  
  4.         number: 29,  
  5.         range: 10,  
  6.         url: 'http://example.com',  
  7.         search: 'blabla',  
  8.         date:new Date(),  
  9.         color: '#6a4415',  
  10.         desc: 'Click and edit the details. '  
  11.     };  
  12.   
  13.     vm.htmlctrl2 = {  
  14.         status: 2  
  15.     };  
  16.   
  17.     vm.statuses = [  
  18.       { value: 1, text: 'status1' },  
  19.       { value: 2, text: 'status2' },  
  20.       { value: 3, text: 'status3' },  
  21.       { value: 4, text: 'status4' }  
  22.     ];  
  23.   
  24.     vm.showStatus = function () {  
  25.         var selected = $filter('filter')(vm.statuses, { value: vm.htmlctrl2.status });  
  26.         return (vm.htmlctrl.status && selected.length) ? selected[0].text : 'Not set';  
  27.     };  
  28.   
  29.     // select remote  
  30.     // -----------------------------------   
  31.   
  32.     vm.htmlctrl3 = {  
  33.         id: 4,  
  34.         text: 'admin'   
  35.     };  
  36.   
  37.     vm.groups = [];  
  38.   
  39.     vm.loadGroups = function () {  
  40.         return vm.groups.length ? null : $http.get('server/xeditable-groups.json').success(function (data) {  
  41.             vm.groups = data;  
  42.         });  
  43.     };  
  44.   
  45.     $scope.$watch('htmlctrl3.id', function (newVal, oldVal) {  
  46.         if (newVal !== oldVal) {  
  47.             var selected = $filter('filter')(vm.groups, { id: vm.htmlctrl3.id });  
  48.             vm.htmlctrl3.text = selected.length ? selected[0].text : null;  
  49.         }  
  50.     });   

I have used as a JSON data for editable-Select & the files are given below. 

  1. [{  
  2.   "id": 1,  
  3.   "text": "user"  
  4. }, {  
  5.   "id": 2,  
  6.   "text": "customer"  
  7. }, {  
  8.   "id": 3,  
  9.   "text": "vip"  
  10. }, {  
  11.   "id": 4,  
  12.   "text": "admin"  
  13. }]    

Proceed, as shown below. 

  1. <a href="" editable-select="xform.htmlctrl3.text"   
  2. ng-init="xform.loadGroups()"   
  3. e-ng-options="g.text as g.text for g in xform.groups">  
  4. {{ xform.htmlctrl3.text || 'not set' }}    
  5. </a>"   

Run the Application. In the output 1, we have archived the binding data to HTML & proceed.

Output 1

MVC

If you have any doubt for on configuration, refer to the links

Table

We can you use xeditable and proceed

Editable Row

This option is mostly useful for all of us, since end users find it easy to interact this way.

HTML code 

  1. <table class="table table-bordered table-hover bg-white">  
  2.                    <tr style="font-weight: bold">  
  3.                        <td style="width:35%">Name</td>  
  4.                        <td style="width:20%">Status</td>  
  5.                        <td style="width:20%">Group</td>  
  6.                        <td style="width:25%">Edit</td>  
  7.                    </tr>  
  8.                    <tr ng-repeat="user in xtable.users">  
  9.                        <td>  
  10.                            <!-- editable username (text with validation)-->  
  11.                            <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="xtable.checkName($data, user.id)" e-required="">{{ user.name || 'empty' }}</span>  
  12.                        </td>  
  13.                        <td>  
  14.                            <!-- editable status (select-local)-->  
  15.                            <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in xtable.statuses">{{ xtable.showStatus(user) }}</span>  
  16.                        </td>  
  17.                        <td>  
  18.                            <!-- editable group (select-remote)-->  
  19.                            <span editable-select="user.group" e-name="group" onshow="xtable.loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in xtable.groups">{{ xtable.showGroup(user) }}</span>  
  20.                        </td>  
  21.                        <td style="white-space: nowrap">  
  22.                            <!-- form-->  
  23.                            <form editable-form="" name="rowform" onbeforesave="xtable.saveUser($data, user.id)" ng-show="rowform.$visible" shown="xtable.inserted == user" class="form-buttons form-inline">  
  24.                                <button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">  
  25.                                    Save  
  26.                                </button>  
  27.                                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default">  
  28.                                    Cancel  
  29.                                </button>  
  30.                            </form>  
  31.                            <div ng-show="!rowform.$visible" class="buttons">  
  32.                                <button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info">  
  33.                                    Edit  
  34.                                </button>  
  35.                                <button ng-click="xtable.removeUser($index)" title="Delete" class="btn btn-sm btn-danger">  
  36.                                    Delete  
  37.                                </button>  
  38.                            </div>  
  39.                        </td>  
  40.                    </tr>  
  41.                </table>  
  42.                <button ng-click="xtable.addUser()" class="btn btn-default">Add row</button>   

Angular Controller code 

  1. vm.users = [  
  2.       { id: 1, name: ' user1', status: 2, group: 4, groupName: 'admin' },  
  3.       { id: 2, name: ' user2', status: undefined, group: 3, groupName: 'vip' },  
  4.       { id: 3, name: ' user3', status: 2, group: null }  
  5.     ];  
  6.   
  7.     vm.statuses = [  
  8.       { value: 1, text: 'status1' },  
  9.       { value: 2, text: 'status2' },  
  10.       { value: 3, text: 'status3' },  
  11.       { value: 4, text: 'status4' }  
  12.     ];  
  13.   
  14.     vm.groups = [];  
  15.     vm.loadGroups = function () {  
  16.         return vm.groups.length ? null : $http.get('server/xeditable-groups.json').success(function (data) {  
  17.             vm.groups = data;  
  18.         });  
  19.     };  
  20.   
  21.     vm.showGroup = function (user) {  
  22.         if (user.group && vm.groups.length) {  
  23.             var selected = $filter('filter')(vm.groups, { id: user.group });  
  24.             return selected.length ? selected[0].text : 'Not set';  
  25.         } else {  
  26.             return user.groupName || 'Not set';  
  27.         }  
  28.     };  
  29.   
  30.     vm.showStatus = function (user) {  
  31.         var selected = [];  
  32.         if (user.status) {  
  33.             selected = $filter('filter')(vm.statuses, { value: user.status });  
  34.         }  
  35.         return selected.length ? selected[0].text : 'Not set';  
  36.     };  
  37.   
  38.     vm.checkName = function (data, id) {  
  39.         if (id === 2 && data !== 'awesome') {  
  40.             return 'Username 2 should be `awesome`';  
  41.         }  
  42.     };   

Delete row in the table 

  1. vm.removeUser = function (index) {  
  2.         vm.users.splice(index, 1);  
  3.     };   

Add the new row 

  1. vm.addUser = function () {  
  2.         vm.inserted = {  
  3.             id: vm.users.length + 1,  
  4.             name: '',  
  5.             status: null,  
  6.             group: null,  
  7.             isNew: true  
  8.         };  
  9.         vm.users.push(vm.inserted);  
  10.     };   

Run the Application. If you click Add row button, it will add one new row in this table. Suppose, we can edit or delete in same way. Save button enables, when you are going to edit a row.

Output 2

MVC

Editable Column

We can edit the instance of table column on time.

HTML code 

  1. <table class="table table-bordered table-hover bg-white">  
  2.                     <tr style="font-weight: bold; white-space: nowrap">  
  3.                         <!-- username header-->  
  4.                         <td style="width:40%">  
  5.                             Name  
  6.                             <form editable-form="" name="nameform" onaftersave="xtable.saveColumn('name')" ng-show="nameform.$visible">  
  7.                                 <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-info">save</button>  
  8.                                 <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">cancel</button>  
  9.                             </form>  
  10.                             <button ng-show="!nameform.$visible" ng-click="nameform.$show()" class="btn  btn-info">  
  11.                                Edit  
  12.                             </button>  
  13.                         </td>  
  14.                         <!-- status header-->  
  15.                         <td style="width:30%">  
  16.                             Status  
  17.                             <form editable-form="" name="statusform" onaftersave="xtable.saveColumn('status')" ng-show="statusform.$visible">  
  18.                                 <button type="submit" ng-disabled="statusform.$waiting" class="btn btn-info">save</button>  
  19.                                 <button type="button" ng-disabled="statusform.$waiting" ng-click="statusform.$cancel()" class="btn btn-default">cancel</button>  
  20.                             </form>  
  21.                             <button ng-show="!statusform.$visible" ng-click="statusform.$show()" class="btn  btn-info">  
  22.                                 Edit  
  23.                             </button>  
  24.                         </td>  
  25.                         <!-- group header-->  
  26.                         <td style="width:30%">  
  27.                             Group  
  28.                             <form editable-form="" name="groupform" onaftersave="xtable.saveColumn('group')" ng-show="groupform.$visible">  
  29.                                 <button type="submit" ng-disabled="groupform.$waiting" class="btn btn-info">save</button>  
  30.                                 <button type="button" ng-disabled="groupform.$waiting" ng-click="groupform.$cancel()" class="btn btn-default">cancel</button>  
  31.                             </form>  
  32.                             <button ng-show="!groupform.$visible" ng-click="groupform.$show()" class="btn btn-info">  
  33.                                 Edit  
  34.                             </button>  
  35.                         </td>  
  36.                     </tr>  
  37.                     <tr ng-repeat="user in xtable.users">  
  38.                         <td>  
  39.                            
  40.                             <span editable-text="user.name" e-name="name" e-form="nameform" onbeforesave="xtable.checkName($data)">{{ user.name || 'empty' }}</span>  
  41.                         </td>  
  42.                         <td>  
  43.                             <span editable-select="user.status" e-name="status" e-form="statusform" e-ng-options="s.value as s.text for s in xtable.statuses">{{ xtable.showStatus(user) }}</span>  
  44.                         </td>  
  45.                         <td>  
  46.                             <span editable-select="user.group" e-name="group" onshow="xtable.loadGroups()" e-form="groupform" e-ng-options="g.id as g.text for g in xtable.groups">{{ xtable.showGroup(user) }}</span>  
  47.                         </td>  
  48.                     </tr>  
  49.                 </table>   

Once you click Edit button given above the table column header, it will enable to edit mode.

Angular Controller code 

  1. vm.saveColumn = function (column) {  
  2.         var results = [];  
  3.         angular.forEach(vm.users, function (user) {  
  4.             alert('Saving column: ' + column);  
  5.         });  
  6.         return $q.all(results);  
  7.     };   

Output 3

MVC

Editable Table

The whole table into <from > tag with editable-from attribute. It allows to retrieve all the changes.

HTML code 

  1. <form editable-form="" name="tableform" onaftersave="xtable.saveTable()" oncancel="xtable.cancel()">  
  2.                     <!-- table-->  
  3.                     <table class="table table-bordered table-hover bg-white">  
  4.                         <tr style="font-weight: bold">  
  5.                             <td style="width:40%">Name</td>  
  6.                             <td style="width:30%">Status</td>  
  7.                             <td style="width:30%">Group</td>  
  8.                             <td style="width:30%">  
  9.                                 <span ng-show="tableform.$visible">Action</span>  
  10.                             </td>  
  11.                         </tr>  
  12.                         <tr ng-repeat="user in xtable.users | filter:filterUser">  
  13.                             <td>  
  14.                                 <!-- editable username (text with validation)-->  
  15.                                 <span editable-text="user.name" e-form="tableform" onbeforesave="xtable.checkName($data, user.id)">{{ user.name || 'empty' }}</span>  
  16.                             </td>  
  17.                             <td>  
  18.                                 <!-- editable status (select-local)-->  
  19.                                 <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in xtable.statuses">{{ xtable.showStatus(user) }}</span>  
  20.                             </td>  
  21.                             <td>  
  22.                                 <!-- editable group (select-remote)-->  
  23.                                 <span editable-select="user.group" e-form="tableform" onshow="xtable.loadGroups()" e-ng-options="g.id as g.text for g in xtable.groups">{{ xtable.showGroup(user) }}</span>  
  24.                             </td>  
  25.                             <td>  
  26.                                 <button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">  
  27.                                     Delete  
  28.                                 </button>  
  29.                             </td>  
  30.                         </tr>  
  31.                     </table>  
  32.                     <!-- buttons-->  
  33.                     <div class="btn-edit">  
  34.                         <button type="button" ng-show="!tableform.$visible" ng-click="tableform.$show()" class="btn btn-default">edit</button>  
  35.                     </div>  
  36.                     <div ng-show="tableform.$visible" class="btn-form">  
  37.                         <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>  
  38.                         <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-info">save</button>  
  39.                         <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>  
  40.                     </div>  
  41.                 </form>   

Angular Controller code 

  1. vm.filterUser = function (user) {  
  2.         return user.isDeleted !== true;  
  3.     };  
  4.     vm.deleteUser = function (id) {  
  5.         var filtered = $filter('filter')(vm.users, { id: id });  
  6.         if (filtered.length) {  
  7.             filtered[0].isDeleted = true;  
  8.         }  
  9.     };  
  10.     vm.cancel = function () {  
  11.         for (var i = vm.users.length; i--;) {  
  12.             var user = vm.users[i];  
  13.             if (user.isDeleted) {  
  14.                 delete user.isDeleted;  
  15.             }   
  16.             if (user.isNew) {  
  17.                 vm.users.splice(i, 1);  
  18.             }  
  19.         }  
  20.     };  
  21.     vm.saveTable = function () {  
  22.         var results = [];  
  23.         for (var i = vm.users.length; i--;) {  
  24.             var user = vm.users[i];  
  25.             if (user.isDeleted) {  
  26.                 vm.users.splice(i, 1);  
  27.             }   
  28.             if (user.isNew) {  
  29.                 user.isNew = false;  
  30.             }  
  31.   
  32.               
  33.             alert('Saving Table...');  
  34.         }  
  35.   
  36.         return $q.all(results);  
  37.     };   

Run the Application

Output 4

Before editable table

MVC

After editable table

MVC

Note

New row data will be added in JSON format. Afterwards, click Save button. If we need, we can valid the right data. Don’t forget to add the “editable” keyword, using Angular xeditable.

For source download, click here.

Conclusion

In this article, we have learned MVC, using Angular xeditable. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Up Next
    Ebook Download
    View all
    Learn
    View all