CODEWITHSUNDEEP
blazorblazor-webassembly
LINDOKUHLE MAGAGULA
LINDOKUHLE MAGAGULA

Reputation: 21

How to call a return Task in a blazor component

I don't know if the title is corrent. Please help, I am new in blazor. I want to call a Task function on the blazor component, I want it to be called inside a foreach loop,** not by a click event**.

The thing is, i want a fullname of an employee from the employee table that is linked to person table.The Task GetFullName(int deviceId) return a fullName as a string. I used a Id from device table to get a device from loaned table which have a device table. I get to see the name in the console but not displaying on the table.

Blazor.razor

<table class="table custom-table">
  <thead>
     <tr>
       <th>Full Name</th>
     </tr>
   </thead>
   <tbody>

   @foreach (var device in DeviceService.device){
      GetFullName(device.Id) ;  //error ?

      @FullName  //John Smith
   }
   
  </tbody>
</table>

@code{

  
private string FullName = string.Empty;

  private async Task<string> EmployeeWithDevice(int deviceId)
    {
        //get loan dvice from database by using deviceId'
        var result = await DeviceLoanService.GetDeviceLoanById(deviceId);

        var Loan = result.Data;

        if (result.Success)
        {
            FullName = $"{Loan?.Employee?.Person?.FirstName}, {Loan?.Employee?.Person?.LastName}";
        }

        //Console.WriteLine(FullName);

        return FullName;

        
    }
}

Upvotes: 2

Views: 288

Answers (3)

Arm0geddon
Arm0geddon

Reputation: 484

In your markup:

@Task.Run(() => EmployeeWithDevice(device.Id)).GetAwaiter().GetResult()

Upvotes: -1

Vishal Kumar Jain
Vishal Kumar Jain

Reputation: 14

If I understand your code correctly, this should be the right code you need:

<table class="table custom-table">
<thead>
    <tr>
        <th>Full Name</th>
    </tr>
</thead>
<tbody>

    @foreach (var name in _fullNames)
    {
        <tr>
            <td>@name</td>
        </tr>
    }

</tbody>
</table>

@code {

private List<string> _fullNames = new();

protected override async Task OnInitializedAsync()
{
    @foreach (var device in DeviceService.device)
    {
        var fullName = await EmployeeWithDevice(device.id);
        _fullNames.Add(fullName);
    }
}

private async Task<string> EmployeeWithDevice(int deviceId)
{
    //get loan dvice from database by using deviceId'
    var result = await DeviceLoanService.GetDeviceLoanById(deviceId);

    var loan = result.Data;

    var fullName = string.Empty;

    if (result.Success)
    {
        fullName = $"{Loan?.Employee?.Person?.FirstName}, {loan?.Employee?.Person?.LastName}";
    }

    //Console.WriteLine(FullName);

    return fullName;
}
}

Upvotes: -1

Henk Holterman
Henk Holterman

Reputation: 273611

The code in the markup section cannot be async.

Prepare your data in the proper event:

@code {
  List<string> fullNames = new();

  override async Task OnInitializedAsync()
  {
     fullNames = await ... ;  // some async code to get your data
  }

}

and then it is just

  @foreach(string fullName in fullNames)
  {
    @fullName
  }

Upvotes: 3

Related Questions