Question

我正在尝试使用 Angular 2 和 .Net Core 来实现一个简单的表单。

我的 .Net Core 控制器是这样的 -

[HttpPost("[action]")]
public async Task<IActionResult> Add(string name, string dob)
{
    Profile profileToSave = new Profile
                                {
                                    Name = name,
                                    DateOfBirth = DateTime.Now
                                };
    _context.Profile.Add(profileToSave);
    await _context.SaveChangesAsync();
    return Ok(profileToSave);
}

它完全像这样（Postman） -

我正在尝试在 Angular 2 Component中使用此API -

public addProfileSubmit(event,name,dob): void
{
    event.preventDefault();

    var data: {
        name: string;
        dob: string;
    } = {
            name: name,
            dob: dob
        };

    console.log(data);

    let opts: RequestOptions = new RequestOptions();
    opts.method = RequestMethod.Post;
    opts.headers = new Headers({ 'Content-Type': 'application/json' });

    this.http.post(this._addProfileUrl, JSON.stringify(data), opts)
        .subscribe(res => {
            alert("Profile Added Successfully");
            //this.router.navigate(['./SomewhereElse']);

            console.log(res);

            this.reloadAllData();
            this.hideAddProfileModal();
        },
        (err) => {
            console.log(err);
            alert("An Error Occured !!");
        }
    );
}

通过这个，我收到了这样的请求（来自Chrome Developer Tool） -

所以，我正在创建一个请求有效负载的请求，而不是表单数据。

我需要使用表单数据创建请求。

任何人都可以通过 Angular 2 帮助创建正确的帖子请求吗？

提前感谢您的帮助。

Answer 1

我不确定.Net Core，但在普通的ASP.NET绑定器中不会将HTTP post映射到参数，而是你需要这个：

class MyModel
{
   public string Name {get;set;} 
   public string Dob {get;set;}
}

public async Task<IActionResult> Add(MyModel input)

它可能是Core中的相同行为。因此，如果您创建一个特殊模型，绑定器将为您application/json body映射就好了。

或者，您可以在每个参数上使用[FromBody]属性。您可以检查Core中是否存在类似的内容。

P.S。一些细节here。

Answer 2

在Content-Type中设置multipart/form-data至RequestOptions之后，请尝试检查以下内容：

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethod.Post;
opts.headers = new Headers({ 'Content-Type': 'multipart/form-data' });

Answer 3

我已经在 Angular 2 -

中解决了这个问题

data = fread(input = "../data.txt", sep = "\t", fill = TRUE)

Angular 2 http.post在Dot.Net Core中没有将参数发送为null

3 个答案: