Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn MVC Using Angular xEditable

DZone's Guide to

Learn MVC Using Angular xEditable

We continue our look at MVCs by learning how to create editable elements using the open-source Angular xEditable tool available on GitHub.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Introduction

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

  • HTML Control
  • Table

Angular-xEditable

Angular Directives allows you to create editable elements. 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 controls from Angular UI Bootstrap.
  • It supports HTM5 controls (text, textarea, select and checkbox, etc.).

Follow the steps given below:

  • Create an MVC project.
  • Configure Angular xEditable.
  • Work with Angular xEditable.

Create MVC Project

Open Visual Studio 2015.


MVC


Go to New menu. Click New and then Project. Now, it will open a New Project Window.


MVC


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


MVC


One more window should appear. Select MVC Template in this popup and click OK. 

Configure Angular xEditable

We will download the xEditable plug in from the following link:

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

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

My files

<script src="~/App/App.module.js"></script>
<script src="~/App/App.config.js"></script>
<script src="~/App/HtmlctrlController.js"></script>
<script src="~/App/tableController.js"></script>

Angular Module Code

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

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

Angular Controller Code

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

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

The code to set the theme in this Application is given below.

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

Work With Angular xEditable

HTML Control

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

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

Here, we can see some basic HTML controls.

HTML Code

<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>  
lt;a href="" editable-number="xform.htmlctrl.number" e-min="18">{{ xform.htmlctrl.number || 'empty' }}</a>  
<a href="" editable-color="xform.htmlctrl.color">{{ xform.htmlctrl.color || 'empty' }}</a>  

  <a href="" editable-date="xform.htmlctrl.date">{{ xform.htmlctrl.date || 'empty' }}</a>  
   <a href="" editable-text="xform.htmlctrl.name">{{ xform.htmlctrl.name || 'empty' }}</a>  
    <a href="" editable-textarea="xform.htmlctrl.desc" e-rows="3" e-cols="30">{{ xform.htmlctrl.desc || 'no description' }}    </a>  
<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>  
t;a href="" editable-textarea="xform.htmlctrl.desc" e-rows="3" e-cols="30">{{ xform.htmlctrl.desc || 'no description' }}    </a>   

Write and Angular control and assign some values to the model. Usually, we have to 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.

JavaScript Code

vm.htmlctrl = {  
        email: 'email@example.com',  
        tel: '123-45-67',  
        number: 29,  
        range: 10,  
        url: 'http://example.com',  
        search: 'blabla',  
        date:new Date(),  
        color: '#6a4415',  
        desc: 'Click and edit the details. '  
    };  

    vm.htmlctrl2 = {  
        status: 2  
    };  

    vm.statuses = [  
      { value: 1, text: 'status1' },  
      { value: 2, text: 'status2' },  
      { value: 3, text: 'status3' },  
      { value: 4, text: 'status4' }  
    ];  

    vm.showStatus = function () {  
        var selected = $filter('filter')(vm.statuses, { value: vm.htmlctrl2.status });  
        return (vm.htmlctrl.status && selected.length) ? selected[0].text : 'Not set';  
    };  

    // select remote  
    // -----------------------------------   

    vm.htmlctrl3 = {  
        id: 4,  
        text: 'admin'   
    };  

    vm.groups = [];  

    vm.loadGroups = function () {  
        return vm.groups.length ? null : $http.get('server/xeditable-groups.json').success(function (data) {  
            vm.groups = data;  
        });  
    };  

    $scope.$watch('htmlctrl3.id', function (newVal, oldVal) {  
        if (newVal !== oldVal) {  
            var selected = $filter('filter')(vm.groups, { id: vm.htmlctrl3.id });  
            vm.htmlctrl3.text = selected.length ? selected[0].text : null;  
        }  
    });   

I have used JSON data for editable-Select, and the files are given below.

[{  
  "id": 1,  
  "text": "user"  
}, {  
  "id": 2,  
  "text": "customer"  
}, {  
  "id": 3,  
  "text": "vip"  
}, {  
  "id": 4,  
  "text": "admin"  
}]    

Proceed, as shown below.

<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>"   

