locked
Select in Blazor Server RRS feed

  • 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();
       }
    
    Tuesday, March 17, 2020 5:08 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 18, 2020 7:30 AM

All replies

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 18, 2020 7:30 AM
  • 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));
     
        }
    }
    
    Wednesday, March 18, 2020 8:44 AM
  • 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

    Wednesday, March 18, 2020 10:57 AM
  • 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

    Wednesday, March 18, 2020 5:10 PM