Показать представление WebAPI из хранимой процедуры в приложении Agular 7 - PullRequest
Новая
       26

Показать представление WebAPI из хранимой процедуры в приложении Agular 7

0 голосов
/ 24 марта 2019

есть ли способ показать мой View, который я сгенерировал внутри моего проекта WebAPI в моем приложении Angular 7?

Я уже написал код c # в моем контроллере, но API даже не показан внутри сваггера. 

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

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

ANGULAR отображать в 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;
            }
        }
0 голосов
/ 24 марта 2019

Сторона сервера: 

 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>

ClientSide: 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.

     });

Дайте мне знать, если вы обнаружите какие-либо трудности с получением результата, который вы хотели. Приведенный выше код производит следующий вывод на моей стороне.

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...