Asp.net web api Web API POST方法从Angular2服务调用获取空值

我创建了

HTML

和

TS

组件。我给出了服务的TS代码和API代码。请帮忙。我尝试了许多选项来处理内容类型和接受标题，但运气不好。我一直在向我的web API方法获取空值

HTML页面： 服务： WEB API：

---

这也许可以。。。不确定是否已经尝试过此操作，是否可以尝试将“DataContractAttribute”添加到类中，并将“DataMemberAttribute”添加到类“PA_Users”的所有成员/属性中

希望这有帮助！ 谢谢

---

Bhadhri

它也不起作用。不确定代码有什么问题。甚至我也尝试过使用可观察调用，比如updateUserDetails（data）{let headers=newheaders（{'Content Type'：'application/json'}）；let options=newrequestoptions（{headers:headers}）；let body=json.stringify（data）；返回this.http.post（this._originalUrl+'/api/PAUser/updateOnUserDetails'，body，options）.map（（res:Response）=>res.json（））.toPromise（）；}尝试使用类似updateUserDetails（数据）的可观察项：可观察项{let headers=新头({'Content Type'：'application/json'}）；let options=new RequestOptions（{headers:headers}）；let body=json.stringify（data）；返回this.http.post（this._originalUrl+'/api/PAUser/UpdateOneUserDetails'，body，options）。map（（res:res）=>res json（））；}通过observable调用，它没有到达WEB API Post方法。我不确定我只是遵循了Angular IO文档。你能在这里发布来自UI层的类结构和JSON吗？

<h1>User Preference</h1>

<div class="panel panel-default panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Edit User</h3>
    </div>
    <div class="panel-body">
        <div class="col-md-6" *ngIf="oneUser">
            <form autocomplete="off" #userForm="ngForm" (submit)="updateUserInfo(userForm.value)">
                <div class="form-group">
                    <label for="msUserID">MS User ID:</label>
                    <input id="msUserID" readonly type="text" class="form-control" 
                           [(ngModel)] = "oneUser.msUserId" name="msUserId"
                           placeholder="Enter MS User ID..."/>
                </div>
                <div class="form-group">
                    <label for="firstName">First Name:</label>
                    <input id="firstName" readonly type="text" class="form-control" 
                           [(ngModel)] = "oneUser.firstName" name="firstName"
                           placeholder="Enter First Name.." />
                </div>
                <div class="form-group">
                    <label for="lastName">Last Name:</label>
                    <input id="lastName" readonly type="text" class="form-control" 
                           [(ngModel)] = "oneUser.lastName" name="lastName"
                           placeholder="Enter Last Name..." />
                </div>
                <div class="form-group">
                    <label for="userReportAccess">User Report Access:</label>
                    <select [(ngModel)]="oneUser.userReportAccess" class="form-control" name="userReportAccess">
                        <option value=""></option>
                        <option value="0">false</option>
                        <option value="1">true</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Update</button>
            </form>
        </div>
    </div>
</div>

import { Component, OnInit } from '@angular/core'

import { UserDetails } from "../shared/user-details.model";
import { UserService } from "../shared/user.service";

@Component({
    selector: "user-one",
    templateUrl: "./user.component.html"
})
export class UserComponent implements OnInit {
    public oneUser: UserDetails;
    testVa: string = "TEST";

    constructor(private userService: UserService) {
    }

    ngOnInit() {
        this.userService.getOneUserDetails()
            .then(user => this.oneUser = user);
        console.log("DATA" + JSON.stringify(this.oneUser));
    }

    updateUserInfo(userForm) {
        alert("UPDATE method call" + JSON.stringify(userForm));
        //data: UserDetails = {
        //    msUserId: userForm.msUserId,

        //};
        console.log("Update data" + JSON.stringify(userForm));
        let data: UserDetails = {
            msUserId: userForm.msUserId,
            firstName: userForm.firstName,
            lastName: userForm.lastName,
            userReportAccess: userForm.userReportAccess
        };
        this.userService.updateUserDetails(data);
    }
}

import { Injectable, Inject } from '@angular/core';
import { Http, Response, RequestOptions, Headers, RequestMethod } from '@angular/http';
import 'rxjs/Rx'; 
import 'rxjs/Observable';

import { UserDetails } from './user-details.model';
import { Observable } from "rxjs/Rx";

@Injectable()
export class UserService {
    private _originalUrl: string;
    public headers: Headers;

    constructor(private http: Http, @Inject('ORIGIN_URL') originUrl: string) {
        this._originalUrl = originUrl;

        this.headers = new Headers();  
        this.headers.append('Content-Type', 'application/json') 
        this.headers.append('Accept', 'application/json');

        console.log("OriginalURL" + originUrl);
    }

    getOneUserDetails() {
        return this.http.get(this._originalUrl + '/api/PAUser/GetOneUserDetails')
            .map(response => response.json() as UserDetails)
            .toPromise();
    }

    updateUserDetails(data) {
        let headers = new Headers({
            'Content-Type': 'application/json;charset=utf-8',
            'Accept': 'application/json'
        });     

        let options = new RequestOptions({ headers: headers, method: RequestMethod.Post });//, method: "post"
        console.log("Service data" + JSON.stringify(data));
        return this.http.post(this._originalUrl + '/api/PAUser/UpdateOneUserDetails', JSON.stringify(data))
            .map(response => response.json() as UserDetails)
            .toPromise();
    }
}

[HttpPost("[action]")]

    public void UpdateOneUserDetails([FromBody] PA_Users userDetails)
        {
            if (userDetails != null)
            {
                var userFind = _context.PA_Users.Where(x => x.MsUserId.Equals(userDetails.MsUserId)).ToList();

                if (userFind.Count > 0)
                {
                    userFind[0].UserReportAccess = userDetails.UserReportAccess;
                    _context.SaveChanges();
                }
            }
        }