繁体   English   中英

从 angular2 到 .NET web api 的 HTTP Post 不起作用

[英]HTTP Post from angular2 to .NET web api doesn't work

我正在构建一个带有 angular2 前端和 .NET 后端的站点,对后端的 GET 调用一直工作得很好。

现在我想向我的服务器发布一些东西,但我似乎无法让它工作。

Angular 2 服务方法

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 模型

export class Category{
    constructor(
        public CategoryName: string,
        public ParentId: number,
        public ChildCategories: Category[]
    ){}
}

.NET DTO 模型

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 控制器

[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));
}

端点对应,模型对应。

正在进行调用,我在控制器的开头放置了一个断点,以查看它是否进入,但我没有。 我错过了什么吗?

谢谢!

编辑:

方法 Get 在这里调用:

@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));
    }
}

该组件的模板:

<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>

除非您subscribe Observables,否则不会发出请求,因此您不会进行后端调用。

你应该像这样订阅它:

this.categoryService.postCategory(new Category(this.name, this.parent, null)).subscribe((response)=>{
  console.log(response);
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM