在 Angular 7 应用程序中显示来自存储过程的 WebAPI 视图答案

【问题标题】：Show WebAPI View from Stored Procedure in Angular 7 application在 Angular 7 应用程序中显示来自存储过程的 WebAPI 视图
【发布时间】：2019-09-13 20:14:48
【问题描述】：

有没有办法显示我在 Angular 7 应用程序的 WebAPI 项目中生成的视图？

我已经在控制器中编写了 c# 代码，但是 api 甚至没有在 swagger 中显示。

public IEnumerable<Apt> ShortLow()
{
    List<Apt> emplist = new List<Apt>();
    using (DBModel db = new DBModel())
    {
        var results = db.Fun_SL().ToList();
        foreach (var result in results)
        {
            var apts = new Apt()
            {
                AptID = result.AptID,
                EyrieID= result.EyrieID,
                symbol = result.symbol,
                isin = result.isin,

            };
            emplist.Add(apts);
        }
        return emplist;
    }
}

直接在 WebAPI 中显示它的代码很简单

public ActionResult Index()
{
    DBModel sd = new DBModel();

    return View(sd.Fun_SL());
}

在 home.controller 和

@model IEnumerable<WebAPI.Models.Apt>
<table>
    <tr>
        <th>symbol</th>
        <th>isin</th>
    </tr>
    @foreach (var result in Model)
    {
    <tr>
        <td>@result.symbol</td>
        <td>@result.isin</td>

    </tr>
    }
</table>

在Index.cshtml中

【问题讨论】：

通常你的 Angular 应用程序不会这样启动。您的 Angular 应用程序应该代表 Angular 模块。在该模块中注册您的客户端控制器。公开控制器获取方法以在索引页面提供数据。继续为您准备示例答案...
您应该通过 Angular CLI 创建独立的 Angular 项目并添加 service.ts 并使用 HttpClient 调用您的 API

标签： angular asp.net-web-api stored-procedures

【解决方案1】：

角度在html中显示

<table>
      <tr>
          <th>symbol</th>
          <th>isin</th>
      </tr>

      <tr *ngFor="let emp of service.list">
          <td>{{emp.symbol}}</td>
          <td>{{emp.isin}}</td>
      </tr>

</table>

打字稿显示

export class AptListComponent implements OnInit {
  constructor(private service: AptService) { }

  ngOnInit() {
    this.service.refreshList();
  }

  populateForm(emp: Apt) {
    this.service.formData = Object.assign({}, emp);
  }

}

打字稿服务

import { Injectable } from '@angular/core';
import { Apt } from './Apt.model';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AptService {

  formData: Apt;
  list: Apt[];
  readonly rootURL = 'http://localhost:50389/api';

  constructor(private http: HttpClient) { }

  refreshList() {
    this.http.get(this.rootURL + '/ShortLow')
      .toPromise().then(res => this.list = res as Apt[]);
  }

}

WebAPI 更正控制器：

     [HttpGet]
        public IEnumerable<Apt> ShortLow()
        {
            List<Apt> emplist = new List<Apt>();
            using (DBModel db = new DBModel())
            {
                var results = db.Fun_SL().ToList();
                foreach (var result in results)
                {
                    var apts = new Apt()
                    {
                        AptID = result.AptID,
                        EyrieID= result.EyrieID,
                        symbol = result.symbol,
                        isin = result.isin,

                    };
                    emplist.Add(apts);
                }
                return emplist;
            }
        }

【讨论】：

【解决方案2】：

服务器端：

 public LowController : ApiController
 {

    [HttpGet]
    public IActionResult<IEnumerable<Apt>> ShortLow()
    {
        List<Apt> emplist = new List<Apt>();
        using (DBModel db = new DBModel())
        {
            var results = db.Fun_SL().ToList();
            foreach (var result in results)
            {
                var apts = new Apt()
                {
                    AptID = result.AptID,
                    EyrieID= result.EyrieID,
                    symbol = result.symbol,
                    isin = result.isin,

                };
                emplist.Add(apts);
            }
            return emplist;
        }
    }

客户端：Index.html

<html>
<body ng-app="shortLowApp" ng-controller="shortLowController">

    <table>
        <tr>
            <th>Symbol</th>
            <th>isin</th>
        </tr>
            <tr ng-repeat="data in symbols">
                <td>{{ data.symbol }}</td>
                <td>{{ data.isin }}</td>
            </tr>        
    </table>

    <script src="Scripts/lib/angular.js"></script>
    <script src="Scripts/app.js"></script>

</body>
</html>

客户端：app.js

// <reference path="lib/angular.js" />

var shortLowApp = angular.module('shortLowApp', []);

var shortLowController = shortLowApp.controller('shortLowController', function 
($scope, $http) {

        $scope.symbols =  [
        {
            "symbol": "1",
            "isin": "Super Cateogry"

        },

        {
            "symbol": "2",
            "isin": "Top Cateogry"

        },

        {
            "symbol": "3",
            "isin": "Sample Cateogry"

        },

        {
            "symbol": "4",
            "isin": "Product Cateogry"
        }
    ];

    // for producing above array, return a JSON array from your Server side Angular Controller method by using http.Get call.

        //$http.get("https://localhost:44370/api/low/ShortLow").then(function (symbolData) {
    //    $scope.symbols = symbolData.symbols;
    //});
So, un comment above HTTP get call and comment the hardcoded array. Make sure, you have some controller at Web api side, which produces the data.

     });

如果您在生成您想要的输出时发现任何困难，请告诉我。上面的代码在我身边产生以下输出。

【讨论】：

OP 使用的是 Angular 7，而不是 AngularJS。
那么，OP 需要使用 Typescript 和基于组件的策略，而不是上面的 AngularJS 特定代码。但我相信，他应该在其中使用带有角度 CLI 应用程序的 Microsoft SPA 模板。
我只是提供了这个想法，而不是 Angular 7 的 100% 对应实现。但是 OP 必须通过考虑指令和组件方法对 Angular 7 做同样的事情。
您好，乌斯曼，感谢您的回答。我会努力实现它