1. Home
  2. Forum
  3. jQuery
  4. ejDropDownList using Ajax request

ejDropDownList using Ajax request

Hi,
I'm trying to send ejDropDownList $('#drop-down-list') selected item to controller using Ajax request, then send back from controler a list that will udate the datasource of another ejDropDownList $('#drop-down-list2') with ajax_success:

$(function () {
                        $("#drop-down-list").ejDropDownList({
                            dataSource: @Html.Raw(Json.Serialize(ViewBag.Applications)),
                            fields: { text: "NameApp", value: "IdApp" },
                            value: @Html.Raw(Json.Serialize(ViewBag.ApplicationId)),
                            text: @Html.Raw(Json.Serialize(ViewBag.ApplicationName)),
                            change: "AjaxCall"
                        });
                            });
                            function AjaxCall()
                            {
                                var id = $('#drop-down-list').ejDropDownList("getSelectedValue")
                                $.ajax({
                                    type: "POST",
                                    url: '/Admin/AjaxCall',
                                    data: "{'IdApp':id}",  
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    success: function (data) {
                                        alert(data);
                                        var obj2 = $("#drop-down-list2").data("ejDropDownList");
                                        obj2.setModel({ dataSource: data });
                                    },
                                    error: function () {
                                        alert("Ajax Error");
                                    }
                                });
                            }

$(function () {
                        $("#drop-down-list2").ejDropDownList({
                            fields: { text: "Text", value: "Code", selected:"Selected" },
                            enableFilterSearch: true,
                            dataSource: @Html.Raw(Json.Serialize(ViewBag.optionList)),
                            showCheckbox: true
                                });
                    });

Action in controller:

[HttpGet]
        public ActionResult AjaxCall()
        {
            return View();
        }
        [HttpPost]
        public ActionResult AjaxCall(int IdApp)
        {
            List optionList = new List();
            List
            foreach (Option item in options)
            {
                optionList.Add(new OptionList(false, item.NameOpt, item.IdOpt));
            }
            return Json(optionList);
        }
My problem is that when reaching "public ActionResult AjaxCall(int IdApp)" I got IdApp value 0, also will ajax_success update the dataSource?

Regards,
Kalai Sirajeddine

2 Replies
KS Kalai Sirajeddine April 26, 2018 08:59 AM UTC

Hi,
I removed data from $.ajax and replaced url by url: '/Admin/AjaxCall?IdApp=' + IdApp,
But how would it work if I need to send an object?

Regards

IB Ilakkiya Baskar Syncfusion Team April 26, 2018 09:22 AM UTC

  
Hi Kalai,  
   
Thank you for contacting Syncfusion Support.   
  
As per your requirement, we have created a sample where the second DropDownList component is updated based on the first DropDownList component. Please refer to the code snippet below.   
[View]   
<input type="text" id="dropdownslist" />   
<div id="carsList">   
                <ul>   
                    //Grouping1###   
                    <li>1</li>   
                    <li>2</li>   
                    <li>3</li>   
                    <li>4</li>   
                      
                    <li>5</li>   
                       
                </ul>   
            </div>   
            <input type="text" id="DropDown" />   
        </div>   
</div>   
<br/><br/>   
       
    <script type="text/javascript">   
           
        $(function () {   
            $("#dropdownslist").ejDropDownList({   
                targetID:"carsList",   
                change: "onChange",   
                width:"150px"   
            });   
   
            $("#DropDown").ejDropDownList({   
                dataSource: @Html.Raw(Json.Encode(ViewData["DataSrc"])),   
                fields: { text: "Text", value: "Value" },   
                value: "item1",   
                text: "List Item 1",   
                   
            });   
    });   
        function onChange(args) {   
               
            var obj = $('#dropdownslist').data("ejDropDownList");   
        var id = obj.getSelectedValue();   
        //ajax request for postback   
        var data = JSON.stringify({ Pid: id });// send value   
        $.ajax({   
            type: "POST",   
            url: "/Dropdownlist/GetWeeksInYear",   
            async: false,   
            dataType: "json",   
            data: data,   
            contentType: "application/json",   
            success: function (data) {   
                debugger   
                var obj = $("#DropDown").data("ejDropDownList");   
                obj.setModel({  //append to the data to dropdownlist   
                    dataSource: data   
                });   
   
            },   
            error: function () {   
                alert('Error Loading Data');   
            },   
        });   
   
    }   
</script>   
[controller]   
[HttpPost]   
        public ActionResult GetWeeksInYear(string Pid)   
        {   
            List<DropDownValue> newData = new List<DropDownValue>();   
            var items = Data();   
            foreach (var item in items)   
            {   
                if (item.Pid == Pid)   
                    newData.Add(item);   
            }   
               
            return Json(newData); //postback the data   
        }   
Please refer to the sample in the below location   
  
Regards,   
Ilakkiya B   


Loader.
Up arrow icon