AngularJS – CRUD Data Grid III

The goal of this post is to extend the AngularJS CRUD Grid that we created in previous posts:

We will add now the following requirements:

  • # 1 Filter items.
  • # 2 Custom buttons: This will allow us to add button columns that will call the parent controller with the id of the button clicked and the associated item as parameter.

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements.

You can see a live demo here: AngularJS CRUD Grid III demo.

Filters:

All items

image

Items containing the letter ‘c’

image

Custom buttons:

image

Button click, callback that shows a popup:

image

Implementation

Continue reading

Advertisements

AngularJS – CRUD Data Grid II

The goal of this post is to extend the AngularJS CRUD Grid that we created in a previous post:  AngularJS – CRUD Grid I UPDATE:

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.

In that post we wrote a single page application (SPA) to display a list of items inside a grid. The grid allows all the CRUD operations: CreateRead, Update and Delete items. We will add now the following requirements:

  • # 1 Confirmation dialog before deleting an item.
  • # 2 Column ordering.
  • # 3 CRUD Grid as a directive
    • # 3.1 Dynamic columns generation.
    • # 3.2 Column options: Type, visibility, header, mandatory.
  • # 4 Cell editor directive, text and date mode. Use AngularJS date picker in date format columns

Results

You can see a demo here: AngularJS CRUD Grid II demo. I will share the interesting code of the application in this post and one of my next steps will be to upload all the code to GitHub.

Running application

Angular JS CRUD Grid. Dynamic columns

Delete confirmation

Angular JS CRUD Grid. Delete confirmation

Date picker

Angular JS CRUD Grid. Date picker.

Implementation

Continue reading

AutoMapper – Model/ViewModel mapping and validation

The goal of this post is to implement a base class to map and initialize view models using the domain object. This base class should make not only the mapping between the model and the view model but also the validation of the view model using the model annotations.

Each requirement will be implemented in two different base classes, the validation class will inherit from the mapping one as the domain object is needed to validate the view model. It makes sense to split the logic to keep the code cleaner and also to be able to use only the mapping functionality in case that we don’t need the validation.

Result

When this class is implemented we can implement our view models like this:

public class ItemViewModel : BaseEntityMapperViewModel<ItemViewModelItem>
{
    public int Id { getset; }
    public string Name { getset; }
}

The Model

public class Item
{
    [Key]
    public int Id { getset; }
 
    [MaxLength(200)] 
    [Index(IsUnique = true)]
    public string Name { getset; }
}

Sample of usage:

ViewModel – Model

My WebAPI controllers send and receive to the client a view model instance, when a instance needs to be updated in database it needs to be mapped to the domain first. This is because my domain services know nothing about view models:

// Update item
public void Put([FromBody]ItemViewModel updatedItem)
{
    if (!_itemsService.Update(updatedItem.MapToEntity()))
    {
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }
}

Model – ViewModel

When a WebAPI need to load a instance from database and send it to the client, it loads a domain instance that needs to be mapped to a view model:

// Read item by id
public ItemViewModel Get(int id)
{
    var item = _itemsService.Get(id);
    if (item == null)
    {
        throw new HttpResponseException(HttpStatusCode.NotFound);
    }
    return ItemViewModel.MapFromEntity(item);
}

Implementation

Continue reading

AngularJS – CRUD Data Grid I

The goal of this post is to write a single page application (SPA) to display a list of items inside a grid. This grid shall not only display a list of items but also allows all the CRUD operations: Create a new item and Read, Update and Delete for the contained items.

Additional requirements:

  • Show a notification when a server request success or fail.
  • Editing an item: Start editing with a double click and commit the edition with “Enter”.
  • Everything shall be executed without refreshing the web page
  • The complete list of items should only be requested one when the page is loaded.

UPDATE:

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.

This is a screenshot of the AngularJS Crud Grid that we are going to implement:

AngularJS Crud Grid

Implementation

Let’s get our hands dirty, we will cover the following points:

  1. Domain: Entity Framework + Domain Services
  2. Server side: WebAPI + ViewModels
  3. Client side: AngularJS + Bootstrap + Toastr
  4. What’s next?

Continue reading

Single Page Application (SPA) using AngularJS and WebAPI – Architecture

The goal of this post is to clarify an architecture of a single page application using the following technologies:

  • ASP MVC
  • AngularJS
  • WebAPI
  • Entity Framework

The next diagram shows at the left the client side and at the right the server side:

Single Page Application (SPA) using AngularJS and WebAPI – Architecture

 

 The first row is the communication between the different used technologies.

The middle row represent the logic of our application and the last the data containers used on these classes.

Using the previous diagram is easy to see which data each layer uses.

e.g:

  1. The Angular controller can only work with the Angular context.
  2. The WebAPI controller send and receive data in JSON format. The JSON objects are automatically translated to C# view models. The WebAPI controllers are also able to map the view-models to domain objects to use the domain services. WebAPI controllers can also request domain objects to the domain services and translate it to ViewModels c# before sending it back to the client-side in JSON format.

Data containers and layers:

  • AngularJS Context: The context is populated by the angular repository. HTML templates bind to it.
  • ViewModels Json: The data is sent from client to server side and vice versa in JSON format. The WebAPI controller send automatically by default the data in this format. The send and received data in JSON format is mapped automatically to the expected object.
  • ViewModels C#: The data the WebAPI controller send and receive as parameter. The conversion between Json and C# view models is done automatically by the WebAPI controller. This class is a subset of our entity domain objects plus some calculated properties that our views may need. It can be used for example to keep some server-side data hidden on the client-side.
  • Entities: Entity Framework entities or domain specific classes. All the data related to the domain. Theses classes are completely independent of the view. The domain services or application logic must use theses classes. The mapping from and to Entities to c# view models can be done automatically or Auto-mapper.