如何在 MVC 中使用 Angular 2 获取和发布动作答案

【问题标题】：how can I get and post an action using angular 2 in MVC如何在 MVC 中使用 Angular 2 获取和发布动作
【发布时间】：2017-05-11 06:24:07
【问题描述】：

我是 Angular 2 的新手，想知道在调用 get 和 post 操作时如何在 mvc 项目中使用它：

假设我有一个包含 2 个操作的 EmployeeController： 1）GetEmployee：列出员工信息 2）UpdateEmployee：更新员工信息

不使用 Angular 2，我们可以轻松地使用视图来处理它。但是，如果我想使用 Angular 2，我该怎么做呢？您能否提供一些示例，以便我学习如何使用 Angular 2 调用操作来获取或发布数据？

谢谢

【问题讨论】：

我实际上有一些例子给你，明天早上会在答案中发布它们
谢谢，期待。
完成！这是我自己的工作示例
如果您的问题得到解决，请不要忘记标记为答案。将不胜感激！ :-)

标签： asp.net-mvc angular

【解决方案1】：

如约而至：

从控制器端：（控制器名为APIConnexionController.cs）

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

然后，您可以从 Angular2 服务或组件设置您的方法，以对您的控制器进行 http 调用，如下所示：

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);
}

然后只需将来自 Angular2 组件的数据显示到模板 HTML 中，或者像我的 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']);
            }
        });
}

【讨论】：

感谢您的回复。当我使用该服务时，是否意味着我仍然有视图或者我们将视图替换为 html？
服务就像一个类，你在其中执行一些逻辑并希望存储一些状态。您仍然拥有组件的 html 作为视图。如果你想使用一些 .cshtml 视图，我知道如果你有兴趣，你可以告诉组件从局部视图中获取他的模板。