Pre-Requisites

Following software will be required to implement this tutorial

1. Visual Studio 2017 with .NET framework 4.6.1
2. Internet Information Server (IIS)
3. JQuery
4. KnockoutJs
5. HTTP Browser Application (IE, Firefox, Chrome)

Start New Visual Studio Project

Open Microsoft Visual Studio 2017 and

1. Start a new project by clicking File->New->Project menu item. This will open “New Project” window.
2. Select ASP .NET Web Application (.NET Framework)
3. Select .NET Framework 4.6.1 from selection list and Click Ok.
4. This will open “New ASP .NET Web Application” window.
5. Select “MVC” project type with “No Authentication” options selected.
6. Click Ok

A new project will be setup.

Install WindnTrees.Abstraction Nuget Package

Open “Package Manager Console” and install “WindnTrees.Abstraction” package.

install-package WindnTrees.Abstraction -version 1.1.7

Make sure that you’ve already installed latest and compatible package of jQuery and KnockoutJs libraries.

Update: 2018-07-13

WindnTrees .NET Core nuget package is available for download to implement ASP .NET Core based applications.

install-package WindnTrees.Core

Note: nuget package manager does not install windntrees1.0.0.min.js in correct project scripts library directory, make sure you recover script files from C:\Users\<<Username>>\.nuget\packages\.

Setup Database

Design a very simple database with Employee entity table using SQL Server Management Studio as mentioned below:

Employee

Id (PK)		nvarchar(100)
Name		nvarchar(100)
Salary		money
Designation	nvarchar(100)

ADO.NET Entity Data Model

Add “ADO.NET Entity Data Model” by

1. Right clicking on project and select Add->New Item from popup menu.
2. Select “ADO.NET Entity Data Model” from project items.
3. Enter appropriate name for Model, and Click Add
4. This will open “Entity Data Model Wizard” window.
5. Select “EF Designer from Database” and Click “Next” button.
6. Select or create a “New Connection” for database connectivity and Click Next
7. “Entity Data Model Wizard” window will be displayed with tables list.
8. Select “Employee” table from the window and click “Finish”.

Setup Entity Repository

Add “Repository” folder and write “EmployeeRepository” entity repository class required for controller integration. Extend “EmployeeRepository” from “EntityRepository<Employee>” with type information.

After extending

1. Override and implement QueryRecords for record filtering, and
2. Override and implement SortRecords for record sorting.

This will result in following repository class.

public class EmployeeRepository : EntityRepository
{
        public EmployeeRepository()
            : base(new windntreesEntities())
        { }

        protected override IQueryable QueryRecords(IQueryable query, SearchFilter searchQuery = null)
        {
            if (searchQuery != null)
            {
                if (!string.IsNullOrEmpty(searchQuery.keyword))
                {
                    query = query.Where(l => l.Name.Contains(searchQuery.keyword) || l.Designation.Contains(searchQuery.keyword));
                }
            }
                    
            return query;
        }

        protected override IOrderedQueryable SortRecords(IQueryable query, SearchFilter searchQuery = null)
        {
            return query.OrderBy(l => l.Name);
        }
}

Integrate Server Side Controller Code

Add Employee “Controller” by

1. Right clicking on project “Controllers” and select Add->Controller.
2. Select “MVC Empty” controller and click Add.
3. Enter controller name “EmployeeController” on “Add Controller” window and Click Add.
4. This will setup “EmployeeController” within controllers list.

Inherit “EmployeeController” from “CRUDLController<Employee>” instead of “Controller”. Resolve namespace by adding “using Abstraction.Controllers;”.

Override GetRepository function in EmployeeController and return new EmployeeRepository() instance. This will result in following controller code.

public class EmployeeController : CRUDLController<Employee>
{
        protected override ContentRepository GetRepository()
        {
            return new EmployeeRepository();
        }

        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }
}

Add view for “EmployeeController” Index action and get ready for client side view and controller integration.

Write HTML Markup for View Integration

Download following HTML markup view for presentation integration.

Integrate Client Side Controller Code

Write client side Employee data observer model based on KnockoutJs library and write employees view based on WindnTrees CRUDView and CRUDObserver implementation by adding following code.

function Employee(data) {
    var instance = this;

    instance._datakey = data.Id;

    instance.Id = ko.observable(data.Id);
    instance.Name = ko.observable(data.Name);
    instance.Salary = ko.observable(data.Salary);
    instance.Designation = ko.observable(data.Designation);
}


        /**
         * CRUDView reference program implementation.
         *
         */
        var employees = new CRUDView({
            'uri': '/employee',
            'observer': new CRUDObserver({ 'contentType': new Employee({}), 'messages': new MessageRepository() })
        });

        $(function () {

            ko.validation.init({
                insertMessages: false,
                decorateElement: true,
                errorElementClass: 'error'
            });

            try {

                ko.applyBindings(employees);
            }
            catch (e) {

                console.log(e.message);
            }

            employees.list(1);
           //employees.load();
        });

Conclusion

In this tutorial we learnt how to implement CRUD view in a CRUD2CRUD configuration using WindnTrees abstraction library. In simplest form the implementation will require to write a data access repository, server side CRUD controller, client side CRUD controller and view integration.

Download complete source code here