我可以通过从Angular2对象到MVC5帖子？ [英] Can I pass an object from Angular2 to an MVC5 Post?

问题描述

我想通过一个岗位一个MVC控制器通过从Angular2我的对象。我希望我能传递实际的对象，但我所有的属性都显示为空时，它进入我的控制器。是否有可能传递整个对象？我也试图与UrlSearchParameters但它没有工作，要么。

下面是我的控制器功能后：

  [HttpPost]
    公共JsonResult了addClient（Models.Client客户端）
    {
        VAR CLI =新Models.Client（）;
        cli.name = client.name;
        cli.npi = client.npi;
        cli.dateAdded = DateTime.Now.ToShortDateString（）;
        返回JSON（CLI）;
    }
 

下面是我的客户端类型：

\r

\r

导出接口的客户端{\r
    名称：字符串;\r
    NPI：数;\r
    dateAdded？：字符串;\r
    身份证号\r
}

\r

\r

\r

下面是我的Angular2服务：

\r

\r

进口从'angular2 /核心{}注射;\r
从./client进口{}客户端;\r
进口{RequestOptions，HTTP响应，接头，URLSearchParams}从'angular2 / HTTP';\r
从进口观测{}rxjs /可观察到的';\r
\r
\r
@Injectable（）\r
出口类ClientService {\r
    构造函数（私人HTTP：HTTP）{}\r
\r
\r
    getClients（）：可观察＆LT;客户端[] GT; {\r
        返回this.http.get（'/客户/ GetClients'）\r
            .MAP（this.extractData）;\r
    }\r
\r
    了addClient（客户端：客户端）：可观察＆LT;客户＆GT; {\r
        让clientUrl ='/客户端/了addClient';\r
        让身体= JSON.stringify（{客户}）;\r
        让头部=新的报头（{'的Content-Type：应用/ JSON'}）;\r
        让选项=新RequestOptions（{标题：标题}）;\r
\r
        返回this.http.post（clientUrl，身体，期权）\r
            .MAP（this.extractData）\r
            .catch（this.handleError）;\r
    }\r
\r
    私人ExtractData由（RES：响应）{\r
        如果（res.status＆LT; 200 || res.status＆GT; = 300）{\r
            抛出新的错误（坏响应状态：'+ res.status）;\r
        }\r
        让身体= res.json（）;\r
        返回身体|| {};\r
    }\r
    私人的HandleError（错误：任意）{\r
        //在实际应用中，我们可能会发送错误到远程日志基础设施\r
        让ERRMSG = ||返回Error.message '服务器错误';\r
        console.error（ERRMSG）; //改为登录到控制台\r
        返回Observable.throw（ERRMSG）;\r
    }\r
}

\r

\r

\r

感谢您的帮助！

解决方案

您尝试以下操作：

 了addClient（客户端：客户端）：可观察＆LT;客户＆GT; {
    让clientUrl ='/客户端/了addClient';
    让身体= JSON.stringify（客户端）; //＆LT; ----------
 

而不是

 了addClient（客户端：客户端）：可观察＆LT;客户＆GT; {
    让clientUrl ='/客户端/了addClient';
    让身体= JSON.stringify（{客户}）;
 

在你的情况，我认为您会收到以下内容：

  {
  客户：{
    //客户端属性
    名：有些名，
    NPI：有些NPI
    （......）
  }
}
 

而不是

  {
  //客户端属性
  名：有些名，
  NPI：有些NPI
  （......）
}
 

I am trying to pass my object from Angular2 through a post to an MVC Controller. I was hoping I could pass the actual object in, but all of my properties are appearing as null when it gets into my controller. Is it possible to pass the entire object in? I also tried with "UrlSearchParameters" but it didnt work either.

Here's my controller post function:

[HttpPost]
    public JsonResult AddClient(Models.Client client)
    {            
        var cli = new Models.Client();
        cli.name = client.name;
        cli.npi = client.npi;
        cli.dateAdded = DateTime.Now.ToShortDateString();
        return Json(cli);
    }

Here's my client type:

export interface Client {
    name: string;
    npi: number;
    dateAdded?: string;
    id?: number
}

Here's my Angular2 service:

import {Injectable} from 'angular2/core';
import {Client} from './client';
import {RequestOptions, Http, Response, Headers, URLSearchParams} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';


@Injectable()
export class ClientService {
    constructor(private http: Http) { }


    getClients(): Observable<Client[]> {
        return this.http.get('/Client/GetClients')
            .map(this.extractData);
    }

    addClient(client: Client): Observable<Client> {
        let clientUrl = '/Client/AddClient';
        let body = JSON.stringify({ client });
        let header = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: header });

        return this.http.post(clientUrl, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        if (res.status < 200 || res.status >= 300) {
            throw new Error('Bad response status: ' + res.status);
        }
        let body = res.json();
        return body || {};
    }
    private handleError(error: any) {
        // In a real world app, we might send the error to remote logging infrastructure
        let errMsg = error.message || 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

Thanks for any help!

解决方案

You try the following:

 addClient(client: Client): Observable<Client> {
    let clientUrl = '/Client/AddClient';
    let body = JSON.stringify(client); // <----------

instead of

addClient(client: Client): Observable<Client> {
    let clientUrl = '/Client/AddClient';
    let body = JSON.stringify({ client });

In your case, I think that you receive the following content:

{
  "client": {
    // client properties
    "name": "some name",
    "npi": "some npi",
    (...)
  }
}

instead of

{
  // client properties
  "name": "some name",
  "npi": "some npi",
  (...)
}

这篇关于我可以通过从Angular2对象到MVC5帖子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！