showing list outside component

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; }

}

}




2 Replies

SP Sureshkumar P Syncfusion Team March 8, 2023 10:48 AM UTC

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



JC José Carlos replied to Sureshkumar P March 8, 2023 11:39 AM UTC

Tks Sureshkumar , you solved my problem .



Loader.
Up arrow icon