I'm building a site with an angular2 frontend and .NET backend, the GET calls to the backend have been working flawlessly.
Now I want to POST some stuff to my server, but I cant seem to get it working.
Angular 2 Service Method
postCategory(category: Category){
let endpoint = this.url + 'add';
let body = JSON.stringify(category);
let options = new RequestOptions({headers: this.headers});
return this.http.post(endpoint, body, options)
.map((res:Response) => res.json())
.catch((error:any) => Observable.throw(error.json().error || 'Server Error'));
}
Angular 2 DTO Model
export class Category{
constructor(
public CategoryName: string,
public ParentId: number,
public ChildCategories: Category[]
){}
}
.NET DTO Model
public class CategoryDTO
{
public string CategoryName { get; set; }
public int? ParentId { get; set; }
public IList<CategoryDTO> ChildCategories { get; set; }
public CategoryDTO(string name, int? parent, IList<CategoryDTO> child)
{
CategoryName = name;
ParentId = parent;
ChildCategories = child;
}
}
.NET WEB API Controller
[HttpPost]
[Route("add")]
public IHttpActionResult PostCategory([FromBody]CategoryDTO category)
{
var newCategory = _categoryService.AddCategory(_dtoBuilder.CategoryDtoToCategory(category));
if(newCategory == null) return NotFound();
return Ok(_dtoBuilder.CategoryToDto(newCategory));
}
The endpoints corresponds, the models correspond.
The call is being made, I put a break point on the start of my controller to see if it gets in but i doesn't. Am I missing something?
Thanks!
EDIT:
Method Get's calles here:
@Component({
moduleId: module.id,
selector: 'admin-category',
templateUrl: 'admin-category.component.html',
styleUrls: ['admin-category.component.css']
})
export class AdminCategoryComponent{
name: string;
parent: number;
constructor(
private categoryService: CategoryService
){}
addCategory(): void{
this.categoryService.postCategory(new Category(this.name, this.parent, null));
}
}
Template of that component:
<h1>Add Category</h1>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" [(ngModel)]="name">
</div>
<div class="form-group">
<label for="parent">ParentId:</label>
<input type="text" class="form-control" id="parent" [(ngModel)]="parent">
</div>
<button class="btn btn-default" (click)="addCategory()">Submit</button>
Observables won't make a request unless you subscribe
to them hence you are not making a back-end call.
You should subsribe to it like this:
this.categoryService.postCategory(new Category(this.name, this.parent, null)).subscribe((response)=>{
console.log(response);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.