通过 Angular 将数据从 html 传递到 Web API答案

【问题标题】：Passing data from html to Web API via Angular通过 Angular 将数据从 html 传递到 Web API
【发布时间】：2016-01-21 16:45:57
【问题描述】：

我有一个 Web API，我的存储库类是：

public class myRepository
{

public myClasses.Type[] GetAllTypes()
{

    return new myClasses.Type[]
    {
        new myClasses.Type 
        {
            typeId="1",
            typeVal = "New"
        },
        new myClasses.Type 
        {
            typeId="2",
            typeVal = "Old"
        }
   };

}

public myClasses.Employee[] GetAllEmployees()
{

    return new myClasses.Employee[]
    {
        new myClasses.Employee 
        {
            empId="111111",
            empFName = "Jane",
            empLName="Doe"
        },
        new myClasses.Employee 
        {
            empId="222222",
            empFName = "John",
            empLName="Doe"
        }
   };

}

public bool VerifyEmployeeId(string id)
{

    myClasses.Employee[] emp = new myClasses.Employee[]
    {
        new myClasses.Employee 
        {
            empId="111111",
            empFName = "Jane",
            empLName="Doe"
        },
        new myClasses.Employee 
        {
            empId="222222",
            empFName = "John",
            empLName="Doe"
        }
   };

    for (var i = 0; i <= emp.Length - 1; i++)
    {
        if (emp[i].empId == id)
            return true;
    }
    return false;
}
}

这是我的控制器：

public class myClassesController : ApiController
{
private myRepository empRepository;

public myClassesController()
{
    this.empRepository = new myRepository();
}

public myClasses.Type[] GetTypes()
{
    return empRepository.GetAllTypes();
}

public myClasses.Employee[] GetEmployees()
{
    return empRepository.GetAllEmployees();
}

[HttpGet]
public bool VerifyEmployee(string id)
{
    return empRepository.VerifyEmployeeId(string id);
}
}

现在我创建了一个包含 angularJS 的 Web 应用程序。这是我的 html (EmployeeLogin.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Employee ID</title>
<script src="../../Scripts/jquery-2.2.0.min.js"></script>
<script src="../../Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="../../Scripts/angular.js"></script>
<script src="EmployeeLoginCtrl.js"></script>
</head>
<body ng-app="myClassesApp">
    <div ng-controller="myClassesController">
     <form ng-submit="ValidateEmployeeId()" method="get" id="frmLogin" action="">
        <input ng-model="empId" type="text" id="txtEmpId" />
        <br />
        <input type="submit" value="Submit" id="btnSubmit" />
        <br />
        <span id="lblMsg">{{EmployeeValidate}}</span>
    </form>
  </div>
</body>
</html>

我想要完成的是当用户输入他们的ID时，我想调用myController函数VerifyEmployee，将用户输入的ID传递给它，并将成功或失败的消息输出到网页。

我需要一些帮助来修复我的角度控制器。这是我到目前为止得到的：

(function () {
    angular.module("myClassesApp", []).controller("myClassesController", myValidateFunction);
    myValidateFunction.$inject("$scope", "$http");
    function myValidateFunction($scope, $http) {
        $scope.ValidateEmployeeId = function () {
            alert($scope.empId);
            $http.get('http://localhost:49358/api/myClasses/VerifyEmployee/' + $scope.empId).
                   then(function (result) {
                       alert(result);
                      $scope.EmployeeValidate = result.data;
                   });
                }

    };
})();

我的主要问题是如何将 id 从文本框传递到角度控制器？

我如何确保仅在用户提交表单时调用我的角度函数，而不是在页面最初加载时调用？

关于从 Web API 获取数据并将其显示在页面上，有人可以为我指明正确的方向吗？

到目前为止，页面加载完毕，消息标签中立即显示“false”。然后我输入 ID 并单击提交，然后什么也没有发生。如何确保调用 angular 函数？

【问题讨论】：

您应该可以访问您在控制器的 UI 中绑定的任何内容。
不确定你想说什么

标签： angularjs asp.net-web-api

【解决方案1】：

因此，在您的 UI 中，无论您要绑定到什么数据（ng-model 等），您都可以在 Angular 中访问。在您的示例中，您有<input ng-model="empId" type="text" id="txtEmpId" />，但我没有看到$scope.empId..empId 是从哪里来的？

用户界面

<div ng-app ng-controller="myClassesController">
    <div>Enter your User ID:</div>
    <input ng-model="empId"></input>
    <input type="submit" ng-click="checkUser()" value="Login"></input>
</div>

控制器

    function myClassesController($scope) {
        $scope.empId = '';

    $scope.checkUser = function () {
     // hit your api with user id
     alert($scope.empId);
    }
}

这是一个适合您的工作示例：JSFiddle

【讨论】：

但是如何从 UI 文本框中获取值以传递给我的 Web api？
@ElenaDBA 我很困惑..您在变量empId 中有值。在调用 API 控制器时将其添加为参数。
其实没有，我那里没有值。我只是在尝试不同的东西，因为我是 Angular 的新手。我很可能在那里做错了什么
@ElenaDBA 嗯..你检查我的例子了吗？你基本上可以复制大部分内容
马克，我更新了我的控制器代码，现在我的 empId 通过范围传递给它，但看起来我的 $http.get 请求出了点问题。