How to send data to back-end of Asp.net Project

Question

I have created a simple form on the Asp.net boiler template project. I have a total of three fields In Table 1

Product name
Quantity

In Table2

Tags with product List

I wanted to store third field data in another table in the database. but I'm confused as I'm a beginner. The product name and quantity is working fine. Can someone please guide me? Why data in the 2nd table is stored as null?

(1) This is chips code ( from priming)

(2) This is my class code (in which all three data members exist

(3) This is my Product list class code for storing chips

(4) This is database table of Product

(5) This is Database table of Product list class

This is new attached image

Error Image

import {Component,Injector,OnInit,EventEmitter,Output,} from '@angular/core';
import { finalize } from 'rxjs/operators';
import { BsModalRef } from 'ngx-bootstrap/modal';
import * as _ from 'lodash';
import { AppComponentBase } from '@shared/app-component-base';
import {
ProductServiceProxy,
ProductDto,
Product_listDto,
Product_listServiceProxy
} from '@shared/service-proxies/service-proxies';

@Component({
templateUrl: 'create-product.component.html'
})
export class CreateProductComponent extends AppComponentBase
implements OnInit {
saving = false;
product = new ProductDto();

@Output() onSave = new EventEmitter<any>();

constructor(
 injector: Injector,
 private _productService: ProductServiceProxy,
 public bsModalRef: BsModalRef
) {
super(injector);
}

ngOnInit(): void {
}

save(): void {
this.saving = true;
console.log("input",this.product)
const product = new ProductDto();
product.init(this.product);

this._productService
  .create(product)
  .pipe(
    finalize(() => {
      this.saving = false;
    })
  )
  .subscribe(() => {
    this.notify.info(this.l('SavedSuccessfully'));
    this.bsModalRef.hide();
    this.onSave.emit();
  });
}
}

No, Can you guide me how to make it array? It it declared as list in Product class where name and quantity is also available — Asad Ullah Shahid, Aug 27 '20 at 07:22
if you have a `product_list` list in your backend you must past a same object array from the front-end — Hansaka Sandaruwan, Aug 27 '20 at 07:28
Can you please guide me with some code sample? How can i pass list from front end? — Asad Ullah Shahid, Aug 27 '20 at 07:30
try changing your `product` class's product list to this `public List ProductList {get; set:}` — Hansaka Sandaruwan, Aug 27 '20 at 07:32
can you provide me the json object that you are sending to backend? — Hansaka Sandaruwan, Aug 27 '20 at 07:36
no i need the final `product` object that you are passing from angular to backend — Hansaka Sandaruwan, Aug 27 '20 at 07:43
looking at the code your are given. from angular you are passing a string array of `productList` (p-chip returns a string array). but your backend requiring a object array of `product_list` (`[ { name: "name 1"}, {name: "name2"}]`). — Hansaka Sandaruwan, Aug 27 '20 at 08:04
I've attached the code, Please guide me how to make this code correct — Asad Ullah Shahid, Aug 27 '20 at 08:11
@AsadUllahShahid before sending data directly from front-end(Angular ) test it with `postman` and when you got the desired result then back to `Angular`. — Saad Abbasi, Aug 27 '20 at 08:20
console.log("input",this.product) can you give me the result of this line too — Hansaka Sandaruwan, Aug 27 '20 at 08:23

Hansaka Sandaruwan · Answer 1 · 2020-08-27T09:46:54.300

0

Your p-chip returns a string array but your back end requiring a object of product_list.you need to pass the a `product_list' object array to the backend.

save(): void {
    this.saving = true;
    console.log("input",this.product)
    let productList = [...this.product.productList];
    this.product.productList = productList.map(item=>{
        return {
            Id: 0,
            Name: item
        }
    });
    const product = new ProductDto();
    product.init(this.product);
 }

edited Aug 27 '20 at 09:46

answered Aug 27 '20 at 08:56

Hansaka Sandaruwan

501
4
13

I got this error on (this.product.productList), Type 'void[]' is not assignable to type 'Product_list[]'. – Asad Ullah Shahid Aug 27 '20 at 09:12
this.product.productList = productList.map(item=>{ name: item}); //<--- this line? – Hansaka Sandaruwan Aug 27 '20 at 09:18
Yes, On this line – Asad Ullah Shahid Aug 27 '20 at 09:23
ok dont update your question regarding a answer OK. others trying to answer can get miss lead by that. – Hansaka Sandaruwan Aug 27 '20 at 09:31
Okay, I just wanted you to see – Asad Ullah Shahid Aug 27 '20 at 09:37
Type '{ Name: Product_list; }[]' is not assignable to type 'Product_list[]'. Type '{ Name: Product_list; }' is missing the following properties from type 'Product_list': name, id, init, toJSON, clone – Asad Ullah Shahid Aug 27 '20 at 09:42
try now. i added the Id too to the object.should work now – Hansaka Sandaruwan Aug 27 '20 at 09:47
Type '{ Id: number; Name: Product_list; }[]' is not assignable to type 'Product_list[]'. Type '{ Id: number; Name: Product_list; }' is missing the following properties from type 'Product_list': name, id, init, toJSON, clone – Asad Ullah Shahid Aug 27 '20 at 09:52
Thank You so much for helping me, Please fix this. – Asad Ullah Shahid Aug 27 '20 at 09:53
try using all small letters for name and id – Hansaka Sandaruwan Aug 27 '20 at 09:55
Do you have a class in your angular named ` Product_list` ? – Hansaka Sandaruwan Aug 27 '20 at 09:58
Yes there is a class, You cal also see in images above – Asad Ullah Shahid Aug 27 '20 at 09:59
No, Sorry there is not class in angular, I've class in visual studio – Asad Ullah Shahid Aug 27 '20 at 10:06
`product = new ProductDto()` comment this line and create a product object like this. product = {} as any; – Hansaka Sandaruwan Aug 27 '20 at 10:15
Please guide me i'm beginner. I don't know much about this – Asad Ullah Shahid Aug 27 '20 at 10:19
you crated your product object using ProductDTO.. insted of that create it as a normal javascript object. `product = {} as any` – Hansaka Sandaruwan Aug 27 '20 at 10:23

How to send data to back-end of Asp.net Project

1 Answers1