Passing data from html to Web API via Angular

Question

I have a Web API where my repository class is:

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;
}
}

and here is my controller:

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);
}
}

Now I have created a web application where I included angularJS. Here is my 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>

What I want to accomplish is when the user enters their ID, I want to call myController function VerifyEmployee, pass it the ID entered by the user and output message of success or failure to the web page.

I am in need of some assistance fixing up my angular controller. here is what I got so far:

(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;
                   });
                }

    };
})();

My main question is how do I pass the id from the textbox to the angular controller?

Also how I ensure my angular function is only called when the form is submitted by the user, not when the page loads initially?

Can someone please point me in the right direction in regards to getting data from Web API and displaying it on the page?

So far the page loads, immediately displays "false" in the message label. then I enter ID and click submit and then nothing happens. ow can I ensure that angular function gets called?

You should have access to whatever you're binding in the UI in your controller. — Mark C.
– Mark C., Commented Jan 21, 2016 at 16:50

Mark C. · Accepted Answer · 2016-01-21 17:58:12Z

0

So, in your UI, whatever you're data-binding to (ng-model, etc..) you have access to in Angular. In your example, you have <input ng-model="empId" type="text" id="txtEmpId" /> but I don't see a $scope.empId..Where is empId coming from then?

UI

<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>

Controller

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

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

Here's a working example for you : JSFiddle

answered Jan 21, 2016 at 17:58

Mark C.

6,5004 gold badges38 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Coding Duchess Over a year ago

But how would I grab the value from the UI textbox to pass to my web api?

Mark C. Over a year ago

@ElenaDBA I'm confused..You have the value inside the variable empId. You add that as a parameter when you make the call to your API Controller.

Coding Duchess Over a year ago

Actually no, I do not have a value there. I was just trying out different things as I am new to Angular. it is very likely I did something wrong there

Mark C. Over a year ago

@ElenaDBA Hm.. did you check my example? You could basically copy most of it

Coding Duchess Over a year ago

Mark, I updated my controller code and now I empId is passed into it via scope, but looks like something goes wrong with my $http.get request.

|

Collectives™ on Stack Overflow

Passing data from html to Web API via Angular

1 Answer 1

UI

Controller

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UI

Controller

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related