Show WebAPI View from Stored Procedure in Agular 7 applicationSelect columns from result set of stored procedureWhat is a stored procedure?Insert results of a stored procedure into a temporary tableList of Stored Procedures/Functions Mysql Command LineFunction vs. Stored Procedure in SQL ServerSQL Server - SELECT FROM stored procedureCreating stored procedure and SQLite?How do I find a stored procedure containing <text>?How to pass an array into a SQL Server stored procedureSearch text in stored procedure in SQL Server
How to properly maintain eye contact with people that have distinctive facial features?
Accidentally cashed a check twice
Looking for an old image of designing a cpu with plan laid out / being edited on a literal floor
If Sweden was to magically float away, at what altitude would it be visible from the southern hemisphere?
When was the word "ambigu" first used with the sense of "meal with all items served at the same time"?
Why is there a need to modify system call tables in Linux?
Where can I find the list of all tendons in the human body?
Scala list with same adjacent values
What if you don't bring your credit card or debit for incidentals?
What is the difference between a game ban and a VAC ban in Steam?
Rotated Position of Integers
Self-Preservation: How to DM NPCs that Love Living?
What does War Machine's "Canopy! Canopy!" line mean in "Avengers: Endgame"?
Why does the UK have more political parties than the US?
Starting VLC from command line always puts the window behind other windows
How can I stop my presentation being derailed by audience questions?
What is the purpose of std::forward()'s rvalue reference overload?
California: "For quality assurance, this phone call is being recorded"
How can I offer a test ride while selling a bike?
How can a single Member of the House block a Congressional bill?
Asking bank to reduce APR instead of increasing credit limit
What is the difference between nullifying your vote and not going to vote at all?
What are the problems in teaching guitar via Skype?
The deliberate use of misleading terminology
Show WebAPI View from Stored Procedure in Agular 7 application
Select columns from result set of stored procedureWhat is a stored procedure?Insert results of a stored procedure into a temporary tableList of Stored Procedures/Functions Mysql Command LineFunction vs. Stored Procedure in SQL ServerSQL Server - SELECT FROM stored procedureCreating stored procedure and SQLite?How do I find a stored procedure containing <text>?How to pass an array into a SQL Server stored procedureSearch text in stored procedure in SQL Server
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
-1
is there a way to show my View, which I generated inside of my WebAPI Project in my Angular 7 application?
I already wrote the c# code in my controller, but the api isn't even shown inside 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;
The code to display it directly in the WebAPI is as easy as
public ActionResult Index()
DBModel sd = new DBModel();
return View(sd.Fun_SL());
in the home.controller and
@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>
in the Index.cshtml
angular asp.net-web-api stored-procedures asked Mar 24 at 11:04
ger scorpionger scorpion
45
add a comment |
-1
is there a way to show my View, which I generated inside of my WebAPI Project in my Angular 7 application?
I already wrote the c# code in my controller, but the api isn't even shown inside 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;
The code to display it directly in the WebAPI is as easy as
public ActionResult Index()
DBModel sd = new DBModel();
return View(sd.Fun_SL());
in the home.controller and
@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>
in the Index.cshtml
angular asp.net-web-api stored-procedures asked Mar 24 at 11:04
ger scorpionger scorpion
45
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03
add a comment |
-1
-1
-1
1
is there a way to show my View, which I generated inside of my WebAPI Project in my Angular 7 application?
I already wrote the c# code in my controller, but the api isn't even shown inside 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;
The code to display it directly in the WebAPI is as easy as
public ActionResult Index()
DBModel sd = new DBModel();
return View(sd.Fun_SL());
in the home.controller and
@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>
in the Index.cshtml
angular asp.net-web-api stored-procedures asked Mar 24 at 11:04
ger scorpionger scorpion
45
is there a way to show my View, which I generated inside of my WebAPI Project in my Angular 7 application?
I already wrote the c# code in my controller, but the api isn't even shown inside 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;
The code to display it directly in the WebAPI is as easy as
public ActionResult Index()
DBModel sd = new DBModel();
return View(sd.Fun_SL());
in the home.controller and
@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>
in the Index.cshtml
angular asp.net-web-api stored-procedures angular asp.net-web-api stored-procedures asked Mar 24 at 11:04
ger scorpionger scorpion
45
asked Mar 24 at 11:04
ger scorpionger scorpion
45
edited Mar 24 at 11:09
ger scorpion
asked Mar 24 at 11:04
ger scorpionger scorpion
45
asked Mar 24 at 11:04
ger scorpionger scorpion
45
asked Mar 24 at 11:04
ger scorpionger scorpion
45
45
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03
add a comment |
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03
add a comment |
2 Answers
2
active
oldest
votes
0
ANGULAR
display in 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>
typescript display
export class AptListComponent implements OnInit
constructor(private service: AptService)
ngOnInit()
this.service.refreshList();
populateForm(emp: Apt)
this.service.formData = Object.assign(, emp);
typescript service
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
corrected controller:
[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;
answered Mar 24 at 19:06
ger scorpionger scorpion
45
add a comment |
-1
Server Side :
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;
Clientside : 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.
);
Let me know if you find any difficulty in producing the output what you wanted.
The above code produces the following ouput at my side.
answered Mar 24 at 12:41
UsmanUsman
1,10322761
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55323141%2fshow-webapi-view-from-stored-procedure-in-agular-7-application%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
ANGULAR
display in 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>
typescript display
export class AptListComponent implements OnInit
constructor(private service: AptService)
ngOnInit()
this.service.refreshList();
populateForm(emp: Apt)
this.service.formData = Object.assign(, emp);
typescript service
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
corrected controller:
[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;
answered Mar 24 at 19:06
ger scorpionger scorpion
45
add a comment |
0
ANGULAR
display in 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>
typescript display
export class AptListComponent implements OnInit
constructor(private service: AptService)
ngOnInit()
this.service.refreshList();
populateForm(emp: Apt)
this.service.formData = Object.assign(, emp);
typescript service
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
corrected controller:
[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;
answered Mar 24 at 19:06
ger scorpionger scorpion
45
add a comment |
0
0
0
ANGULAR
display in 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>
typescript display
export class AptListComponent implements OnInit
constructor(private service: AptService)
ngOnInit()
this.service.refreshList();
populateForm(emp: Apt)
this.service.formData = Object.assign(, emp);
typescript service
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
corrected controller:
[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;
answered Mar 24 at 19:06
ger scorpionger scorpion
45
ANGULAR
display in 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>
typescript display
export class AptListComponent implements OnInit
constructor(private service: AptService)
ngOnInit()
this.service.refreshList();
populateForm(emp: Apt)
this.service.formData = Object.assign(, emp);
typescript service
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
corrected controller:
[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;
answered Mar 24 at 19:06
ger scorpionger scorpion
45
answered Mar 24 at 19:06
ger scorpionger scorpion
45
answered Mar 24 at 19:06
ger scorpionger scorpion
45
answered Mar 24 at 19:06
ger scorpionger scorpion
45
45
add a comment |
add a comment |
-1
Server Side :
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;
Clientside : 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.
);
Let me know if you find any difficulty in producing the output what you wanted.
The above code produces the following ouput at my side.
answered Mar 24 at 12:41
UsmanUsman
1,10322761
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
add a comment |
-1
Server Side :
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;
Clientside : 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.
);
Let me know if you find any difficulty in producing the output what you wanted.
The above code produces the following ouput at my side.
answered Mar 24 at 12:41
UsmanUsman
1,10322761
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
add a comment |
-1
-1
-1
Server Side :
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;
Clientside : 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.
);
Let me know if you find any difficulty in producing the output what you wanted.
The above code produces the following ouput at my side.
answered Mar 24 at 12:41
UsmanUsman
1,10322761
Server Side :
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;
Clientside : 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.
);
Let me know if you find any difficulty in producing the output what you wanted.
The above code produces the following ouput at my side.
<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><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>answered Mar 24 at 12:41
UsmanUsman
1,10322761
edited Mar 24 at 12:50
answered Mar 24 at 12:41
UsmanUsman
1,10322761
answered Mar 24 at 12:41
UsmanUsman
1,10322761
answered Mar 24 at 12:41
UsmanUsman
1,10322761
1,10322761
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
add a comment |
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
The OP is using Angular 7, not AngularJS.
– R. Richards
Mar 24 at 14:24
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
then, OP need to use Typescript and components based strategy rather than above AngularJS specific code. But I believe, he should use Microsoft SPA template with angular CLI application within that.
– Usman
Mar 24 at 14:54
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
I just have provided the idea, not the 100% corresponding implementation for Angular 7. But OP has to do the same for angular 7 just by considering directives and components methodology.
– Usman
Mar 24 at 15:09
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
Hello, Usman thank you for your answer. I will try to implement it
– ger scorpion
Mar 24 at 17:41
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55323141%2fshow-webapi-view-from-stored-procedure-in-agular-7-application%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Normally your angular app doesn't start like this. Your angular app should represent angular module. Register your client side controllers in that module. Expose controller get methods to feed the data at index page. Continuing in preparing sample answer for you...
– Usman
Mar 24 at 11:17
You should create independent angular project by angular CLI and add service.ts and use HttpClient to call your API
– Hien Nguyen
Mar 24 at 14:03