How pass listbox data to Model using ajax

[Tomas Janus]

I cant get value from listbox. Therefor the var x... is null, or undefined.

Could i get some example, whre is full process to save my list box to model (database)

Thanks Tom

[Mohan Kumar Ramasamy]

Hi Tomas, 

 

We have checked your reported query. We can achieve your requirement using value property. Please refer below code snippets. 

 

 

        <div class="col-lg-12 control-section"> 

            <div id="drag-drop-wrapper"> 

                <div class="listbox-control"> 

                    <h4>Group A</h4> 

                    <ejs-listbox id="listbox1" dataSource="@ViewBag.groupA" height="330px"> 

                        <e-listbox-fields text="Name"></e-listbox-fields> 

                    </ejs-listbox> 

                </div> 

            </div> 

            <button class="e-btn" onclick="GetData()"> Get Selected Data</button> 

        </div> 

 

 

<script> 

    var listbox1; 

    function GetData() { 

        listbox1 = ej.base.getComponent(document.querySelector('#listbox1'), 'listbox'); 

 

        var datalist = listbox1.value; 

        $.ajax({ 

            type: "POST", 

            data: { datalist: datalist }, 

            url: "/Home/GetData", 

            success: function (data) { 

                console.log("success") 

            } 

        }); 

    } 

</script> 

 

HomeController.CS 

 

 

        public IActionResult Index() 

        { 

            List<object> groupA = new List<object>(); 

            groupA.Add(new { Name = "Australia", Code = "AU" }); 

            groupA.Add(new { Name = "Bermuda", Code = "BM" }); 

            groupA.Add(new { Name = "Canada", Code = "CA" }); 

            groupA.Add(new { Name = "Cameroon", Code = "CM" }); 

            groupA.Add(new { Name = "Denmark", Code = "DK" }); 

            groupA.Add(new { Name = "France", Code = "FR" }); 

            groupA.Add(new { Name = "Finland", Code = "FI" }); 

            groupA.Add(new { Name = "Germany", Code = "DE" }); 

            groupA.Add(new { Name = "Hong Kong", Code = "HK" }); 

            ViewBag.groupA = groupA.ToArray(); 

            return View(); 

        } 

 

        [HttpPost] 

        public String[] GetData(String[] datalist) 

        { 

            return datalist; 

        } 

 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/160041/ze/ListBox99590855  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R