trying to call MVC Get Action from Angular 2 with typescript

Question

I have a simple MVC Get method as below to get a Customer Id from the Session

[HttpGet]
public string GetCustomerId()
{
  return Session["CUSTOMERID"].ToString();
}

If I hit this URL directly in the browser http://localhost/myApp/Home/GetCustomerId I can set a breakpoint int the method and it gets hit and I get the value returned.

However, I need to call the method from my Client code which is Angular 2 written in typescript. My Typescript method is as below - I cannot get it to hit the MVC Breakpoint even though I am logging the exact same URL as above to the console.

public getCustomerIdFromSession() {
    console.log('get customer from session called');
    let srv = this.environmentService.getCurrentEnvironment();
    let httpOrHttps = '';

    if (srv === AppSettings.ENV_LOCALHOST) {
        httpOrHttps = AppSettings.URL_HTTP;
    }
    else {
        httpOrHttps = AppSettings.URL_HTTPS;
    }
    let baseUrl = httpOrHttps + srv + AppSettings.URL_GET_CUST_FROM_SESSION;
    console.log(baseUrl); //this logs - http://localhost/myApp/Home/GetCustomerId

    return this.http.get(baseUrl)
        .catch(this.handleError);
}

public handleError(error: Response) {
    console.log("error");
    return Observable.throw(error.json() || 'Server Error');
}

**UPDATE To include entire Typescript service

import { Injectable, Output, EventEmitter } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { EnvironmentService } from '../common/environment.service';
import { AppSettings } from '../common/app-settings';

@Injectable()
export class SessionService {

    @Output() public gSession: EventEmitter<any> = new EventEmitter();
    private sessionTime: number = 1500000; // 25 minute
    constructor(private http: Http, private environmentService: EnvironmentService) {

    }

    public setValue(isLoading: boolean): void {
        this.gSession.emit(isLoading);
    }

    public getValue(): any {
        return this.gSession;
    }

    public startSession(): void {
        this.getCustomerIdFromSession();
        let timeoutId = setTimeout(() => {
            this.setValue(true);
        }, this.sessionTime);
    }

    public getCustomerIdFromSession() {
        console.log('get customer from session called');
        let srv = this.environmentService.getCurrentEnvironment();
        let httpOrHttps = '';

        if (srv === AppSettings.ENV_LOCALHOST) {
            httpOrHttps = AppSettings.URL_HTTP;
        }
        else {
            httpOrHttps = AppSettings.URL_HTTPS;
        }
        let baseUrl = httpOrHttps + srv + AppSettings.URL_GET_CUST_FROM_SESSION;
        console.log(baseUrl); //this logs - http://localhost/myApp/Home/GetCustomerId

        return this.http.get(baseUrl)
            .catch(this.handleError);
    }

    public handleError(error: Response) {
        console.log("error");
        return Observable.throw(error.json() || 'Server Error');
    }

    public extractData(res: Response) {
        console.log("In extract method");
        let body = res.json();
        console.log(body);
        if (body) {
            return body.data || body;
        } else {
            return {};
        }
    }
}

SrAxi · Accepted Answer · 2017-06-12 14:16:12Z

0

You are not mapping the response.

return this.http
     .get(baseUrl)
     .map(this.extractData)
     .catch(this.handleError);

private extractData(res: Response) {
        let body = res.json();
        if (body) {
            return body.data || body;
        } else {
            return {};
        }
    }

You have to map the response and process it with json() if you know that will be a JSON or with text(). Usually will be JSON.

I took the liberty of adding a response handler such as extractData. You could just json() the response directly if you wanted.

answered Jun 12, 2017 at 14:16

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ctrl_Alt_Defeat Over a year ago

will give that a go

Ctrl_Alt_Defeat Over a year ago

even with the extract method added still not getting the MVC Breakpoint hit in the method - added a console.log("In extract method") line to the begining of the extract method but it never gets printed to the Chrome console

SrAxi Over a year ago

@Ctrl_Alt_Defeat Can you post the entire service? Did instance the Http class in your constructor?

Collectives™ on Stack Overflow

trying to call MVC Get Action from Angular 2 with typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related