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

【问题标题】：ASP.NET MVC - How to display data in Razor view returned from Webapi controllerASP.NET MVC - 如何在从 Webapi 控制器返回的 Razor 视图中显示数据
【发布时间】：2019-06-27 06:28:47
【问题描述】：

我在表单的页面加载时调用 Web API 控制器并获取数据，这是从我的 JS 文件中获取的，并且数据按预期正确获取。

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

$scope.employeeForm.EmpDetails 的详细信息正确。

我需要在我遇到问题的剃刀视图引擎中显示数据，我是这种开发的新手。

ViewBag，强类型模型在这里不起作用，因为我从 Web API 控制器返回数据，而我的不是强类型剃刀视图。

EmpDetails 包含 EmpID、EmpFirstName、EmpLastName、EmpLocationj 等信息

【问题讨论】：

标签： c# angularjs asp.net-mvc asp.net-web-api

【解决方案1】：

亲，有两种方法

如果您一定要使用 Razor，那么您应该在 mvc 控制器中使用您的 api，从您的 api 获取数据并将其以模型的形式返回给您的 Razor 视图，然后您将拥有强类型模型以用于你的 Razor 视图
如果你没有被绑定，那么它非常简单，如果你在 javascript 代码中获取数据。只需使用它来使用 JavaScript 代码填充您的视图。
如果你使用的是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>

【讨论】：

@{ 你的 javascript 在这里 } 或 @section Scripts{ }
谢谢 AB，yardpenalty - 我指的是我的 cshtml 中的脚本文件...我需要将数据绑定到我的 html 控件...名字：
但这似乎不起作用。
从您的 js 代码看来，您使用的是 angularjs 1.x，并且您想将 html 表单控件与 $scope.employeeForm.EmpDetails 对象绑定？
@AB Hunzai - 是的，我正在使用 Angular 1 并且想将数据绑定到 html 控件。
我已经更新了我的答案并添加了 angularjs 1.x 样式表单的示例，希望对您有所帮助。

【解决方案2】：

根据您在评论中告诉开发人员，通过 html 绑定数据，您可以尝试这个解决方案。

首先在 .cshtml 的标头部分中初始化 model，然后使用 @model 并通过添加 来给出其字段名称。（点）签名并将数据绑定到您的 html 控件

【讨论】：

karan - 我的不是强类型模型，我无法将其绑定到视图