Angular with Asp.Net Core WebAPI has ambiguous models

Question

I have used Angular 8 as frontend and Asp.Net Core WebAPI as backend.

I have a model for rendering / binding / validating UI elements in Angular. I have a model for running CRUD operations with database using Entity Framework Core in WebAPI.

After I submit a UI form, I need to add some business logic on the captured fields and then add / update it to database.

My question is:

In which model format shall I pass the data to WebAPI? database model or do I need to create the same viewmodel in WebAPI as well and send the data as it is captured on UI and add business logic in WebAPI?

If I create viewmodel in WebAPI then there will be 2 identical models, one in Angular project, another in WebAPI and it will result in having 3 models for a single entity (2 viewmodels and 1 database model).

What could be the best approach in this case?

Dragolis · Accepted Answer · 2020-01-05 12:24:04Z

2

It's not that you will have 3 models for a single entity. The view models both in angular and in the webApi are the same and therefore should be treated as one model. It is a common and a very logical approach to use those view models to pass data to the server.

answered Jan 5, 2020 at 12:24

Dragolis

661 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reyan Chougle Over a year ago

So you mean view model should be created in both Angular and WebAPI?

Dragolis Over a year ago

Yes. You could either use some kind of a class generator from a schema or json files. There are existing tools that handle such cases. This could raise complexity and it is sometimes better to just code it manually. In our project we took the latter approach.

Binara Thambugala · Accepted Answer · 2020-01-05 17:25:10Z

Having two View models on both sides is completely okay. Sometimes we might get into a situation, where we need to have additional properties in View models than Entity or lesser properties in View models than Entity. Sometimes we don't need to show all the properties of an Entity on our web page.Therefore, we should use separate view models to overcome this situation. Normally these classes called resource classes.

A resource class is a class that contains only basic information that will be exchanged between client applications and API endpoints, generally in form of JSON data, to represent some particular information.

All responses from API endpoints must return a resource.

It is a bad practice to return the real model representation as the response since it can contain information that the client application does not need or that it doesn’t have permission to have (for example, a user model could return information of the user password, which would be a big security issue).

Then we can use libraries like AutoMapper to handle mapping between objects.(between resource classes and entities)

var categories = await _categoryService.ListAsync();
var resources = _mapper.Map<IEnumerable<Category>, IEnumerable<CategoryResource>>(categories);

return resources;

Collectives™ on Stack Overflow

Angular with Asp.Net Core WebAPI has ambiguous models

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related