Binding select element with database data in Blazor

they see spot 30 of plays a tutorial in this video we'll discuss how to retrieve data from a database table and then bind the data to a drop-down list let's understand this with an example at the moment within our database we've got two tables departments and employees within this departments table we have the list of all departments and in the employees table we have the list of all employees and if we take a look at this employee Sarah at department ID is 3 3 is payroll so now when we click Edit on Sarah we have department drop-down list and notice by default on the initial form load our department payroll is selected and when we drop this town we can see the list of all departments from our departments database table now if we change the selection from payroll to ID we want this new selected value to be automatically bound to the respective property in our component class so we kind of want to weighted binding on the initial form load we want to display her department and then if we change the selection back we want this value to be bound to the respective property within our component class this is the same project we've been working with so far in this video series at the moment as you can see within our solution we've got three projects and it is this REST API project that is responsible for retrieving data from the underlying database and with this project we have this department repository that is responsible for retrieving data from the department's database table we implemented this repository in our previous videos in this series in the interest of time what I've done is made a small change to this interface and that is make these methods return a task because these are database operations and we want them to be executed asynchronously that's the reason I made these two methods return a task and when we change the interface we have to change the corresponding implementation class as well and that implementation class is this department repository class notice it implements the interface I apartment repository and we have married the corresponding change both these methods care Department is now an async method and it returns a task of department and ket departments returns the list of all departments so this method is also async and it returns a task of ienumerable of department now if we take a look at the solution Explorer notice within the controllers folder of our API project we have employees controller this is the REST API controller and we implemented it in our previous videos in this series and this controller returns employee data so if we navigate to this URI / API / employees we see the list of all employees now again in the interest of time I have implemented this departments controller this is going to return departments data and the implementation of this controller is very similar to employees controller employees controller returns employee data and departments controller returns department data so if we take a look at this department's controller it has got two methods get departments as the name implies is going to return as the list of all departments and get department is going to return a specific department that is department by ID and the URI to get to this controller is / API slash the name of the controller the name of the controller here is departments so now if we navigate to slash API slash departments we see the complete list of departments so this is the API endpoint that we are going to use to retrieve data for the department drop-down list our next step is to call this departments REST API endpoint from our place of a project now there's nothing stopping us to call this endpoint directly from a blazer component but remember it's always a good practice to create a separate service for that if you recollect from our previous videos in this series notice in our blazer web project we've got services folder and within this folder we have this employee service we created this service in our previous videos in this series and service calls the employees REST API endpoint in the interest of time I've created this department service this is very similar to employee service the only difference is it calls the department's REST API endpoint so if we take a look at the interface we've got two methods and here is the implementation get departments calls API slash departments which is going to return us the list of all departments get department returns a department by ID so in the URI we also pass the ID our next step is to register the service with the asp.net Co dependency injection container and we do that in startup dot CS file in the configure services method pre registered department service just like the employee service our next step is to inject this service into our edit employee component because that's where we need the department drop-down list and edit employee component is in the pages folder this line right here injects the department service and this departments property holds the list of departments this is the property our cells list on the UI will bind to we'll see that in action in just a bit our next step is obviously to initialize this property with the list of departments and we do that in uninitialized async method so departments equals department service dot get departments our next step is to bind to this property in the view so let's open edit component raise file just below this email field let's include department what we have here is standard HTML and some bootstrap classes nothing really specific to blazer we have this label here that displays department and inside this div let's include the Select element for select element in Blazer we use input select component let's have the ID to department for two-way data-binding we use bind value attribute employees department-id is present in the employee object department ID property for styling we are using bootstrap form control class the list of options for the select element are going to come from this departments property within our component class so let's use a for each loop and the loop through each department in the departments collection property as we are looking through for each department we are creating a select option the value for the option is the department ID and the display text is the department name so with all these changes in place let's run our project and see what we've got so far we are on the home page let's click Edit on one of the employees we know Sarah's Department is payroll so notice on the initial page load we see the payroll department is selected and when I drop this down we see the complete list of departments now notice when I change the department we have an exception let's launch browser developer tools invalid operation exception input select does not support the type system dot in 32 the reason we have this exception is because we are binding our select element to Department ID property on the employee object and notice from the intelligence its type is integer binding a select element to an integer is not supported so to fix this button our component class let me create another property name is Department ID and the data type is string so within this on initialize a sync method within the string Department ID property let's store the employees Department ID let's convert this to a string using two string method and then in the view let's bind to this string property save all the changes and let's take one final look at the browser let's click Edit on one of the employees Sam's Department is HR so on the initial page load we see that and now if it's in the selection to a new department notice we no longer have that exception and remember this bind value attribute provides to a data binding this means this newly selected Department value is automatically stored in this department ID property we'll see this in action in our upcoming videos when we actually save this edited data in the underlying database table that's it in this video thank you for listening [Music] [Music]

Channel: kudvenkat

Views: 35,402

Keywords: blazor select list, blazor select bind, blazor select bind and onchange, blazor select bind list, blazor select option bind, blazor input select bind, blazor select two way binding, blazor dropdown list example, blazor dropdownlist component, blazor dropdown list selected value, blazor dropdown list, blazor select dropdown, blazor select example, blazor edit form select, blazor input select example, blazor select get value, blazor html select, select in blazor

Id: T1rTWvZL8ts

Length: 9min 33sec (573 seconds)

Published: Sun Apr 26 2020