We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

AutoComplete is not showing on cshtml

I am using Syncfusion.EJ2.Blazor nuget package in my project.

my country class:
public partial class Country
        private ICollection<StateProvince> _stateProvinces;

        /// <summary>
        /// Gets or sets the entity identifier
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets the name
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// Gets or sets the two letter ISO code
        /// </summary>
        public string TwoLetterIsoCode { get; set; }

        /// <summary>
        /// Gets or sets the three letter ISO code
        /// </summary>
        public string ThreeLetterIsoCode { get; set; }

        /// <summary>
        /// Gets or sets the numeric ISO code
        /// </summary>
        public int NumericIsoCode { get; set; }

        /// <summary>
        /// Gets or sets the display order
        /// </summary>
        public int DisplayOrder { get; set; }

        /// <summary>
        /// Gets or sets the state/provinces
        /// </summary>
        public virtual ICollection<StateProvince> StateProvinces
            get => _stateProvinces ?? (_stateProvinces = new List<StateProvince>());
            protected set => _stateProvinces = value;

in my register Model i have public int? CountryId { get; set; }

so my service to return List of countries:
public async Task<IList<Country>> GetCountriesList()
            var countries = await _context.Country
                           .OrderBy(b => b.Name)

            string sJSONResponse = JsonConvert.SerializeObject(countries);

            return countries;


and my cshtml view:

@model RegisterModel
@using Unfreighted.Services
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Data
@inject CustomerService  CustomerService
    ViewData["Title"] = "Register";

    var data2 = CustomerService.GetCountriesList();

<div class="form-group">
                    <div class='content'>
                        <EjsAutoComplete TValue="string" Placeholder="e.g. Australia" DataSource="@data2.Result" Autofill=true>
                            <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>

But it is not doing anything. I use razor and chtml files together in my project.

1- How can I make this work?
2- How can I bind countryId to my model from autocomplete?

1 Reply

NP Narayanasamy Panneer Selvam Syncfusion Team October 22, 2019 03:52 PM UTC

Hi Bulut,

Greetings from Syncfusion support.
We have validated your requirement. From the provided information and shared code, we suspect that you may using dotnet core 2.0 or 2.2 in your application. 
We would like to inform you that, Our blazor components can be render using dotnetCore 3.0 or 3.1 in razor page alone. 
Please find the documentation references in below,

Getting started with Blazor: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio

Getting started with Syncfusion’s Blazor Component:  
Or if you want to use razor pages in ASP.NETCore application, you have to install Syncfusion.EJ2.ASPNet.Core nuget instead of Syncfusion.EJ2.Blazor.


Kindly let us know if you need further assistance on this.
Narayanasamy P.

Live Chat Icon For mobile
Up arrow icon