調用.NET核心控制器get方法與angular2

Question

對象我有一個角狀的部件：

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


@Component({ 
    selector: 'search', 
    template: require('./search.component.html'), 
    styles: [require('./search.component.css')] 
}) 
export class SearchComponent { 
    public tumorType = "Tymor Type"; 
    public gene = "Gene"; 
    public searchList: any[]; 
    public searchCriteria: 
     { 
      TumorType: string; 
      Gene: string; 
      Country: string; 
     } = 
     { 
      TumorType: "Acute Lymphoblastic Leukemia", 
      Gene: "ABL", 
      Country: "Australia" 
     }; 

    constructor(private http: Http) { 

    } 

    public search() { 
     let searchCrit = this.searchCriteria; 
     this.http.get('/api/RocheClinicalTrial/' + JSON.stringify({ searchCrit })).subscribe(result => { 
      //this.searchList = result.json(); 
      console.log(result); 
     }); 

    } 
} 

和MVC控制器

namespace RocheClinicalTrial.Controllers 
{ 
    [AllowAnonymous] 
    [Route("api/[controller]")] 
    public class RocheClinicalTrialController : Controller 
    { 
     // GET: api/values 
     [HttpGet] 
     public JsonResult Get() 
     { 
      var repo = new Repository.Repository(); 
      var data = repo.GetData(); 

      return Json(data); 
     } 

     [Route("GetData")] 
     //GET api/values/5 
     [HttpGet("api/values")] 
     public string Get(string searchCriteria) 
     { 
      System.Console.WriteLine(searchCriteria); 
      return "value"; 
     } 
} 
} 

這應該叫

獲取（string searchCriteria）

方法。但電話沒有發生。但是，當我打電話而不值

this.http.get（ '/ API/RocheClinicalTrial /'/ + JSON.stringify（{ searchCrit}） /).subscribe(result => {// this.searchList = result.json（）; console.log（result）; }）;

它調用

公共JsonResult獲得（）

方法。你能幫忙嗎？

下面是從網絡選項卡中的通話截圖

Answer 1

，如果你要綁定的搜索條件，然後修改您的API URL，所以它看起來像這樣

：

api/RocheClinicalTrial?searchCriteria=yourSearchCriteria

你如果你沒有指定一個MVC路線來匹配這個，就需要這樣做。 所以基本上多餘的參數匹配MVC端的相同內容，然後MVC引擎可以爲您自動映射該值。

這也意味着你必須對你的搜索字符串進行URL編碼，否則你可能會有一個無效的URL。

如果我是你，我不會使用GET方法，使用POST並將數據傳遞給它。不要忘了URL有字符限制，所以你不能讓它們太長

Answer 2

我發現了一個解決方案。

下面是從客戶端的我的電話：

this.http.get('/api/RocheClinicalTrial/Details/' + this.searchCriteria).subscribe(result => { 
     //this.searchList = result.json(); 
     console.log(result); 
    }); 

這裏是我的控制器：

namespace RocheClinicalTrial.Controllers 
{ 
    [AllowAnonymous] 
    [Route("api/RocheClinicalTrial")] 
    public class RocheClinicalTrialController : Controller 
    { 
     // GET: api/values 
     [HttpGet] 
     public JsonResult Get() 
     { 
      var repo = new Repository.Repository(); 
      var data = repo.GetData(); 

      return Json(data); 
     } 

     [Route("Details/{ItemName}")] 
     //GET api/values/5 
     [HttpGet("api/values")] 
     public string Get(SearchCriteria searchCriteria) 
     { 
      System.Console.WriteLine(searchCriteria); 
      return "value"; 
     } 
} 
} 

Answer 3

我對什麼是這裏的目標糊塗一點點。我在這裏看到兩種可能的API url可能性。

數1：

api/RocheClinicalTrial?searchCriteria=yourSearchCriteria 

爲此，當前樣本 「應該」 的工作。但是您只需要使用一個操作並確保查詢參數searchCriteria不爲空或爲空。

namespace RocheClinicalTrial.Controllers 
{ 
    [AllowAnonymous] 
    [Route("api/[controller]")] 
    public class RocheClinicalTrialController : Controller 
    { 
     // GET: api/values 
     [HttpGet] 
     public JsonResult Get(string searchCriteria) 
     { 
      if (string.IsNullOrWhiteSpace(searchCriteria)) 
      { 
       var repo = new Repository.Repository(); 
       var data = repo.GetData(); 

       return Json(data); 
      } 
      // Return back full payload. 
     } 
    } 
} 

數2：這是打算在角2組件

api/RocheClinicalTrial/yourSearchCriteria 

像下面這樣就足夠了

namespace RocheClinicalTrial.Controllers 
{ 
    [AllowAnonymous] 
    [Route("api/[controller]")] 
    public class RocheClinicalTrialController : Controller 
    { 
     // GET: api/values 
     [HttpGet] 
     public JsonResult Get() 
     { 
      var repo = new Repository.Repository(); 
      var data = repo.GetData(); 

      return Json(data); 
     } 

     [HttpGet("{searchCriteria}")] 
     public string Get(string searchCriteria) 
     { 
      System.Console.WriteLine(searchCriteria); 
      return "value"; 
     } 
    } 
} 

現在，善意提醒這裏的一個。網址長度是有限的，根據IE它是2,083個字符。它可能在其他瀏覽器和客戶端的同一地區漫遊。

要發回適當的json有效負載，最好使用POST。

像下面將使用的則：從角2

namespace TestApp.Controllers 
{ 
    [Route("api/[controller]")] 
    public class ValuesController : Controller 
    { 
     [HttpGet] 
     public JsonResult Get() 
     { 
      var data = "I'm the default one"; 
      return Json(data); 
     } 

     [HttpPost] 
     public IActionResult Get([FromBody] SearchCriteria searchCriteria) 
     { 
      return new ObjectResult(searchCriteria); 
     } 
    } 
} 

樣本POST請求將是：

public search() { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     let searchCrit = this.searchCriteria; 
     this.http.post('/api/RocheClinicalTrial/', searchCrit, options) 
      .subscribe(result => { 
       console.log(result); 
      }); 

    }