1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Set second dropdownlist's datasource using ajax

Set second dropdownlist's datasource using ajax

Hi,

I recently started to use your awesome controls and I am starting to get a hang of it but there is an issue i can't seen to resolve.
I have two dropdownlists, one of countries and the other of cities and what I want is that when i change an item on country dropdownlist ...the datasource of cities dropdownlist should be updated .
I am doing this using ajax but it still seems to show no records.
 
View:

@{
    ViewData["Title"] = "Index";
}
@using WeatherApp.Controllers
<h2>Index</h2>

<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Countries" dataSource="@ViewBag.Countries" change="onChange" placeholder="Select a Country" popupHeight="220px">
            <e-dropdownlist-fields text="Name" value="Code"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Cities" placeholder="Select a City" popupHeight="220px">
            <e-dropdownlist-fields text="name" value="id"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<p id='event'> </p>
<script>
    function onChange(args) {
        $.ajax({
            type: "GET",
            url: '@Url.Action("CountrySelected")',
            data: { code: args.value },
            contentType: "application/json;charset=utf-8",
            dataType:"json",
            success: function (result) {
                debugger;

                var cityDropDown = document.getElementById("Cities").ej2_instances[0]; 
                cityDropDown.datasource = result;
                cityDropDown.refresh();
                alert(result);
            },
            error: function () {
                alert("Error while loading data");
            }
        });
    }
</script>

Controller:

public class WeatherController : Controller
    {
        private string m_stWebRoot;

        public WeatherController(IHostingEnvironment env)
        {
            m_stWebRoot = env.WebRootPath;
        }


        public IActionResult Index()
        {
            string stCountries = System.IO.File.ReadAllText(m_stWebRoot + "\\CustomStaticFiles\\country.list.json");
            List<Country> lstCountries = JsonConvert.DeserializeObject<List<Country>>(stCountries);
            ViewBag.Countries = lstCountries.OrderBy(o => o.Name).ToList();
            
            return View();
        }


        public ActionResult CountrySelected(string code)
        {
            string stCities = System.IO.File.ReadAllText(m_stWebRoot + "\\CustomStaticFiles\\city.list.json");
            List<City> allCities = JsonConvert.DeserializeObject<List<City>>(stCities);
            allCities = allCities.Where(c => c.CountryCode == code).OrderBy(o => o.Name).ToList();
            return Json(allCities);
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }

Will appreciate your help in this, Thanks.

3 Replies
PO Prince Oliver Syncfusion Team December 10, 2018 07:32 AM UTC

Hi Sheharyar, 
 
Thank you for contacting Syncfusion Support. 
 
We have prepared a sample based on the shared code and found that the casing for dataSource property is wrong in your code. We suggest you modify the code as shown below so that cascading through AJAX will work fine.  
 
<script> 
    function onChange(args) { 
        $.ajax({ 
            type: "GET", 
            url: '@Url.Action("CountrySelected")', 
            data: { code: args.value }, 
            contentType: "application/json;charset=utf-8", 
            dataType:"json", 
            success: function (result) { 
                debugger; 
 
                var cityDropDown = document.getElementById("Cities").ej2_instances[0]; 
                cityDropDown.dataSource = result; 
                //cityDropDown.refresh(); 
                cityDropDown.dataBind(); 
                alert(result);                 
            }, 
            error: function () { 
                alert("Error while loading data"); 
            } 
        }); 
    } 
</script> 
 
Also, you can invoke dataBind() method to apply pending property changes immediately. Please refer to the below UG 
 
 
We have prepared a sample with your code which can be downloaded from the below link 
 
 
Regards, 
Prince 


SH Sheharyar December 15, 2018 06:50 PM UTC

That seems to solve my issue.
Thank you so much.

PO Prince Oliver Syncfusion Team December 17, 2018 06:07 AM UTC

Hi Sheharyar, 

Most Welcome. We are glad that the issue is resolved in your end. 

Regards, 
Prince 


Loader.
Up arrow icon