drop down display empty rows although i get data filled on RefreshDropDownList function?

Question

I work on blazor on .net core 7 . i face issue when display drop down server type

issue is drop down server type display empty although I get data on function RefreshDropDownList(); .

I work on blazor page server names data and inside this page there are drop down servertype

so server type drop down exist on another page ServersNames

server type drop down display empty although function RefreshDropDownList() return 4 items data . so what is issue and How to solve it ? .

controller action fill drop down is

  [HttpGet]
        public IActionResult GetAll()
        {
            return Ok(_IserverTypeService.GetAll());
            
        }

I test action GetAll on controller service type and it return data without any issue

on blazor ui :

<h1>Server Name</h1>

<button type="button" class="btn btn-primary m-2 float-end" data-bs-toggle="modal" data-bs-target="#exampleModal" @onclick="AddClick">
    Add ServerNames

</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    @ModalTitle
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </h5>
            </div>
            <div class="modal-body">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 w-100 bd-highlight">
                       
                        <div class="form-group row">
                            <label for="example-text-input" class="col-3 col-form-label">Server Type</label>
                            <div class="col-9">
          @*          <input type="text" class="form-control" @bind="server_Type" />*@
                                <select class="form-select" @bind="server_Type">
                                    @foreach (var servertype in ServerType)
                                    {
                                        <option value="@servertype.serverTypeId">
                                            @servertype.serverType
                                        </option>
                                    }

                    </select>
                            </div>
                    </div>
                     
                    </div>
                   
                  
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>



@code
{
    public class ServerNamesClass
    {
        public string server_Type { get; set; }
    }
    public class ServerTypesClass
    {
        public int serverTypeId { get; set; }
        public string serverType { get; set; }
    }
   
    private IEnumerable<ServerTypesClass> ServerType = Array.Empty<ServerTypesClass>();

    

    protected override async Task OnInitializedAsync()
    {
        await   RefreshDropDownList();
    }

   
    private async Task RefreshDropDownList()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, config["API_URL"] + "ServerTypes");
        var client = ClientFactory.CreateClient();
        var response = await client.SendAsync(request);
        using var responsestream = await response.Content.ReadAsStreamAsync();
        ServerType = await JsonSerializer.DeserializeAsync<IEnumerable<ServerTypesClass>>(responsestream);
        ServerType = Array.Empty<ServerTypesClass>();


    }
   

    private async void AddClick()
    {
        await RefreshDropDownList();
   
    }

Answer 1

In your RefreshDropDownList() you overwrite your ServerType IEnumerable with an empty list: ServerType = Array.Empty<ServerTypesClass>();. This means that your deserialized data will always be overwritten with an empty list.