showing list outside component

[José Carlos]

I having problem with Dropdown list to show itens.

I created a demo to test e show the issue . The list itens are showing outside component.

The code of Blazor Page :

@page "/counter"

@using System.Text.Json

@using System.Text.Json.Serialization

@inject IHttpClientFactory ClientFactory

<PageTitle>Counter</PageTitle>

<PageTitle>Index</PageTitle>

<h1>Machine List</h1>

<span class="container-fluid">

    <SfDropDownList id="1" TValue="string" TItem="variaveis" Width="300px" PopupHeight="500px" Placeholder="Selecione uma Máquina" CssClass="e-custom" DataSource="@list_machines">

        <DropDownListFieldSettings Value="serial" Text="machine_name"></DropDownListFieldSettings>

    </SfDropDownList>

</span>

@code {

private IEnumerable? variaveisJson = Array.Empty();

private IEnumerable? list_machines = Array.Empty();

private IEnumerable? stopped = Array.Empty();

protected override async Task OnInitializedAsync()

{

var request = new HttpRequestMessage(HttpMethod.Get, "https://web.cncmonitor.com.br/api/v1/XXXXX/XXXXX/summary?start_time=2023-02-27T05:00:00Z&end_time=2023-02-27T23:30:00Z&tagid=99&changedonly");

var request_machine = new HttpRequestMessage(HttpMethod.Get, "https://web.cncmonitor.com.br/api/v1/VH41X62QGCI7MBX/Z8QQFGZS5OBF6XE/info");

var client = ClientFactory.CreateClient();

var response = await client.SendAsync(request);

var response_machine = await client.SendAsync(request_machine);

if (response.IsSuccessStatusCode)

{

using var responseStreamMachine = await response_machine.Content.ReadAsStreamAsync();

list_machines = await JsonSerializer.DeserializeAsync>(responseStreamMachine);

}

if (response.IsSuccessStatusCode)

{

using var responseStream = await response.Content.ReadAsStreamAsync();

variaveisJson = await JsonSerializer.DeserializeAsync>(responseStream);

stopped = from a in variaveisJson where a.old_value == "STOP" select a;

}

}

public class variaveis

{

public string? serial { get; set; }

public string? machine_name { get; set; }

public string? sector { get; set; }

public string? area { get; set; }

public string? manufacturer { get; set; }

public string? line { get; set; }

public string? model { get; set; }

public bool changed { get; set; }

public string? command { get; set; }

public string? tag_id { get; set; }

public string? tagid { get; set; }

public DateTime timestamp { get; set; }

public string? tag { get; set; }

public string? value { get; set; }

public string? old_value { get; set; }

public int value_elapsed_time { get; set; }

public int old_value_elapsed_time { get; set; }

// #### variaveis de tempo

public double today { get; set; }

public double yesterday { get; set; }

public double last24hours { get; set; }

public double past24hours { get; set; } // //ultimas 48hs

public double last7days { get; set; }

public double past7days { get; set; } // ultimos 14 dias

public string? Total_Turno_Grafh { get; set; }

public string? Nome_Turno_Grafh { get; set; }

public string? Total_Diario_Grafh { get; set; }

public string? Color { get; set; }

public DateTime DataHoje { get; set; }

}

}

[Sureshkumar P]

Hi José,

We have validated your shared information and in our Volume 1- 2022. Release onwards we need to refer the script and themes filed manually in the application. So, we suggest you refer the theme and script files in the Pages/_Layout.cshtml file to load the component correctly into your application.

To know more about script reference. Please refer to the documentation: https://blazor.syncfusion.com/documentation/common/adding-script-references

To know more about the breaking changed on the Volume-1 release. Please refer to the release notes here: https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes

Find the sample in the attachment with latest changes.

Regards,

Sureshkumar P

[José Carlos]

Tks Sureshkumar , you solved my problem .