Angular and ASP NET Web API

this is part 26 of angular 2 tutorial in this video well discuss creating an asp.net web api service to retrieve employee's data from a database table and in our next video we'll discuss calling this asp.net web api service using angular so the first step is to create the employee's table here is the sequel script to create the table and populate it with test data I will have the script available on my blog and in the description of this video I've already executed the script and at the moment within our employees table we have got six rows and this employees table is present in a database called employee dB next let's create our asp.net Web API project we are going to keep this project separate from our angular project here is the angular project that we have been working with so far in this video series so to the solution right here let's add a new project let's right-click on the solution ad and we want to add a new project on the Left menu right here select fab from the middle pane select asp.net web application and let's name a Web API project employee Web API service and then click OK on the screen right here select Web API and click OK the Web API project is successfully created now let's use a do dotnet entity data model to retrieve data from our database table so to this project let's add a new area door to the entity data model so let's right click on the project add and we want to add a new item on the Left select data from the middle pane select ad or dotnet entity data model and let's name our entity model employee data model and then click Add we want to generate our entity data model from the database so select this first option entity framework designer from database and then click Next on the screen click new connection button this is going to open up a vendor where we can specify the details about database server so I'm going to work with sequel server that's installed on my local machine so the server name in this case is going to be dot and I'm going to use Windows authentication and from this drop-down list select the database which contains your employees table in my case it's present in this database employee DBA click test connection notice we get the message test connection succeeded click OK and then click OK right here and this is going to save the connection string in web config file with this named employee DB entities I'm going to leave that default name there and then click Next now this is going to bring up all the tables that we have in our employee DB database at the moment we've got only one table and that is employees table so select the table and then click finish the ato dotnet data model is successfully created now let's add a very big controller to our asp.net Web API project so right leg on the controllers folder within our Web API project and select add and we want to add a new controller from this window select Web API to controller empty and then click add let's name our controller employees controller and then click add the employees controller is successfully created within this controller let's include a method which is going to return us the list of all employee objects this method is going to be public and it's going to return I enumerable of employee objects if you're wondering where did we get this employee object from the IDEO dotnet entity framework has provided us that class and let's call this method get this method is going to respond to get requests and we are going to make use of another class called employee DB entities let's call the instance entities equals new employee DB entities now if you're wondering what this class is and they did we get this from again a do dot identity framework provided us this class this class helps us to connect you to the employee DVD which contains our employees table now to get the list of employees we can use the entities object and it has got employees property and on that just called to list which is going to return us the list of employee objects and we want to return that list from this method so this method is going to return us the list of all employee objects let's include another overloaded version of get method this method is going to take employee code and we know employee code is of type string and when we pass employee code we want to return that specific employee with that employee code so here instead of returning the entire list let's use first our default and we want an employee whose code is equal to whatever we are passing into this method and we don't want this method to return and ienumerable of employee objects instead we want to return that one employee whose code matches with the one that we are passing is a parameter to this method so with all these changes in place let's view this project our Web API project in the closer so I'm going to right click on the project and then select view and I want to view it in the browser in Google Chrome which is my default so here is the home page of our web api service now let's navigate to slash API slash employees notice we get the list of all employees every employee has got employee code now what we want to be able to do is we want to pass the employee code in the URL like this and we do that this method within our employees controller which has got cold as a parameter will respond and this method is going to return as that specific employee let's see if that happens so when we hit enter here with employee code in the URL look at that we still get the list of all employees and that's basically because if you look at this app and its co-star folder but in this we have this file web API config dots yes this file we have the default route for our web api and look at the name of the parameter button this default route this is named ID and within our controller we name the parameter of our method code so there's a mismatch so let's change ID to code here and here as well and let's give our solution a build and reload this webpage notice now we only get that specific employee when we remove the code from the URL we get the list of all employees and here is the employee controller code in our next video we'll discuss how to call this Web API service using angular thank you for listening and have a great day

Channel: kudvenkat

Views: 175,742

Keywords: angular 2 asp.net web api, asp net web api service for angular, angular web api service

Id: FQ__z26TsHU

Length: 7min 34sec (454 seconds)

Published: Mon Aug 07 2017