Run the Application. In Output 1, we have archived the binding data to our HTML file.

Output 1

MVC


If you have any questions on configuration, refer to the links:

Table

We can you use xEditable and proceed.

Editable Row

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

HTML code

<table class="table table-bordered table-hover bg-white">  

                   <tr style="font-weight: bold">  
                       <td style="width:35%">Name</td>  
                       <td style="width:20%">Status</td>  
                       <td style="width:20%">Group</td>  
                       <td style="width:25%">Edit</td>  
                   </tr>  
                   <tr ng-repeat="user in xtable.users">  
                       <td>  
                           <!-- editable username (text with validation)-->  
                           <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="xtable.checkName($data, user.id)" e-required="">{{ user.name || 'empty' }}</span>  
                       </td>  
                       <td>  
                           <!-- editable status (select-local)-->  
                           <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>  
                       </td>  
                       <td>  
                           <!-- editable group (select-remote)-->  
                           <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>  
                       </td>  
                       <td style="white-space: nowrap">  
                           <!-- form-->  
                           <form editable-form="" name="rowform" onbeforesave="xtable.saveUser($data, user.id)" ng-show="rowform.$visible" shown="xtable.inserted == user" class="form-buttons form-inline">  
                               <button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">  
                                   Save  
                               </button>  
                               <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default">  
                                   Cancel  
                               </button>  
                           </form>  
                           <div ng-show="!rowform.$visible" class="buttons">  
                               <button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info">  
                                   Edit  
                               </button>  
                               <button ng-click="xtable.removeUser($index)" title="Delete" class="btn btn-sm btn-danger">  
                                   Delete  
                               </button>  
                           </div>  
                       </td>  
                   </tr>  
               </table>  
               <button ng-click="xtable.addUser()" class="btn btn-default">Add row</button>   

Angular Controller code

vm.users = [  

      { id: 1, name: ' user1', status: 2, group: 4, groupName: 'admin' },  
      { id: 2, name: ' user2', status: undefined, group: 3, groupName: 'vip' },  
      { id: 3, name: ' user3', status: 2, group: null }  
    ];  

    vm.statuses = [  
      { value: 1, text: 'status1' },  
      { value: 2, text: 'status2' },  
      { value: 3, text: 'status3' },  
      { value: 4, text: 'status4' }  
    ];  

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

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

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

    vm.checkName = function (data, id) {  
        if (id === 2 && data !== 'awesome') {  
            return 'Username 2 should be `awesome`';  
        }  
    };   

To delete a row in the table:

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

And to add a new row:

vm.addUser = function () {  
        vm.inserted = {  
            id: vm.users.length + 1,  
            name: '',  
            status: null,  
            group: null,  
            isNew: true  
        };  
        vm.users.push(vm.inserted);  
    };   

Run the Application. If you the click Add Row button, it will add one new row in this table. Suppose we can edit or delete our table in the same way. The save button enables you to do so 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

<table class="table table-bordered table-hover bg-white">  
                    <tr style="font-weight: bold; white-space: nowrap">  
                        <!-- username header-->  
                        <td style="width:40%">  
                            Name  
                            <form editable-form="" name="nameform" onaftersave="xtable.saveColumn('name')" ng-show="nameform.$visible">  
                                <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-info">save</button>  
                                <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">cancel</button>  
                            </form>  
                            <button ng-show="!nameform.$visible" ng-click="nameform.$show()" class="btn  btn-info">  
                               Edit  
                            </button>  
                        </td>  
                        <!-- status header-->  
                        <td style="width:30%">  
                            Status  
                            <form editable-form="" name="statusform" onaftersave="xtable.saveColumn('status')" ng-show="statusform.$visible">  
                                <button type="submit" ng-disabled="statusform.$waiting" class="btn btn-info">save</button>  
                                <button type="button" ng-disabled="statusform.$waiting" ng-click="statusform.$cancel()" class="btn btn-default">cancel</button>  
                            </form>  
                            <button ng-show="!statusform.$visible" ng-click="statusform.$show()" class="btn  btn-info">  
                                Edit  
                            </button>  
                        </td>  
                        <!-- group header-->  
                        <td style="width:30%">  
                            Group  
                            <form editable-form="" name="groupform" onaftersave="xtable.saveColumn('group')" ng-show="groupform.$visible">  
                                <button type="submit" ng-disabled="groupform.$waiting" class="btn btn-info">save</button>  
                                <button type="button" ng-disabled="groupform.$waiting" ng-click="groupform.$cancel()" class="btn btn-default">cancel</button>  
                            </form>  
                            <button ng-show="!groupform.$visible" ng-click="groupform.$show()" class="btn btn-info">  
                                Edit  
                            </button>  
                        </td>  
                    </tr>  
                    <tr ng-repeat="user in xtable.users">  
                        <td>  

                            <span editable-text="user.name" e-name="name" e-form="nameform" onbeforesave="xtable.checkName($data)">{{ user.name || 'empty' }}</span>  
                        </td>  
                        <td>  
                            <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>  
                        </td>  
                        <td>  
                            <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>  
                        </td>  
                    </tr>  
                </table>   

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

