ASP.NET MVC-如何在Webapi控制器返回的Razor视图中显示数据

Question

I am invoking a Web API controller on page load of my form and getting data, this is from my JS file and data is fetched correctly as expected. 我正在从表单的页面加载中调用Web API控制器并获取数据，这是从我的JS文件中获取的，并且数据已按预期正确提取。

  var empDetails = // code to invoke my api controller //
  empDetails.$promise.then(function (empInfo) {
      $scope.employeeForm.EmpDetails = empInfo.EmployeeDetails;
  });

$scope.employeeForm.EmpDetails has the details correctly. $scope.employeeForm.EmpDetails具有正确的详细信息。

I need to display the data in my razor view engine which is where I am having an issue, I am new to this kind of development. 我需要在我的剃须刀视图引擎中显示数据，这是我遇到的问题，我是这种开发的新手。

ViewBag, strongly typed model doesn't work here as I am returning data from a Web API controller and mine is not a strongly typed razor view. ViewBag，强类型模型在这里不起作用，因为我从Web API控制器返回数据，而我的不是强类型剃刀视图。

EmpDetails has info like EmpID, EmpFirstName, EmpLastName, EmpLocationj EmpDetails具有类似EmpID，EmpFirstName，EmpLastName，EmpLocationj的信息

Answer 1

Dear there are two ways 亲爱的有两种方法

If you are bound to use Razor, then you should consume your api in mvc controller, get data from your api and return it in a model to your Razor view, then you will have strongly typed model to use in your Razor view 如果您一定要使用Razor，则应在mvc控制器中使用api，从api中获取数据，然后将其以模型返回到Razor视图，然后将在Razor视图中使用强类型模型
If you are not bound then its pretty simple, if you are getting data in javascript code. 如果您不受约束，那么它很简单，如果您正在使用javascript代码获取数据。 just use it to populate your view using JavaScript code. 只需使用它即可使用JavaScript代码填充您的视图。
If you are using angular 1.x, then here is a angularjs 1.x form example 如果您使用的是angular 1.x，那么这里是angularjs 1.x表单示例

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
</body>
</html>

Answer 2

Developer as per you are telling in comment that to bind data via html for that this solution you can try this. 按照您在注释中告诉开发人员的观点，可以通过html绑定此解决方案的数据，您可以尝试一下。

First initialize model in .cshtml in the header part of the .cshtml after that use @model and give their field name by adding . 首先，在.cshtml的标头部分的.cshtml中初始化模型，然后使用@model并通过添加为其指定字段名称。 (dot) sign and bind data to your html control （点）对数据进行签名并将其绑定到您的html控件

ASP.NET MVC-如何在Webapi控制器返回的Razor视图中显示数据

问题描述

2 个解决方案

解决方案1
1 2019-02-03 06:53:04

解决方案2
0 2019-02-03 08:23:56

ASP.NET MVC-如何在Webapi控制器返回的Razor视图中显示数据

问题描述

2 个解决方案

解决方案1 1 2019-02-03 06:53:04

解决方案2 0 2019-02-03 08:23:56

解决方案1
1 2019-02-03 06:53:04

解决方案2
0 2019-02-03 08:23:56