How to modify remote data in ASP.NET MVC DropDownList

24 Aug 20261 minute to read

When binding the remote data source, use the actionComplete event to modify the result data before it is passed to the DropDownList.

CSHTML

@Html.EJS().DropDownList("customers").Placeholder("Select a customer").ActionComplete("actionComplete").PopupHeight("200px").DataSource(dataManger =>
            dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/").Adaptor("ODataV4Adaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
            {
                Text = "ContactName",
                Value = "CustomerID"
            }).Query("new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']).take(6)").Render()
<script>
    function actionComplete(e) {
        // initially result contains 6 items
        console.log("Before modifying the result: " + e.result.length);
        // removes the first 2 items from the result.
        e.result.splice(0, 2);
        // the result count is now 4.
        console.log("After modifying, the result contains: " + e.result.length + items);
    }
</script>

Modifydata.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class DropDownListController : Controller
    {
        public ActionResult modifydata()
        {
            return View();
        }
    }
}