We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to get all items from ListBox and pass to control ?

How to get all items from ListBox and pass to control ?

Hi,
I have a view with 2 listBox and I can do drag and drop from both.

<div class="form-group">
            <div class="col-lg-2"></div>
            <div class="col-lg-3">
                <span> Lista centri disponibili</span>
                @(Html.EJ().ListBox("ListaCentriDisponibili")
                    .Datasource(ds => ds.URL(@Url.Action("ListaCentriDisponibili", "Centri", new { userID =Model.userID  })).Adaptor(AdaptorType.UrlAdaptor))
                    .ListBoxFields(f => f.Text("codeDenom").Value("IDcentro")).AllowDragAndDrop(true)
                    .Width("100%"))


            </div>
            <div class="col-lg-3">
                <span> Lista centri utente</span>
                @(Html.EJ().ListBox("ListaCentriUtente")
                .Datasource(ds => ds.URL(@Url.Action("ListaCentriUtente", "Centri", new { userID = Model.userID })).Adaptor(AdaptorType.UrlAdaptor))
                .ListBoxFields(Df => Df.Text("codeDenom").Value("IDcentro")).AllowDragAndDrop(true)
                .Width("100%")
                )
            </div>

        </div>

I want , on submit, take all items from the list and pass to controller.

How can do this?

5 Replies
AP Arun Palaniyandi Syncfusion Team July 12, 2017 12:29 PM UTC

Hi Nicola, 
 
Thanks for contacting Syncfusion Support.    
 
We can achieve your scenario by passing the ListBoxes model value to the controller through AJAX call and then save the value in the database. To pass the ListBox model values, we have to stringify the json values and thenit must deserialized it in the server side; After the value is successfully saved in the Database, the AJAX will call the success method.  
 
We have also the shared sample in the below location.    
 
 
Please check the shared sample and information and if the shared details still do not meet your requirement, send us more information to help us provide a solution.            
            
Regards,            
Arun P.  


NI Nicola July 12, 2017 05:38 PM UTC

Thanks for your reply.

I tried your sample and works fine,
the JSON.stringify(target1.model.dataSource) return a string like this:

 "[{"text":"ASP.NET"},{"text":"C++"},{"text":"dBase"}]"

In my situation return a string like this:

"dataSource":{"url":"/Centri/ListaCentriUtente?userID=bfa07f07-62f7-4f3c-b775-3a27dfc98cab","json":[],"timeTillExpiration":0,"cachingPageSize":0,"jsonp":"callback","dataType":"json","offline":false},"adaptor":{"options":{"from":"table","requestType":"json","sortBy":"sorted","select":"select","skip":"skip","group":"group","take":"take","search":"search","count":"requiresCounts","where":"where","aggregates":"aggregates"},"pvt":{}}}"


I think the difference is that in my listBox I use a datasource with urldataadaptor, in yours use IEnumerable from viewBag.

Do you have a solution?


AP Arun Palaniyandi Syncfusion Team July 13, 2017 02:02 PM UTC

Hi Nicola,  
  
Thanks for your update. 


Yes, we have a solution to differentiate between the datasource with urldataadaptor and use IEnumerable from viewBag. In our previous update, we have passed the model datasource value to server because the datasource value is given as IEnumerable from viewbag and returns the JSON output. Since you are using the urldataadaptor you can pass the values to controller by two ways. 
 
1.     getListData public method to take all the listbox values 
2.     To find current li element in the element. 
 
Please see the below screenshot for further reference. 
 

function onsave(e) { 
 
        target1 = $("#ListaCentriDisponibili").data("ejListBox"); 
        target2 = $("#ListaCentriUtente").data("ejListBox"); 
 
        selections = target1.element.find("li"); 
        var items = []; 
        for (i = 0; i < selections.length; i++) { 
            var item = { text: selections[i].innerText, uniqueKey: selections[i].value }; 
            items.push(item);  // Gets only the current item in the Listbox 
        } 
 
        $.ajax({ 
            type: 'POST', 
            dataType: 'json', 
 
            url: '@Url.Action("ListBoxpost", "ListBox")', 
            data: { 
                listdata1: JSON.stringify(items), listdata2: JSON.stringify(target2.model.dataSource), listdata3: JSON.stringify(target1.getListData())    // Gets all items in Listbox 
            }, 
            success: function (response) { 
                alert("Success"); 
            }, 
            error: function (response) { 
                alert("Success"); 
                
 
            } 
        }); 
 
    } 




We have also modified our previous shared sample below for your reference. 
 
Please let us know if you have any queries. 
Regards, 
Arun P. 


NI Nicola July 13, 2017 03:31 PM UTC

The solution to find current li element in the element is the right choice for me, and i had thought the same solution before your reply, because i need the all items in the listBox after drag drop not the all items returned from datasource.

I thought there was a ListBox method that do this, but the solution with li tag is ok

The getListData() return all items that returns the action @Url.Action("DataSource", "ListBox") and this is not realy useful.

Thanks
Nicola


AP Arun Palaniyandi Syncfusion Team July 14, 2017 01:34 PM UTC

Hi Nicola, 
 
We are glad that our solution has resolved your issue. 
 
Please let us know if you have any queries in future. 
 
Regards, 
Arun P. 


Loader.
Up arrow icon