使用Angular和Net Core将关系数据发布到复杂数据模型的最佳方法是什么？

Question

试图找出发布POST关系数据的最佳方法，也想知道我处理后端的方法是否是最佳方法。

有一个步骤可以过帐POST吗？ 还是应该让服务或管道调用在第一个表中写入的内容，然后将相关数据发布到另一个表中？ 这将是我目前最好的选择，但对我而言，这听起来像是过度思考和过度努力。

我尝试了多种发布方式，但是我似乎无法掌握所发生的情况，尽管我在ef核心中有Icollection，但“相对”数据库仍然为空。 （请参见代码）。

这是netcore 2.2中的后端模型：

MainList {

        public Guid JdbTdcMainListId { get; set; }
        public string JTSubject { get; set; }
        public string JTDescription { get; set; }
        public bool JTImportant { get; set; }
        public bool JTPertinentToReporting { get; set; }
        public string JTCreatedBy { get; set; }
        public string JTLastEditBy { get; set; }
        public DateTime JTEntryCreated { get; set; }
        public DateTime JTEntryModified { get; set; }

        public Guid JTCatId { get; set; }
        public Guid JTSubCatId { get; set; }
        public Guid JTBatId { get; set; }
        public Guid JTReportId { get; set; }
        public Guid JTReturnId { get; set; }

        public JTCat JTCats { get; set; }
        public JTSubCat JTSubCats { get; set; }
        public JTRapport JTRapports { get; set; }
        public JTRetour JTRetours { get; set; }
        public JTBatphone JTBatphones { get; set; }
}

因此，这是一个主要列表，我希望将所有相关数据记录到底部引用的表中的条目中，对于分类系统，Cat＆SubCat彼此相关。还有一些报告数据和其他内容。

这是我在JTCats中设置与MainList的关系的方法：

JTCat {
     public Guid JTCatId { get; set; }
     public string JTCatNom { get; set; }
     public string JTCatDescription { get; set; }
     public bool JTCatHasTextTemplate { get; set; }
     public string JTCatTextTemplate { get; set; }
     public bool JTCatActive { get; set; }
     public ICollection<JTMainList> JTMainList { get; set; }
}

在vs Studio 2017中使用存储库模式和自动搭建的控制器。

然后我的角度模型看起来像这样：

import { JdbTdcMainList } from './jdbTdcMainList.model';

export interface JTCat {
    jTCatId?: string;
    jTCatNom: string;
    jTCatDescription: string;
    jTCatHasGabarit: boolean;
    jTCatActif: boolean;
    jTMainList: JTMainList[];
}

这是我的角度模板和组件，可以使用一些帮助来格式化验证：

<div class="container-fluid"><div class="row">
    <form 
        [formGroup]="MainGroup"
        (ngSubmit)="send()"
        novalidate>
    <input type="hidden" readonly formControlName="Data1" id="Data1" class="form-control"/>
    <td colspan="3"><input type="hidden" readonly formControlName="Data2" id="Data2" class="form-control"/>
    <td colspan="3"><input type="hidden" readonly formControlName="Data3" id="Data3" class="form-control"/>
    <td colspan="3"><input type="hidden" readonly formControlName="Data4" id="Data4" class="form-control"/>
    <div formGroupName="child">
        <table>
            <tr>
                <td rowspan="23">
                    <select size="35" formControlName="ChildData1" id="ChildData1" class="form-control form-control-sm">
                        <option value="06:00">06:00</option>
                        <option value="06:30">06:30</option>
                        etc.
                    </select> 
                </td>
                <tr>
                    <th>ChildData2 :</th>
                    <th>ChildData3  :</th>
                </tr>
                <tr>
                    <td><input type="number" size="3" value="0" formControlName="ChildData2" id="ChildData2" class="form-control form-control-sm" /></td>
                    <td><input type="number" size="3" value="0" formControlName="ChildData3" id="ChildData3" class="form-control" /></td>
                </tr>
                <tr>
                    <th>ChildData4</th>
                    <th>ChildData5<th>
                    etc..

        </table> 
    </div>     
</form>
</div>
<app-success-modal [modalHeaderText]="'Success message'" 
  [modalBodyText]="'Action completed successfully'" [okButtonText]="'OK'" 
  (redirectOnOK)="redirectToRapportList()">
</app-success-modal>
<app-error-modal [modalHeaderText]="'Error message'" 
  [modalBodyText]="errorMessage" [okButtonText]="'OK'">
</app-error-modal>

这是组件，如何验证和执行POST？

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { RepositoryService } from 'src/app/shared/services/repository.service';
import { ErrorHandlerService } from 'src/app/shared/services/error-handler.service';
import { Router } from '@angular/router';
import { CreateRapport } from '../../_interfaces/jdbtdc/CreateRapport.model';
import { formGroupNameProvider } from '@angular/forms/src/directives/reactive_directives/form_group_name';
import { MainListRapportCreate } from 'src/app/_interfaces/jt/mainlistRapportCreate.model';

@Component({
    selector: 'app-rapport-create',
    templateUrl: './rapport-create.component.html',
    styleUrls: ['./rapport-create.component.css'] 
})
export class RapportCreateComponent implements OnInit {
    public errorMessage: string = '';
    public createJdbRapportForm: FormGroup;
constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService, private router: Router, private fb: FormBuilder) { }

ngOnInit() {
    this.createJdbRapportForm = this.fb.group({
        Data1:  ['ReportTitle'],
        Data2:  ['ReportDescription'],
        Data3:  ['Identity_Data_From_IIS'],
        Data4:  new Date(),
            child: this.fb.group({
                ChildData1: new Date(),
                ChildData2: ['0'],
                Etc. 
            })
    });
}
public send() {
    if (this.createJdbRapportForm['controls'].child['controls'].valid) {
        this.executeEntryCreation()

    }
}
private executeEntryCreation(createJdbRapportForm) {
    let EntryCreate: CreateRapport = {
        jdbTdcSujet: createJdbRapportForm.jdbTdcSujet,
        jdbTdcDescription: createJdbRapportForm.jdbTdcDescription,
        jdbTdcCreatedBy: createJdbRapportForm.jdbTdcCreatedBy,
        jdbTdcEntryCreated: createJdbRapportForm.jdbTdcEntryCreated
    child:
    jdbTdcRapportEntryDateTime: createJdbRapportForm.jdbTdcRapportEntryDateTime,

^^这是我不知道该怎么做的地方。 在执行POST之前，如何将子级与主窗体合并？

但是这是我正在使用的界面：

export interface CreateRapport {
    Data1: string;
    Data2: string;
    Data3: string;
    Data4: string;
    etc.
        child: [{
            ChildData1: string;
            ChildData1: number;
            ChildData1: number;
            ChildData1: number;
            etc.
        }];
    }

Answer 1

您可以在您的FE代码中建立这样的模型

const model: JTCat  = { 
    jTCatId: "some data";
    jTCatNom: "some data";
    jTCatDescription: "some data";
    jTCatHasGabarit: true;
    jTCatActif: true;
    jTMainList: [
        {
          // your data
        },
        {
           // your data
        }
    ];

}