Sending model to Data Layer for a couple of parameters in AngularJS

In the midst of developing an Angular (v6) project in conjunction with ASP.NET MVC for backend and Entity Framework, I often encounter CRUD operations that involve updating only a handful of fields within an entity. This presents a dilemma in terms of determining the most suitable approach to adhere to best practices for such scenarios. To illustrate, consider an Employee entity with properties like Id, Status, Name, Surname, Job, Department, HireDate, BirthDate, Address, and Updated.

For instance, when dealing with updates to the Status, Department, and Updated fields, there are various approaches that can be taken:

Approach I:

The first method involves creating an instance of employee.ts and populating it in component.ts with only the relevant fields for update. This instance is then passed to service.ts, followed by Controller.cs. Within the controller, the model is received as an Employee entity where the Updated field is set before passing the entity to Service.cs for saving using EF methods.

Approach II:

Alternatively, only the Id, Status, and Department values are sent from Component.ts to service.ts, which are then passed on to the controller as int values (Id's). The controller instantiates a new version of the Employee.cs entity, fills in these three fields along with the Updated field, and passes the entity to Service.cs for saving via EF methods.

Approach III:

This method mirrors Approach II up until Controller.cs. Subsequently, the 3 parameters are forwarded to Service.ts, fetching the corresponding Employee from the database based on the Id parameter. Following this retrieval, the remaining fields are set and the entity is saved.

While all three approaches are viable, selecting the optimal one for Angular projects utilizing EF remains ambiguous. Any insights or recommendations pertaining to this scenario would be highly valued...

Answer №1

Approach 3, also known as

Approach 4: Develop an UpdateEmployeeViewModel containing the primary key and fields to be updated in TypeScript. Transmit this data to the controller for validation, entity loading, transferring values, and saving updates. While Approach 3 suffices for one or two columns, Approach 4 is preferred for more complex updates.

Avoiding approach 1 is crucial due to the risk of code trusting client-passed entities. Service calls can be intercepted and modified, leading to potential tampering and persistence of incorrect data in the database through methods like DbSet.Update or DbSet.Attach.

Similarly, Approach 2 poses issues when updating as entities should accurately reflect their data rows. Incomplete entity updates may unintentionally clear out values or cause conflicts with other methods expecting complete entities loaded from the DB.

Efficiently loading entities by ID can prevent over-optimization, and checking the row version # helps ensure that the entity being updated matches the current DB version. This step is vital for confirming if any other changes were made since the initial client interaction.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the RxJS operator that corresponds to the combination of observableX and observableY being subscribed to asynchronously in a template?

In my component template, I currently have this code snippet: <mat-spinner *ngIf="((facade.user.data$.isLoading | async) || (facade.product.data$.isLoading | async))"></mat-spinner> My goal is to consolidate this union into a single ...

Using Angular, you can incorporate a link declared in the controller directly into your template

Hey there everyone, hope you're having a good morning. As mentioned in the title I am looking to define a link as a string and then use it in the template. Below is the code snippet I have written for it .ts array=["<a href=\"https://exam ...

Is it possible to combine two SQL commands?

I am facing a challenge with my SQL commands in populating a gridview. Initially, I execute a command to select all the IDs that have been successfully filled out by the current user: "SELECT Mod_ID FROM Toewijzing WHERE User_ID = '" + Sessi ...

Unexpected token error due to character sequence disruption from Webpack

Although the title may not be very descriptive, I am currently experimenting with the 'xstate' library and running into an issue with an 'Unexpected token' error in my build result. Here is a snippet from my webpack configuration file ...

Unresponsive error encountered in the FileWriter and FileReader components within the Angular and Ionic framework

Whenever I attempt to utilize the Ionic API example for writing or reading a file, it doesn't seem to work properly. There are no crashes or errors thrown, but the callback functions do not function as expected. Below is an example of the API: ...

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Before clicking the button, this is the initial HTML code for the page: <div id="layerContainer"> </div> After clicking the button, the code changes as shown in the picture here I have been attempting to locate the new button, but I keep rec ...

Move the HTML and CSS files to the 'dist' directory while preserving the original folder structure

I am currently in the process of npm publishing my angular2 application, which is structured as follows. search-app config node_modules src api --index.ts --ping.ts --search.ts model --index.ts --model.ts ...

Error message: TypeScript on the client-side shows an error stating that <object>.default is not a valid

I am currently working on a project that involves browser-side code written in TypeScript and transpiled to JavaScript using the following tsconfig settings: { "compilerOptions": { "target": "es6", ...

Troubleshooting Issue with ASP.NET Web Api: Inconsistent Behavior with Delta<...> and Double Property on "PATCH" Requests

When working with JavaScript client code, I generate the following data: var employee = { FirstName: "Rudolf", Salary: 99 }; This data is then passed through an Ajax call to an MVC Web API Controller Action: using System.Web.Http ...

Dealing with Undefined TypeScript Variables within an array.forEach() loop

Could someone help me understand my issue? I have an array of a specific object, and I am trying to create a new array with just the values from a particular field in each object. I attempted to use the forEach() method on the array, but I keep encounteri ...

Different parameters in an Angular filter pipe

Currently, I am facing a challenge in implementing multiple filters on a pipe for a search result page that retrieves data from an API. How can I integrate different parameters into this filter pipe successfully? Access the application here: https://stack ...

Retrieve the Angular Firebase Document and send it back

I have a question related to retrieving a Document from my FireDatabase. The model I am using is for a user, which looks like this: export class User { useremail: string; userid: string; username: string; constructor(usermail: string, use ...

How can I hide a mat card in Angular when the array is empty?

Below is the code snippet from my Angular HTML file: <mat-card *ngFor="let getCartDetail of getCartDetails" style="margin-bottom: 1em; " > <div class="card-container"> <mat-card-ti ...

Approach to streamlining and making services more flexible

Currently, I am immersed in a complex Angular 2 endeavor that requires fetching various types of objects from a noSQL database. These objects are represented using straightforward model classes, and I have set up services to retrieve the data from the DB a ...

What steps should I take to resolve a 'Missing environment variable' issue in the Sanity platform?

No matter what I've tried, I can't seem to fix the error that keeps occurring. An uncaught error is popping up, saying that the environment variable NEXT_PUBLIC_SANITY_DATASET is missing. http://localhost:3333/static/sanity-5377bc10.js:4605 ...

Level operations for tuple labels

Is it possible in TypeScript 4 to achieve something similar to the code snippet below using labelled tuples? type stringProperties<T extends {}> = {[k in keyof T]: string} This concept would allow me to transform a type like [foo: boolean, bar: numb ...

I encountered an issue in my Angular 11 Material UI project where I received error TS2531 stating that an object in my HTML template could potentially be 'null'

I've encountered an issue while using Material UI and reactive forms. My application is functioning as expected, allowing users to login successfully. However, I'm receiving the TS2531 error in my terminal window, stating that the object may be & ...

Managing forms in Django rest framework and Angular2

I am currently working on a project in which my Rest API is built using django rest framework to serve JSON, while my frontend is completely separate. The frontend is a standalone project created through yeoman and could potentially be an Ionic app or an A ...

Utilizing Angular to showcase information within a template

I'm delving into Angular and building my first component - a countdown feature. However, I'm facing a challenge when it comes to displaying the results on the template. I attempted using {{}}, but nothing seems to be happening. Thank you in adv ...

Caring for the data and code in .NET applications

I am about to embark on developing a Win Forms application that will be installed on traders' computers, and my primary goal is to optimize memory usage as much as possible. Every single line of code must be carefully crafted with this in mind. What ...