AutoComplete is not showing on cshtml

[Bulut]

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)

                           .ToListAsync();

            string sJSONResponse = JsonConvert.SerializeObject(countries);

            return countries;

        }

and my cshtml view:

@page

@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>

                        </EjsAutoComplete>

                    </div>

</div>

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?

[Narayanasamy Panneer Selvam]

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:  

1.       https://ej2.syncfusion.com/blazor/documentation/system-requirements/ 

2.       https://ej2.syncfusion.com/blazor/documentation/getting-started/vs-blazor-server/ 

 

AutoComplete: https://ej2.syncfusion.com/blazor/documentation/autocomplete/getting-started/?no-cache=1 

 

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.

 

Documentation link: https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages/ 

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

Regards,
Narayanasamy P.