Angular 2 http.post 未在 Dot.Net 核心中将参数作为 null 发送

Question

我正在尝试使用 Angular 2 and .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 帮助创建一个正确的 post 请求吗？

在此先感谢您的帮助。

Answer 1

在 RequestOptions 中将 Content-Type 设置为 multipart/form-data 后尝试检查，如下所示：

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

Answer 2

我已经在Angular 2-

中这样解决了

let urlSearchParams = new URLSearchParams();
urlSearchParams.append('name', name);
urlSearchParams.append('dob', dob);
let body = urlSearchParams.toString();

let opts: RequestOptions = new RequestOptions();
opts.method = RequestMethod.Post;
opts.headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' });

this.http.post(this._addProfileUrl, body, opts)
    .subscribe(res => {
       .................
       .................
    }
);

Answer 3

我不确定 .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)

可能是核心中的相同行为。所以如果你创建一个特殊的模型，活页夹会映射你 application/json body 就好了。

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

P.S。一些细节 here.

Angular 2 http.post 未在 Dot.Net 核心中将参数作为 null 发送

Angular 2 http.post is not sending parameters as null in Dot.Net Core

angularjs-directive

.net-core

angular2-forms

asp.net-core

angular