To create a solution on Visual Studio to run a simple CRUD web application using:

• Multitier architecture:
  • Data layer (Entity Framework)
  • Business layer
  • Service layer (WCF)
  • Presentation layer:
    • Pure MVC
    • MVC + jQuery and DataTables
    • MVC + AngularJS
    • WebAPI + MVC + jQuery and DataTables
• Dependency Injection (DI) with Unity to enable the decoupling of each individual layer
• Test-Driven Development (TDD) with an example of Unit Test project for the presentation layer

After creating the projects and setting their dependencies,

the database and table were created and some rows were inserted.

Then, the Entity Framework model was created:

Connection string for the creation of the Entity Framework model (database first):

Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=master;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;ApplicationIntent=ReadWrite;MultiSubnetFailover=False

Useful references:

• Entity Framework
• Calling WCF Services and Entity Framework in ASP.NET MVC Application

For the pure MVC part of the project, the native components of MVC were heavily used, such as Html templates (Razor), views, partial views, layouts, navigation ruled by the controllers, etc. No specific javascript library was used.

List+CRUD

Useful references:

• Learn About ASP.NET MVC
• Introduction to ASP.NET MVC in C#: Basics, Advanced Topics, Tips, Tricks, Best Practices, and More
• ASP.NET MVC 5 Step by Step: Part 3 Product Application Demo Project (CRUD Operation)

For the "MVC + jQuery + Datatables" part of the project, the main javascript library used were jQuery, Datatables and jQueryUI (for the modals). In this case, the main visual part of the 'logic' is concentrated in the script POC_Presentation_MVC\Areas\jQueryDatatables\Scripts\Product\DataTable.js.

List+CRUD

Useful references:

• jQuery
• jQueryUI
• DataTables

For the "MVC + AngularJS" part of the project, the main javascript library used was AngularJS. In this case, the main visual part of the 'logic' is concentrated in the scripts folder POC_Presentation_MVC\Areas\AngularJS\Scripts\app.

List+CRUD

Useful references:

• AngularJS
• Introduction to AngularJS in 50 Examples - part 1
• Introduction to AngularJS in 50 Examples - part 2

For the WebAPI part of the project, a new area was created in the Presentation project. The datatables javascript from the 'MVC + jQuery and DataTables' project was altered to call the CRUD methods from the WebAPI project. The WebAPI project was created using .Net Core library.

Useful references:

• Create a Web API with ASP.NET Core and Visual Studio

To allow the execution of unit tests on each layer, the Unity library was added to the MVC project. Dependency injection (aka Inversion of Control) allows the presentation layer (controllers) to use registered services in runtime, thus enabling the tester to easily decouple the service layer from the presentation layer and use a mock service to reduce the scope of the unit tests.

First, Unity was installed via NuGet:

Then, UnityConfig class was created. This class is responsible for registering the interfaces of the services that will be used by the controllers (in their constructors). The binding is done automatically in runtime by the Unity.Mvc5 library.

Finally, the Global.asax file was to be changed to include UnityConfig.RegisterComponents() method inside Application_Start.

The controller has to be changed to require the IProductService in the constructor. The service will be inserted by Unity (in production environment) or programmatically in the unit tests.

Useful references:

• Dependency Injection with Unity

In order to approximate this project even further with a real-world scenario, a new project was created to allow the execution of unit tests and thus simulate a Test-Driven Development methodology, commonly used amongst IT departments in the industry today. POC_UnitTest project was created inside the solution, and references the presentation layer project and to the Common library were added.

Then, a MockProductService implementing the IProductService was created. This is the mock service that would be used during the tests instead of using the real service implementation (WCF) injected by Unity.

Finally, some unit tests were implemented using the 'AAA' unit test pattern (Arrange, Act, Assert).

The results of the tests can be seen in the Test Explorer tab.

Useful references:

• TDD - Test-Driven Development

This project demonstrated the differences when using MVC only to develop the presentation layer of a web application and when using some of the most popular javascript libraries, such as jQuery with Datatables and AngularJS. Additionally, some of the most common practices used in software development departments today were showcased, such as unit tests and dependency injection.