Hey guys, I am Venkat, and this is part 19 of web development with Blazor video series.
In this video we'll discuss how to bind data from a database table to a drop-down list in
asp.net core Blazor. Another common use case is to bind an enum to a drop-down list, so
we'll be discussing binding an enum as well. Now, here's what we want to be able to do,
at the moment using this data grid we can perform CRUD operations, that is, create, read, update and
delete employees from the underlying Employees database table. To add a new employee we click
on this "Add" button and we have a new row here, and notice both Department and Gender columns,
we have a drop down list. Similarly, even when editing a row, by the way to edit a row there are
two options. One option is to select the row and then click the Edit button, and the other option
is to simply click on any of the rows. Again, notice we have the row in edit mode and both
department and gender columns have a drop down list. Gender is an enum and the department values
are coming from a database table, so let's see how to bind a drop-down list both to data coming from
a database table and to an enum. In the interest of time, here's what I've done in the background,
I've included this new component GridEdit.razor in the "Pages" folder and within this component,
I have a Syncfusion data grid. By the way, we discussed the basics of data grid and setting it
up from scratch in part 4 of this video series. The data source for this data grid is Employees
property which is right here and it is this client service that calls the server side REST API,
retrieves the data from the database table and populates the Employees property and we have this
Employees property set as the data source for the data grid and here are the list of columns that
we are displaying at the moment in the data grid employee first name, last name etc. So,
at this point if we take a look at this page in the browser, we see the employee data as
expected. So the first thing that we want to do is enable this data grid to be able to perform CRUD
operations. Now, for this data grid to be able to perform CRUD operations we have to tell it among
these columns which column is the primary key column. In our case, we know EmployeeId column
is the primary key column, so on the respective we simply set IsPrimaryKey = true.
Next, we want to allow adding editing and deleting employee rows and we have to tell
that to this data grid, so for that, just like how we're using this
component to specify paging options, we're going to use another component called
component. To specify editing options, on this component we set AllowAdding = true
AllowEditing = true and finally AllowDeleting = true.
Next, just above the datagrid header we want this toolbar with these buttons Add, Edit, Update,
Delete and Cancel. So, for that, on the data grid we include Toolbar property. The value for
this property is a new List. Here is the important bit to keep in mind, this string "Add"
is the key for "Add" button in the toolbar. Similarly "Edit" string is the key for "Edit"
button so on and so forth. So with all these changes in place, let's run our project and take
a look at the browser. There we go, we have the toolbar with Add, Edit, Update, Delete and Cancel
buttons. Now, before we do anything else, notice in the data grid we are displaying department
id values which are integers and doesn't make any sense to the end user, instead we want to display
the department name. So, for that on the grid where we are displaying the department id, on this
Employee object we have Department property which obviously returns the employee department and on
that we have DepartmentName. To make this work we have to tell entity framework to load employee
department record as well along with the employer record and we do that in EmployeeRepository class
which is present in the "Models" folder right here. It is this method that returns us the list
of all employees, so let's tell it to include respective departments as well, so for that
we specify a lambda, so for each employee we want the respective department as well.
Notice, Department column name is empty and at the bottom here we also have an unhandled exception
and if we take a look at the browser development tools, the exception is, object reference not
set to an instance of an object, basically a null reference exception, and that's because
when binding a complex object like Department to a grid column, we use a different syntax.
First of all, we don't need this "nameof" keyword here, and we also don't need this Employee.
prefix, so let's get rid of that and then Department.DepartmentName, we include in
double quotes. Now, we see the department name as expected, and when we click this "Add" button,
we have a new blank row which allows us to add a new employee, and by default,
notice, both for Department and Gender we have a text box, what we want is a drop down list.
These employee departments are present in the Departments database table. Now, we have
already created a REST API, so if we navigate to our root application url /api/departments,
we see the list of all departments. We created this REST API from scratch in part 5 of this
video series. So what we want to do is, call this REST API and bind this list of departments
to a drop-down list. In the interest of time in the "Services" folder, I added these two files
IDepartmentService and DepartmentService, these two files are very similar to IEmployeeService
and EmployeeService, basically these two services EmployeeService and DepartmentService
are client-side proxy services that call our server-side REST API. We discussed implementing
EmployeeService in our previous videos in this series. So, this DepartmentService is very
similar to it. In the interest of time I've added these files in the background. So, if we take a
look at IDepartmentService interface, notice it's pretty straightforward, you have two methods here,
GetAllDepartments(), which returns us the list of departments and GetDepartent() returns a specific
department by id, and we have the implementation in this file DepartmentService which obviously
implements the interface, we have a constructor here, we are injecting HttpClient into this
service using dependency injection and then we are using it to call our server side REST API endpoint
api/departments, and we know this endpoint returns us the list of all departments, so basically this
client-side service GetAllDepartments() method is going to return the list of all departments and
this method returns a specific department, that is a department by id. Next, in the Main() method
in Program class, by the way this program.cs file is present in our client project right here.
So, just like how we are registering our EmployeeService with the dependency
injection container, we need to register our DepartmentService as well. Next,
in this GridEdit razor page, just like how we have this Employees property,
we need Departments property. To populate this Departments property with data,
we need to inject this DepartmentService into our razor page, this is very similar to how
we are injecting EmployeeService right here, and then in OnInitialized() async method, just
like how we are initializing Employees property, let's initialize Departments property as well.
On the department service we have GetAllDepartments(),
call that and finally convert it to a list.
Now, when we edit a row in the data grid, we want a drop down list as the edit interface for this
department name column, so inside this grid column, let's include component,
inside this we can include any html element we want, in our case we want a Syncfusion
drop-down list. First, at the top of the file, let's include
the required namespace for the Syncfusion dropdownlist.
DataSource for this drop-down list is this Departments property. TItem, that is the
type of item our drop down list is working with is Department and TValue, that is the type of value,
if we take a look at our departments table, the value is actually an integer, so let's specify
the value type is integer. Finally, we need to specify drop down list Text and Value fields.
At this point, let's actually take a look at the browser and see what we've got so far.
Notice, when we put this row in edit mode, we have an exception, and we can see that from the
message at the bottom here, and we also have the drop down list as expected, but we don't see the
department names here, we see a text that starts with "BlazorPr", basically what's happening here
is, this drop down list is displaying the fully qualified name of the Department object. Now,
if we take a look at our project, the fully qualified name of the Department class
is BlazorProject.Shared.Department.
That is what is being displayed in the drop-down list right here at the moment,
why is that? Well, that's because this drop down list does not know which properties
it has to use as the display text and display value,
we have to tell that to the drop down list, and we do that by specifying .
We want the display text to be department name and the value to be department id,
now when we put the row in edit mode, we see the drop down list as expected along with its values,
but there is a small problem here, notice for this employee Sara, department is payroll,
and when we put this row in edit mode, we don't see her department selected. So, what we want
is this "Payroll" to be selected in the drop down list. To have the employee department selected,
we need to set a property here called @bind-value and the value for this is, we have access to an
implicit parameter called "context", notice it's available even in the intellisense and
we can typecast that to Employee object type, why Employee? Well, that's because our data grid is
binding to an Employee object, and then on this employee object we have DepartmentId property
For this employee Sara, Department is Payroll, and when we put this row in edit mode,
notice our department is already selected in the drop down list. At the moment
for Gender column, we still have a text box and we know Gender is an enum. So,
let's see how to bind an enum to drop drop-down list. Binding a drop-down list
to an enum is very similar to how we bind it to database data. S, in the interest of time,
let's make a copy of this and paste it inside our Gender and then
change the bits that are required. First of all, the DataSource is going to be our enum values,
so we need a property for that, so just like how we have Employees and Departments property,
let's create another property that holds all the enum values, this is going to be of type string
array and let's call this GenderEnumValues, to get all the gender enum values, on the built-in
Enum class, we have GetNames() and to this, obviously we have to pass our Gender enum.
Our obvious next step is to specify this property as the DataSource for the drop down list. TItem
is of type string, TValue is our Gender enum, and even here, instead of DepartmentId, it is Gender,
and here is another important point to keep in mind, when binding a drop down list to an enum, we
don't need to specify , because the drop down list is smart enough to use
the enum display text as the text field and the underlying integer as the value field, so we can
remove this component all together,
notice, now we have a drop down list for both the columns - Department and Gender.
In our next video, we'll continue implementing CRUD operations in datagrid, that is Create,
Read, Update and Delete. That's it in this video. Thank you for listening.