Countries List - Simple
The underlying data plumbing has now been completed and we can now start the exciting bits where we add pages to display and manipulate data.
A list of countries sounds like a good starting point, and this is where we can also start to use the Syncfusion controls. A universal requirement is for a data grid, essentially a list of records that can allow addition, editing and deleting data, together with perhaps sorting and filtering.
We will be taking this is easy stages, beginning with a basic data-grid and gradually improving its design and usability.
Simple List of Countries
Open Visual Studio and using the Solution Explorer go to the Pages folder and open Index.razor. (This is the 'homepage' of the application.)
Copy the code from below and replace all the existing code.
@page "/"
@using BlazorCountries.Data
@inject ICountriesService CountriesService
<h3>Countries List</h3>
<SfGrid DataSource="@countries">
<GridColumns>
<GridColumn Field="@nameof(Countries.CountryId)"
HeaderText="Country Id"
TextAlign="@TextAlign.Left"
Width="20">
</GridColumn>
<GridColumn Field="@nameof(Countries.CountryName)"
HeaderText="Country Name"
TextAlign="@TextAlign.Left"
Width="90">
</GridColumn>
</GridColumns>
</SfGrid>
@code {
// Create an empty list, named countries, of empty Counties objects.
IEnumerable<Countries> countries;
protected override async Task OnInitializedAsync()
{
//Populate the list of countries objects from the Countries table.
countries = await CountriesService.CountriesGetAll();
}
}
A Blazor page consists of any declarations at the top of the code, followed by HTML and lastly a @code section. The power of Blazor is that it allows the mixing of HTML and C# code. In our example we have the HTML and C# in the same file, although some people advocate separating the C# into it's own file (on a page by page basis).
Dissecting the above code:
Declarations
The '@page' is called 'routing' and points the page to the url location of the application; in this case "\" is the 'root' directory and therefore points to the 'home page'. I must admit that I am not completely sure for the '@using BlazorCountries.Data' and '@inject ICountriesService CountriesService' lines, other than the code for this page needs to access the Countries Service. I believe the '@using' signifies that the thing being used will be disposed from memory once it has been used; i.e. it won't take memory for longer than it is needed.
HTML
The HTML section includes the <h3> line which will show a bold header for the page.
The <SfGrid> section brings in the Syncfusion data grid. Within the <SfGrid> tag is a 'DataSource'. In this case the DataSource="@countries" is referring to the 'countries' variable defined in the code section.
There are two <GridColumns> sections for each of the columns being displayed in the grid.
- Field="@nameof(Countries.CountryId)" : refers to the data field being displayed.
- HeaderText="Country Id" : is the description to be displayed in the column header.
- TextAlign="@TextAlign.Left" : determines how the data (and column header) should be aligned within the column.
- Width="20" : the column width.
The other <GridColumns> section has similar settings for the County Name.
@code
IEnumerable<Countries> countries declares an IEmunerable collection of Countries that will be called 'countries'.
protected override async Task OnInitializedAsync() is a procedure that will be run when the page is initialised (i.e. when it first opens).
countries = await CountriesService.CountriesGetAll(); is the code that will be called within the above procedure. This in turn calls the Countries Service > CountriesGetAll which then runs the SQL stored procedure to get all the countries records.
To run the application click the IISExpress button. At this stage there are no records in the database, so the result is promising if a little disappointing.
Add Records in SQL
There is no mechanism in the application to add records yet, so to give us some data to play with open SQL Management Studio and add about 6 records.
SQL Management Studio > Expand CountriesDb > Expand Tables > Right-Click Countries > Edit Top 200 rows. Make the CountryName column wider and enter about 7 records, always leaving the CountryId column blank (an Id will automatically be inserted). Close SQl Management Studio and re-run the application.
With some data, the application should look similar to this:
Notice that the countries are listed in descending CountryId sequence. This is a result of the SQL stored procedure used to retrieve the records. We used the code generated by the 'Code Generator' application without any modification. In many cases returning the most recently added record makes sense, but it would make more sense for us if the countries were listed in alphabetical order.
Listing the Countries alphabetically
To get the records in alphabetical order we need to modify the SQL stored procedure.
- Open SQL Management Studio
- Select CountriesDb database
- Expand 'Programmability' and 'Stored Procedures'
- Right-click 'spCountries_GetAll' and choose 'Modify'
- Change the 'Select' line to the text shown below and then click 'Execute'.
SELECT CountryId, CountryName FROM Countries ORDER BY CountryName ASCClose SQL Management Studio and re-run the application; it should look similar to this:
