Hi,
based on this example
I have a similar situation, I'm getting data from a webAPI project by:
public class TicketListBase : ComponentBase
{
[Inject]
public ITicketService TicketService { get; set; }
public static IEnumerable<Ticket> Tickets { get; set; }
public Ticket Ticket { get; set; }
protected override async Task OnInitializedAsync()
{
Tickets = (await TicketService.GetTickets()).ToList();
}
}
Ticket class as in web API model:
For simplicity, Ticket model is simplified.
public partial class Ticket
{
public int Id { get; set; }
public string CustomerName { get; set; }
}
TicketService:
public class TicketService : ITicketService
{
private readonly HttpClient httpClient;
public TicketService(HttpClient httpClient)
{
this.httpClient = httpClient;
}
public async Task<Ticket> GetTicketById(int id)
{
return await httpClient.GetJsonAsync<Ticket>($"api/tickets/{id}");
}
public async Task<IEnumerable<Ticket>> GetTickets()
{
return await httpClient.GetJsonAsync<Ticket[]>("api/tickets");
}
public async Task<Ticket> UpdateTicket(Ticket updatedTicket)
{
return await httpClient.PutJsonAsync<Ticket>($"api/tickets/", updatedTicket);
}
}
On blazor form:
<SfGrid DataSource="@Tickets" AllowPaging="true">
<GridColumns>
<GridColumn Field=@nameof(Ticket.Id) HeaderText="#" TextAlign="TextAlign.Left" Width="80"></GridColumn>
<GridColumn Field=@nameof(Ticket.CustomerName) HeaderText="Customer Name" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
And it works, but how to implement Edit,Update and Delete in this scenario.
For example, when I want to update my Ticket I would call
var result = await TicketService.UpdateTicket(Ticket);
where the Ticket would be current selected ticket on my page.
How to pass Grid changed ticket (I think I will go with Dialog approach) to my TicketService.
Best regards
