Select in Blazor Server

Question

User2041008840 posted

How Can I bind the dropdownlist in Blazor Server
Please help Me 

<select class="form-control selectpicker" @bind="Employee.CountryID">
                 <option>--select--</option>
                 @foreach(var item in Countries)
                     {
                         <option>@item.Name</option>
                     }
             </select>

Country[] Countries;
   public Employee Employee { get; set; }
   Employee[] employees;
   //Department[] Departments;
 
   protected override async Task OnInitializedAsync()
   {
       Employee = new Employee();
       await load();
   }
 
   protected async Task load()
   {
       Countries = await CountriesService.GetCountryAsync();
       employees = await EmployeesService.GetEmployeesAsync();
   }

Answer 1

User-1330468790 posted

Hi, Prathamesh shende,

 

According to your code, you are trying to use two way binding for the select element.

From my best guess, your problem might be mismatch the property "CountryID" to the property "Country.Name"

Other codes are correct.

 

More details, you can refer to below code:

Razor component:  (You should add the service in startup first)

@page "/selectdemo"

@using BlazorDemo.Data
@inject CountriesService CountriesService
@inject EmployeesService EmployeesService

<h3>SelectDemo</h3>

<select class="form-control selectpicker" @bind="Employee.CountryID">
    <option value="-1">--select--</option>
    @foreach (var item in Countries)
    {
        <option value="@item.CountryID">@item.Name</option>
    }
</select>

<label>@Employee.CountryID</label>

@code {
    Country[] Countries;
    public Employee Employee { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Employee = new Employee() {CountryID=2 };
        Countries = await CountriesService.GetCountryAsync();
    }
}

Country and Employee models:

public class Country
    {
        public int CountryID { get; set; }
        public string Name { get; set; }
    }
public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int CountryID { get; set; }
    }

CountriesService:

  public class CountriesService
    {
        public Task<Country[]> GetCountryAsync()
        {
            return Task.FromResult(
                new Country[] {
                new Country{ CountryID=1, Name="Country1" },
                new Country{ CountryID=2,Name="Country2" },
                new Country{ CountryID=3,Name="Country3" }
                });
        }
    }

Demo:

 

Hope this can help you.

Best regards,

Sean

Answer 2

User2041008840 posted

Error - NullReferenceException: Object reference not set to an instance of an object. on Countries 
and focusing on Foreach loop 

<EditForm Model="@Employee" OnValidSubmit="@Insert">
           <DataAnnotationsValidator />
           <select class="form-control selectpicker" @bind="Employee.CountryID">
               <option value="0">--select--</option>
               @foreach (var item in Countries) //Showing error here
               {
                   <option value="@item.ID">@item.Name</option>
               }
           </select>
       </EditForm>
   </div>
@code{

Country[] Countries;
    public Employee Employee { get; set; }
    Employee[] employees;
 
    protected override async Task OnInitializedAsync()
    {
        Employee = new Employee();
        await load();
    }
 
    protected async Task load()
    {
        Countries = await CountriesService.GetCountryAsync();
        // cname = Countries.Where(a => a.ID == 101).FirstOrDefault().ToString();
        employees = await EmployeesService.GetEmployeesAsync();
    }
 
 
    protected async Task Insert()
    {
 
        Employee d = new Employee()
        {
            Name = Name,
            Gender = Gender,
            Email = Email,
            MobileNumber = MobileNumber,
            Address = Address,
            CountryID = CountryID,
            StateID = StateID,
            CityID = CityID,
        };
 
        await EmployeesService.InsertEmployeesAsync(Employee);
        // NavigationManager.NavigateTo(nameof(Employees));
 
    }
}

Answer 3

User-1330468790 posted

Hi, Prathamesh shende,

The problem could be occurred due to the null result returned by the CountriesService method.

Could you please post the service code? Or you could set up a breakpoint and use debug function of VS to see if it returns a null value?

Best regards,

Sean

Answer 4

User2041008840 posted

I found the error. 
It takes time to load data before loading whole page so it showing error 

so i jut put condition if Countries == null then loading.. else  countries loop 
so its working now thank you for your time

Regards

Prathamesh