How can I assign json properties from my frontend to multiple backend models in my API?

Question

I have a React component that posts to an API controller like this:

onSubmit={async values => {
    await new Promise(resolve => setTimeout(resolve, 500));
    axios({
        method: "POST",
        url: "/educationalgames/api/acceptentry",
        data: values
    });
    alert(JSON.stringify(values, null, 2));
}}

When I hit submit, I see the values it finds:

{
    "eligiblePlayers": [],
    "teamName": "FalconOne",
    "teamEmail": "fc@coma.edu",
    "trainer": "",
    "department": "Physics",
    "researchType": "Meta",
    "numOfStudents": 50,
    "currentState": true
}

The data above are properties from a mix of different models in my c# backend API.

teamName, teamEmail, and trainer belong to my team.cs model.

eligiblePlayers, department belong to the department.cs model.

researchType, numOfStudents, and currentState belong to my research.cs model.

My question is, I can't figure out how do I translate that data so that my API controller can read it and assign the proper values to the matching model properties.

So far I have this in my c# controller:

[HttpPost]
public async Task<ActionResult> AcceptEntry([FromBody] ???)

I'm kind of at a loss to handle this.

Is there a way?

Thanks!

You could wrap all the models in a separate view model, as seen here: https://stackoverflow.com/questions/39185634/how-to-post-multiple-models-in-one-post — Blaise, Mar 11 '20 at 14:56
Just make a new model for the API. Your models shouldn't necessarily relate directly to your backend models anyway. — DavidG, Mar 11 '20 at 14:57
@DavidG but if the properties from the front-end don't match my models, how would they eventually get written to the database? thanks — SkyeBoniwell, Mar 11 '20 at 15:11
Like I said, your api models shouldn't necessarily be the same ones you use for your database. Write a layer in between that translates between the two. Or use a library like AutoMapper. — DavidG, Mar 11 '20 at 18:22

score 1 · Accepted Answer · answered Mar 11 '20 at 14:56

1

teamName, teamEmail, and trainer belong to my team.cs model.

eligiblePlayers, department belong to the department.cs model.

researchType, numOfStudents, and currentState belong to my research.cs model.

Why you don't create a common model in your apps?

public class CommonModel {
  public string teamName {get; set;} 
  teamEmail, 
  eligiblePlayers, 
  department, 
  researchType, 
  numOfStudents, 
  currentState
}

Then, in your controller:

[HttpPost]
public async Task<ActionResult> AcceptEntry([FromBody] CommonModel model) {

 var team = new Team() {
   teamName = model.teamName,
   ...
 }
 var department = new Department() {
   eligiblePlayers = model.eligiblePlayers,
   ...
 }
}

answered Mar 11 '20 at 14:56

AlleXyS

2,476
2
17
37

Oh I see, so would the POST automatically put the values into the CommonModel model? – SkyeBoniwell Mar 11 '20 at 15:09
1

only if your values object from React will be same structure as your CommonModel class of backend. Probably your values object is a json with all enumerated params. Net Core will map the received json into your class (CommonModel in this example) – AlleXyS Mar 11 '20 at 15:18

How can I assign json properties from my frontend to multiple backend models in my API?

1 Answers1