Blazor Helpers App: Add Some Data


Add some sample data to the Helper app from a compound Json string and display it in a razor page.

The previous posts in this series mused about a Blazor Server app for helpers to volunteer for duties at an Athletics Track Meet. Much use made of Entity Framework Core is for accessing the app’s SQL Server database. The immediately previous post covered the auto-generation of the database by Code-First EF Migration. This version demonstrates adding some data to the Helpers App context and displaying of lists in Blazor. Includes generating a list of objects from Json which which have referenced list objects. Replaces WeatherForecast with Helper Data.

The solution code for this series of post is on GitHub at djaus2/EFBlazorBasic.
This is implemented in the Add-Some-Data branch of djaus2/EFBlazorBasic on GitHub

To check out this branch:

git clone https://github.com/djaus2/EFBlazorBasics.git --branch Add-some-data

Pages referred to here:

Entities

  • Helpers
  • Rounds
  • Activities

Helpers volunteer for Activities. An Activity is for a specific Round in a calendar of Track Meets.

Each Activity has a nullable Helper, a non-null Round and a non-empty Task. Each Helper has a Name. Each Round has a round number.

Data Generation

The technique used here is to Deserialize a Json string representing 3 Activities. Each activity in the string specifies a Task and overtly specifies a Helper, Round:

string ActivitysJson =
"[{\"Round\":{\"No\":1},\"Helper\":{\"Name\":\"John Marshall\"},
\"Task\":\"Shot Put\"},{ \"Round\":{ \"No\":2},\"Helper\":{
\"Name\":\"Sue Burrows\"},\"Task\":\"Marshalling\"},{ \"Round\":{
\"No\":3},\"Helper\":{ \"Name\":\"Jimmy
Beans\"},\"Task\":\"Discus\"}]";

When the string is deserialized all 3 entities are generated as lists with cross references from the Activities to the Helpers and Rounds.

In the HelperService:

public async Task AddSomeData()
{
    var activitys =
    JsonConvert.DeserializeObject\<List\<Activity\>\>(ActivitysJson);
    await AddActivitys(activitys);
}

Storing the Data

AddSomeData() handles the transmission of the entity lists to the SQL Server database:

In the HelperService:

public async Task AddActivitys(List\<Activity\> activitys)
{
    _context.Activitys.AddRange(activitys);
    await _context.SaveChangesAsync();
}

Note that there is no need to separately transmit the referenced lists Helper and Rounds. The code above “magically” populates all three tables in the database with the information specified in the Json string!

Using the Data

The FetchData razor page was modified to use this data.

The HelperService is instatiated in FetchData using:

@inject IHelperService service

A call is made in OnInitializedAsync() to get Activitys which, if it is empty, a call is made to AddSomeData() in the HelperService. A call is then made to get all 3 entity lists:

protected override async Task OnInitializedAsync()
{
    Activitys = await service.GetActivitys();
    if ((Activitys==null) || (Activitys.Count() == 0))
    {
        await service.AddSomeData();
    }
    await UpdateData();
}

No Activities assumes no Helpers and no Rounds, so when a call is made to generate the Activities, it can auto-generate the required Helpers and Rounds specified for the Activities without any collisions.

Thw UpdateData() method makes the call to the HelperService to get all three lists:

async Task UpdateData()
{
    Activitys = await service.GetActivitys();
    Helpers = await service.GetHelpers();
    Rounds = await service.GetRounds();
}

The GetActivitys() method in the HelperService is:

public async Task<List<Activity>> GetActivitys()
{
    var list = await _context.Activitys.Include(activity =>
    activity.Helper).Include(activity => activity.Round).ToListAsync();
    return list;
}

The reason for the includes in this is so that the other entities are in memory which is important for some issues discussed in the next post. The GetHelpers() and GetRounds() methods in the HelperService are simpler.:

The GetHelpers() and GetRounds() methods in the HelperService:

public async Task<List<Helper>> GetHelpers()
{
    var list = await _context.Helpers.ToListAsync<Helper>();
    return list;
}

public async Task<List<Round>> GetRounds()
{
    var list = await _context.Rounds.ToListAsync<Round>();
    return list;
}

Displaying Entity Data

The Entity data is displayed on a razor page in a table by iterating through the items in the entity list and showing the viewable properties of each instance in a list in one table row. Where there is a referential property, a property of this is used. For example, with an activity, the helper’s name is used. Because this property is nullable, a check is made for this. Round is not nullable so there is no need for a similar check with that property.

<table class="table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Round</th>
            <th>Helper</th>
            <th>Task</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var activity in Activitys)
    {
        <tr>
            <td>@activity.Id</td>
            <td>@activity.Round.No</td>
            @if (@activity.Helper != null)
            {
                <td>@activity.Helper.Name</td>
            }
            else
            {
                <td>NULL</td>
            }
            <td>@activity.Task</td>
        </tr>
    }
    </tbody>
</table>

The display of the Activitys list.

The display of Helpers and Rounds is similar but there are no property checks for nulls:

@foreach (var hlpr in Helpers)
{
    <tr>
        <td>@hlpr.Id</td>
        <td>@hlpr.Name</td>
    </tr>
}
@foreach (var round in Rounds)
{
    <tr>
        <td>@round.Id</td>
        <td>@round.No</td>
    </tr>
}

Finally, for each entity listing there is a typical check to see if the entity list is null, with the code as above not being used until it is not null:

@if (Activitys == null)
{
    <p><em>Loading Activities...</em></p>
}
else
{
    … Activitys table …
}

The Displayed Data

Before data is available:

Helper Volunteers

This component demonstrates fetching data from a service.

Activitys

Loading Activities…

Helpers

Loading Helpers…

Rounds

Loading Rounds…

Once data has been retrieved from the database

Helper Volunteers

This component demonstrates fetching data from a service.

Activitys

Id Round Helper Task
1 1 John Marshall Shot Put
2 2 Sue Burrows Marshalling
3 3 Jimmy Beans Discus

Helpers

Id Name
1 John Marshall
2 Sue Burrows
3 Jimmy Beans

Rounds

Id Round No.
1 1
2 2
3 3

Next: Cascade Delete

 TopicSubtopic
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor Helpers App
<  Prev:   Blazor Helpers App