は、どのように私はMVC

Question

に取得した角度2を使用してアクションを投稿することができ、私は角度2に新しいですし、GETとPOSTアクションを呼び出すときに、MVCのプロジェクトでそれを使用する方法を知っていただきたいと思います：

レッツは、私が持っていると言います 1）GETEMPLOYEE：リスト従業員情報 2）UpdateEmployee：2つのアクションでEmployeeController更新、従業員の情報

角度2を使用せずに、我々は簡単にそれに対処するためにビューを使用することができます。しかし、Angular 2を使用したい場合は、どうすればいいですか？あなたは角度2を使用してデータを取得または送信するアクションを呼び出す方法を学ぶことができるようにいくつかのサンプルを提供してください。

おかげ

Answer 1

約束通り：

コントローラ側から：（コントローラはAPIConnexionController.csという）

[HttpGet] 
public IActionResult Connexion(string aLogin, string aMdp) 
{ 
    // Do your stuff 
} 

---

あなたはAngular2からセットアップあなたの方法を、その後することができますサービスまたはコンポーネントをhttp：//www.cisco.com/jpにアクセスしてください。

（私の場合）

auth.service.ts

private controllerURL: string = "/APIConnexion/auth"; 

login(aLogin: string, aMdp: string) { 
    // Setup parameters to send to ASP controller 
    let params = new URLSearchParams(); 
    params.set("aLogin", aLogin); // => Left side must match Controller method parameter 
    params.set("aMdp", aMdp); 

    // Setup the http request 
    let lHttpRequestBody = params.toString(); 
    let lControllerAction: string = "/connexion/?"; 
    let lControllerFullURL: string = this.controllerURL + lControllerAction; 

    // Call the ASP.NET controller : APIController 
    return this.http.get(lControllerFullURL + lHttpRequestBody) 
     .map((res: any) => { 
      let data = res.json(); 

      // Manage cases 
      switch (data.status) { 
       case "success": 
        this.isLoggedIn = true; 
        this.lcLogin = aLogin; 
        break; 
       case "error": 
        this.isLoggedIn = false; 
        throw new Error("Failure : " + data.message); 
      } 
     } 
     ).catch(this.handleError); 
} 

そしてちょうどあなたのテンプレートのHTMLにあなたのAngular2コンポーネントからあなたが持っているデータを表示するか、単に私のlogin()方法のようないくつかのアクションを実行します。

// Manage authentication 
login(username, password) { 
    this.authService.login(username, password) 
     .subscribe(() => { 
      // Call the service Method 
      if (this.authService.isLoggedIn) { 
       // Redirect the user to master component 
       this.router.navigate(['/master/dashboard']); 
      } 
     }); 
}