Building Blazor WebAssembly Applications with gRPC by Václav Pekárek

Author:Václav Pekárek [Václav Pekárek]
Language: eng
Format: epub
Publisher: Packt Publishing
Published: 2022-11-04T00:00:00+00:00

Viewing the data

When we want to render the data to the table, we have more options on how to use it. One of the common approaches is creating the component as a table wrapper and using the ChildContent parameter to render each row of the table. This allows us to modify the columns presented in the table, but forces us to specify the ChildContent parameter anywhere we are using the component.

In our demo, we will use a different approach. We will create a component that will load data from the given endpoint and render a column for each property in the returned data. To be able to present data as a table, we need to create some C# structures similar to the table:

Shared\Model\TableCell.cs

namespace MediaLibrary.Client.Shared.Model; public class TableCell { public object? Value { get; set; } }

The preceding code shows the class for a single cell in the table. The cell can contain only the Value as we don’t know the exact type we are using for the object.

We need to be able to present the whole table row:

Shared\Model\TableRow.cs

namespace MediaLibrary.Client.Shared.Model; public class TableRow<TItem> { public TableRow(TItem originValue) { OriginValue = originValue; } public List<TableCell> Values { get; set; } = new(); public TItem OriginValue { get; set; } }

The preceding code shows the class for a single table row. We are using the generic TItem property, which will hold the original value of the data, a single item in the collection, list, or array, and the list of values.

When we have the rows, we need to specify table columns to render the table header:

Shared\Model\TableColumn.cs

using System.Reflection; namespace MediaLibrary.Client.Shared.Model; public class TableColumn { public string Name { get; set; } = string.Empty; public PropertyInfo PropertyInfo { get; set; } = null!; }

In the preceding code, you can see the model of TableColumn. This class holds information about a single property. We are keeping the name of the column, which is the name of the property, and PropertyInfo to be able to check the type of the values in the column.

The last model is the Table class, which will have a collection of columns and rows:

Shared\Model\Table.cs

namespace MediaLibrary.Client.Shared.Model; public class Table<TItem> { public IEnumerable<TableColumn> Columns { get; set; } = new List<TableColumn>(); public List<TableRow<TItem>> Rows { get; set; } = new(); }

The preceding code shows how the Columns and Rows properties are defined.

Let’s combine all the code in the new component called DataView. This component will render the table with a column for each property in our model and a row for each record in our database. It will also show the navigation buttons to navigate the user to the detail of the item or to create a new item.

Start with creating two files, DataView.razor and DataView.razor.cs. We will first create the logic in the code behind the file, then we will create the HTML content of our component:

Shared\DataView.razor.cs

using Microsoft.AspNetCore.Components; using System.Net.Http.Json; using MediaLibrary.Client.Shared.Model; namespace MediaLibrary.Client.Shared { public partial class DataView<TItem> where TItem : MediaLibrary.Shared.Model.IModel, new() { // The code goes here } }

The preceding code shows the basic structure of the DataView class.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.