C# 使用Angular 2调用ASP.Net Web方法

我似乎有一个简单的场景，但我无法让它工作。。。我有一个带有代码隐藏的ASPX页面。我想访问代码隐藏中的Web方法。为此，我在app.component.ts中添加了一个订阅者，该订阅者调用返回一个可观察值的服务。服务应该调用我的web方法。这是我的密码：

service.component.ts

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class GetDataService {
headers: any;
constructor(private _http: Http) {

}

WebMethodExample(): Observable<string> {
    return this._http.get("Default.aspx/WebMethodExample").map(
        (response: Response) => response.toString()
    );
}
}

当我运行此命令时，我在控制台中得到以下消息：“响应状态：200 OK for URL:null”。我不知道为什么它没有得到URL。感谢您的帮助

编辑：依赖项：

  "dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"es5-shim": "^4.5.9",
"es6-shim": "^0.35.3",
"reflect-metadata": "^0.1.8",
"rxjs": "5.4.3",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"

---

}，

查看所有其他示例，您是否尝试过正确设置标题，并使用POST而不是GET（我知道这很奇怪）

还要注意，我们使用

.json

作为响应，而不是

.tostring

WebMethodExample(): Observable<string> {

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

    var content = {};

    return this._http.post("Default.aspx/WebMethodExample",
    content, {
        headers: headers
      }).map(
        (response: Response) => response.json()
    );
}

WebMethodExample（）：可观察{
var headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
var内容={}；
返回此内容。_http.post（“Default.aspx/WebMethodExample”，
内容,{
标题：标题
}).地图(
（response:response）=>response.json（）
);
}

这是不相关的，但是您可以将WebMethods放在

.asmx

Web服务文件中，而不是以实际的形式。您的url文件夹结构的格式是否正确？有什么路线是你忘记的吗？@Ric我不确定我是否理解你的问题。我可以告诉你我的文件结构。我的Default.aspx在根目录中。service.component.ts位于应用程序/组件中。这能回答吗？@Marie是的，我知道，但这不是首选的方法。我想我只是假设它是。当我们在实际表单页面上使用WebMethods时，它会引发所有生命周期事件，这导致每次调用都会导致大量数据库加载和呈现。我们已经接近了。如果我将toString替换为text，我将在控制台中获得以下输出：{“d”：“从WebMethodExample发送”}，这是应该返回的。当我尝试访问属性d时，会出现生成错误…如果我按照上面的说明操作，我会得到与以前相同的结果。您使用的是angular的哪个版本？@champ8686请参阅更新。请注意response.json现在取代了tostringI，将我的依赖项添加到了问题中。

  "dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"es5-shim": "^4.5.9",
"es6-shim": "^0.35.3",
"reflect-metadata": "^0.1.8",
"rxjs": "5.4.3",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"

WebMethodExample(): Observable<string> {

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

    var content = {};

    return this._http.post("Default.aspx/WebMethodExample",
    content, {
        headers: headers
      }).map(
        (response: Response) => response.json()
    );
}