使用Angular 2调用ASP.Net Web方法 [英] Calling ASP.Net Web Methods with Angular 2
问题描述
我似乎有一个简单的场景,但是我无法使它正常工作...我有一个ASPX页面,上面有代码.我想在后面的代码中访问Web方法.为此,我在app.component.ts中添加了一个订阅者,该订阅者调用了返回可观察对象的服务.该服务应调用我的Web方法.这是我的代码:
I seem to have a simple scenario but I can't get it to work... I have an ASPX page with code behind. I want to access the Web Methods in the code behind. To do this I added a subscriber in my app.component.ts that calls the service which returns an observable. The service should call my web method. Here's my code:
service.component.ts
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()
);
}
}
app.component.ts(订阅者)
app.component.ts (subscriber)
import { Component, OnInit } from '@angular/core';
import { GetDataService } from './Components/service.component';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
providers:[GetDataService]
})
export class AppComponent {
name = 'Angular 2 (From component)';
constructor(private _get:GetDataService) { }
ngOnInit(): void {
console.log("In OnInit");
this._get.WebMethodExample().subscribe((data) => console.log(data));
}
}
(Default.aspx.cs)后面的代码
Code behind (Default.aspx.cs)
using System;
using System.Web.Services;
namespace Angular2Demo10
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string WebMethodExample()
{
return "Sent from WebMethodExample";
}
}
}
运行此命令时,在控制台中得到以下信息:状态响应:URL的200 OK:空".我不确定为什么没有获取URL.感谢您的帮助.
When I run this, I get the following in the console: "Response with status: 200 OK for URL: null". I'm not sure why it isn't getting the URL. Any help is appreciated.
依赖项:
"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(我知道这很奇怪).
Looking at all the other examples, have you tried setting the headers correctly, and using POST instead of a GET (I know this is weird).
还请注意,我们使用 .json
进行响应,而不是使用 .tostring
Also notice we use .json
for the response instead of .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()
);
}
这篇关于使用Angular 2调用ASP.Net Web方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!