การใช้ ionic เรียก WebApi เป็น Object

1. สร้างโปรเจ็กส์ ASP.NET Core

สร้างโปรเจ็กส์แบบ ASP.NET Core WebAPI in Azure

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace JackWebAPI
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", builder =>
                {
                    builder.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod();
                });
            });

            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            // Shows UseCors with named policy.
            app.UseCors("AllowAll");

            app.UseMvc();
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Logging;

using Microsoft.Extensions.Options;

namespace JackWebAPI

{

public class Startup

{

public Startup(IConfiguration configuration)

{

Configuration = configuration;

}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)

{

services.AddCors(options =>

{

options.AddPolicy("AllowAll", builder =>

{

builder.AllowAnyOrigin()

.AllowAnyHeader()

.AllowAnyMethod();

});

services.AddMvc();

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

// Shows UseCors with named policy.

app.UseCors("AllowAll");

app.UseMvc();

}

ValuesController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        public class Person
        {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
        }

        // GET api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "Jack1", "Jack2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public Person Get(int id)
        {
            Person person = new Person();
            person.ID = 50;
            person.FirstName = "Phaisarn";
            person.LastName = "Sutheebanjard";
            return person;
        }

        // POST api/values
        public string Post([FromBody]Person person)
        {
            return $"{person.ID} : {person.FirstName}  {person.LastName}";
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers

{

[Route("api/[controller]")]

public class ValuesController : Controller

{

public class Person

{

public int ID { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

}

// GET api/values

[HttpGet]

public IEnumerable<string> Get()

{

return new string[] { "Jack1", "Jack2" };

}

// GET api/values/5

[HttpGet("{id}")]

public Person Get(int id)

{

Person person = new Person();

person.ID = 50;

person.FirstName = "Phaisarn";

person.LastName = "Sutheebanjard";

return person;

}

// POST api/values

public string Post([FromBody]Person person)

{

return $"{person.ID} : {person.FirstName} {person.LastName}";

}

// PUT api/values/5

[HttpPut("{id}")]

public void Put(int id, [FromBody]string value)

{

}

// DELETE api/values/5

[HttpDelete("{id}")]

public void Delete(int id)

{

}

2. สร้างโปรเจ็กส์ ionic

สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native (GET)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Status: {{stStatus}}</p>
  <p>Value: {{stValue}}</p>
  <button (click)="doGet()" ion-button color="primary" block>1. Get Person</button>
  <button (click)="doPost()" ion-button color="primary" block>2. Post Person</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Status: {{stStatus}}</p>

<p>Value: {{stValue}}</p>

<button (click)="doGet()" ion-button color="primary" block>1. Get Person</button>

<button (click)="doPost()" ion-button color="primary" block>2. Post Person</button>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  stStatus;
  stValue;
    
  constructor(public navCtrl: NavController, private http: HTTP) {
   this.stStatus = "";
   this.stValue = "";
  }

  doGet(){
    let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';
    //let url = 'http://localhost:50172/api/values/1';
    console.log(url);

    this.http.get(url, {}, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        let person = JSON.parse(resp.data);
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
        console.log("person['id'] ", person['id']);
        console.log("person['firstName'] ", person['firstName']);
        console.log("person['lastName'] ", person['lastName']);
      })
      .catch(error => {
        this.stStatus =  error.status;
        this.stValue =  error.error;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }

  doPost() {
    // var myData = JSON.stringify({
    //   "LocationID": 1,
    //   "Flag": "O",
    //   "UserFingerID": "66"
    // });
 
    // const httpOptions = {
    //   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    // };
 
    this.http.setDataSerializer('json');
    this.http.post('http://jackwebapi25610824112107.azurewebsites.net/api/values',
      {
        'ID': 101,
        'FirstName': 'Phaisarn',
        'LastName': 'Sutheebanjard'
      }, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      })
      .catch(error => {
        this.stStatus = error.status;
        this.stValue = error.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

stStatus;

stValue;

constructor(public navCtrl: NavController, private http: HTTP) {

this.stStatus = "";

this.stValue = "";

}

doGet(){

let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';

//let url = 'http://localhost:50172/api/values/1';

console.log(url);

this.http.get(url, {}, {})

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

let person = JSON.parse(resp.data);

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

console.log("person['id'] ", person['id']);

console.log("person['firstName'] ", person['firstName']);

console.log("person['lastName'] ", person['lastName']);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.error;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

doPost() {

// var myData = JSON.stringify({

// "LocationID": 1,

// "Flag": "O",

// "UserFingerID": "66"

// });

// const httpOptions = {

// headers: new HttpHeaders({ 'Content-Type': 'application/json' })

// };

this.http.setDataSerializer('json');

this.http.post('http://jackwebapi25610824112107.azurewebsites.net/api/values',

{

'ID': 101,

'FirstName': 'Phaisarn',

'LastName': 'Sutheebanjard'

}, {})

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

3. ผลการรัน

ลองใช้ Postman ทำการ POST

[code]
{
"ID": 101,
"FirstName": "Phaisarn",
"LastName": "Sutheebanjard"
}
[/code]

ได้ผลลัพธ์กลับมาเป็น

[code]
101 : Phaisarn Sutheebanjard
[/code]

เรียกผ่าน browser แบบ Get

ไปที่ http://jackwebapi25610824112107.azurewebsites.net/api/values/1

ได้ผลลัพธ์กลับมาเป็น

[code]
{"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
[/code]

ใช้ ionic เรียกแบบ Get

[code]
http://jackwebapi25610824112107.azurewebsites.net/api/values/1
this.stStatus 200
this.stValue {"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
person[‘id’] 50
person[‘firstName’] Phaisarn
person[‘lastName’] Sutheebanjard
[/code]

ใช้ ionic เรียกแบบ Post

[code]
this.stStatus 200
this.stValue 101 : Phaisarn Sutheebanjard
[/code]