Angular Controller Code

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

Output 3

MVC

Editable Table

Here, we'll put the whole table into <form> tag with the editable-form attribute. It allows you to retrieve all the changes.

HTML Code

<form editable-form="" name="tableform" onaftersave="xtable.saveTable()" oncancel="xtable.cancel()">  
                    <!-- table-->  
                    <table class="table table-bordered table-hover bg-white">  
                        <tr style="font-weight: bold">  
                            <td style="width:40%">Name</td>  
                            <td style="width:30%">Status</td>  
                            <td style="width:30%">Group</td>  
                            <td style="width:30%">  
                                <span ng-show="tableform.$visible">Action</span>  
                            </td>  
                        </tr>  
                        <tr ng-repeat="user in xtable.users | filter:filterUser">  
                            <td>  
                                <!-- editable username (text with validation)-->  
                                <span editable-text="user.name" e-form="tableform" onbeforesave="xtable.checkName($data, user.id)">{{ user.name || 'empty' }}</span>  
                            </td>  
                            <td>  
                                <!-- editable status (select-local)-->  
                                <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>  
                            </td>  
                            <td>  
                                <!-- editable group (select-remote)-->  
                                <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>  
                            </td>  
                            <td>  
                                <button type="button" ng-show="tableform.$visible" ng-click="deleteUser(user.id)" class="btn btn-danger pull-right">  
                                    Delete  
                                </button>  
                            </td>  
                        </tr>  
                    </table>  
                    <!-- buttons-->  
                    <div class="btn-edit">  
                        <button type="button" ng-show="!tableform.$visible" ng-click="tableform.$show()" class="btn btn-default">edit</button>  
                    </div>  
                    <div ng-show="tableform.$visible" class="btn-form">  
                        <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-info">save</button>  
                        <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>  
                    </div>  
                </form>   

Angular Controller Code

vm.filterUser = function (user) {  
        return user.isDeleted !== true;  
    };  
    vm.deleteUser = function (id) {  
        var filtered = $filter('filter')(vm.users, { id: id });  
        if (filtered.length) {  
            filtered[0].isDeleted = true;  
        }  
    };  
    vm.cancel = function () {  
        for (var i = vm.users.length; i--;) {  
            var user = vm.users[i];  
            if (user.isDeleted) {  
                delete user.isDeleted;  
            }   
            if (user.isNew) {  
                vm.users.splice(i, 1);  
            }  
        }  
    };  
    vm.saveTable = function () {  
        var results = [];  
        for (var i = vm.users.length; i--;) {  
            var user = vm.users[i];  
            if (user.isDeleted) {  
                vm.users.splice(i, 1);  
            }   
            if (user.isNew) {  
                user.isNew = false;  
            }  


            alert('Saving Table...');  
        }  

        return $q.all(results);  
    };   

Run the Application

Output 4

Before we implemented the editable table:

MVC

After we implemented the editable table:

MVC


Note: New row data will be added in JSON format. Afterward, click the Save button. If we need, we can validate the correct data. Don’t forget to add the “editable” keyword, using Angular xEditable.

For the 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.

Happy Coding!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
angular ,json ,mvc ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}