public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewBag.Fruits = new List<string> { "Apple", "Orange", "Banana", "Mango" };
        return View();
    }
}

@Html.EJ2().DropDownList()
    .Id("DropdownList")
    .DataSource(ViewBag.Fruits)
    .Placeholder("Select fruit")
    .Render()

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public IActionResult Index()
{
    var categories = new List<Category>
    {
        new Category { Id = 1, Name = "Electronics" },
        new Category { Id = 2, Name = "Furniture" },
        new Category { Id = 3, Name = "Clothing" }
    };
    ViewBag.Categories = categories;
    return View();
}

@Html.EJ2().DropDownList()
    .Id("Category")
    .DataSource(ViewBag.Categories)
    .Fields(fields => fields.Text("Name").Value("Id"))
    .Change("onCategoryChange")
    .Placeholder("Select category")
    .Render()

<script>
function onCategoryChange(args) {
    console.log('Selected ID:', args.value);
    console.log('Selected Text:', args.text);
    // Perform action based on selection
}
</script>

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

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int CountryId { get; set; }
}

public IActionResult Index()
{
    var countries = new List<Country>
    {
        new Country { Id = 1, Name = "USA" },
        new Country { Id = 2, Name = "Canada" },
        new Country { Id = 3, Name = "Mexico" }
    };
    ViewBag.Countries = countries;
    return View();
}

[HttpGet("api/cities/{countryId}")]
public IActionResult GetCities(int countryId)
{
    var cities = new List<City>
    {
        new City { Id = 1, Name = "New York", CountryId = 1 },
        new City { Id = 2, Name = "Los Angeles", CountryId = 1 },
        new City { Id = 3, Name = "Toronto", CountryId = 2 },
        new City { Id = 4, Name = "Vancouver", CountryId = 2 }
    };
    
    var filtered = cities.Where(c => c.CountryId == countryId)
        .Select(c => new { c.Id, c.Name })
        .ToList();
    
    return Json(filtered);
}

<!-- First dropdown -->
@Html.EJ2().DropDownList()
    .Id("Country")
    .DataSource(ViewBag.Countries)
    .Fields(fields => fields.Text("Name").Value("Id"))
    .Change("onCountryChange")
    .Placeholder("Select country")
    .Render()

<!-- Second dropdown (dependent) -->
@Html.EJ2().DropDownList()
    .Id("City")
    .Placeholder("Select city")
    .Render()

<script>
function onCountryChange(args) {
    var cityDropdown = document.getElementById('City').ej2_instances[0];
    
    if (args.value) {
        // Fetch cities for selected country
        fetch('/home/GetCities/' + args.value)
            .then(response => response.json())
            .then(data => {
                cityDropdown.dataSource = data;
                cityDropdown.value = null;
            })
            .catch(error => console.error('Error:', error));
    } else {
        cityDropdown.dataSource = [];
    }
}
</script>

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpGet]
    public IActionResult GetProducts()
    {
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99m },
            new Product { Id = 2, Name = "Mouse", Price = 25.50m },
            new Product { Id = 3, Name = "Keyboard", Price = 75.00m },
            new Product { Id = 4, Name = "Monitor", Price = 299.99m }
        };
        return Ok(products);
    }
}

@Html.EJ2().DropDownList()
    .Id("Products")
    .DataSource(d => d.Url("/api/products"))
    .Fields(fields => fields.Text("Name").Value("Id"))
    .AllowFiltering(true)
    .FilterType(FilterType.Contains)
    .Placeholder("Search products...")
    .Render()