Learn MVC Using Angular xEditable


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

  • HTML Control
  • Table


This is angular directives allows you to create editable element. Such technique is Click to edit or edit to place. It is based on idea of x-editable.


  • It doesn’t depend on any libraries
  • It support bootstrap CSS
  • We can include some extra control from Angular UI Bootstrap
  • It will support must of html5 controls (text, textarea, select, and check box….etc.)

Follow the steps we can use xeditable in Angular JS in MVC.

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

Create MVC Project

Open Visual studio 2015


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


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.


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.

My files
Angular Module Code

Add dependence “’xeditable’” keyword in angular module after refer the plug in

Angular Controller Code:

Inject the “editableOptions”, “editableThemes” keyword, it will help to improve our UI level

function htmlctrlController($scope, editableOptions, editableThemes, $filter, $http)Set theme in this application, like given below code

Work with Angular xeditable

HTML control

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

Here, we can see some HTML basic control.

HTML code


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

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

Proceed, as shown below.

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

Output 1


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


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

Angular Controller code

Delete row in the table

Add the new row

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


Editable Column

We can edit the instance of table column on time.

HTML code

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

Angular Controller code


Output 3


Editable Table

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

HTML code

Angular Controller code

Run the Application

Output 4

Before editable table


After editable table



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.


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.

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.