In this article, We will implement CRUD (Create, Read, update and delete) operations with Knockout.js, ASP.NET Web API, Entity Framework 5.0 Database First Approach. For Add or Edit operation, A modal dialog having WYSIWYG Html editor is used. User can enter information and submit it. It should look like the image below:

HTML Editor:

For simplicity, We are going to use same app to consume Web API. We are going to use jHtmlArea Editor built on top of jQuery. To install jHtmlArea, run the following command in the Package Manager Console Install-Package jHtmlArea

Client-Side JavaScript:

If you see default SPA(Single Page Application) template, there are three layers:

In above model, three methods are implemented to save comment(acceptChanges), to cancel the changes(cancelChanges) and to delete comment(deleteComment). We will add a class ‘htmlEditor’ to comment textarea and here it is used to get user entered value.

Conclusion:

We have implemented CRUD operations with knockout.js and asp.net web api. The main tricky part is to load html editor in jquery UI dialog on Add,Edit operations. You can download source code from GitHub. The next step is to validate html input to prevent XSS attack, Check out my next post for this.