Passing data to controller for 'selected' listbox

[Jennifer]

Hello,

I'm working on a project where I'm trying to use the Listbox. My end goal is to have the items in the 'selected' listbox passed to a POST controller.

Controller.cs

01.[HttpGet]
02. public ActionResult Create()
03. {
04.     List<SelectListItem> memberList = MemberRepository.ListAllMembers(request);
05.     ViewBag.memberList = memberList;
06.
07.     return View("Create", new MemberSelection());
08. }
09. [HttpPost]
10. [ValidateAntiForgeryToken]
11. public ActionResult Create(MemberSelection m)
12. {
13.     if (ModelState.IsValid)
14.             MemberRepository.Create(request);
15.         else
16.             return View("Create",m);
17.     return RedirectToAction("Members");
18. }

 

Create.cshtml

001.@model MembersDomain.Entities.Member
002.
003.@{
004.    ViewBag.Title = "Create";
005.    Layout = "~/Views/Shared/_Layout.cshtml";
006.}
007.
008.@if (!Html.ViewData.ModelState.IsValid)
009.{
010.    <div class="alert alert-danger" id="validationSummary">
011.        @Html.ValidationSummary()
012.    </div>
013.}
014.<div class="row" style="margin-top: 25px;">
015.    <div class="col-lg-12">
016.        <h4>Select Members</h4>
017.    </div>
018.</div>
019.<div class="row" style="margin-top: 25px;">
020.    <div class="col-lg-12">
021.        <p>Use this form to add members to a group.</p>
022.    </div>
023.</div>
024.@using (Html.BeginForm("Create", "Members", FormMethod.Post, new { id = "create" }))
025.{
026.    @Html.AntiForgeryToken()
027.    @Html.ValidationSummary()
028.
029.    <div class="row" style="margin-top: 25px;">
030.        <div class="col-lg-12">
031.            <strong>Selected Members:</strong>
032.        </div>
033.    </div>
034.    <div class="row" style="margin-top: 25px;">
035.        <div class="col-lg-12">
036.            <div id="example" role="application">
037.                <div class="demo-section k-content wide">
038.                    <label for="optional" id="allMembers">All Members</label>
039.                    <label for="selected">Selected</label>
040.                    <br />
041.                    @(Html.Kendo().ListBox()
042.            .Name("optional")
043.            .Toolbar(toolbar =>
044.            {
045.                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
046.                toolbar.Tools(tools => tools
047.                    .TransferTo()
048.                    .TransferFrom()
049.                    .TransferAllTo()
050.                    .TransferAllFrom()
051.                );
052.            })
053.            .HtmlAttributes(new { title = "AllMembers" })
054.            .ConnectWith("selected")
055.            .BindTo(ViewBag.memberList)
056.                    )
057.
058.                    @(Html.Kendo().ListBox()
059.            .Name("selected")
060.            .HtmlAttributes(new { title = "SelectedMembers" })
061.            .BindTo(new List<SelectListItem>())
062.            .Selectable(ListBoxSelectable.Multiple)
063.                    )
064.                </div>
065.            </div>
066.        </div>
067.    </div>
068.    <div class="row" style="margin-top: 25px;">
069.        <div class="col-lg-12">
070.            <p><a class="btn btn-primary btn-lg" href="#" onclick="document.getElementById('create').submit()">Submit</a></p>
071.        </div>
072.    </div>
073.}
074.
075.<style>
076.    .demo-section label {
077.        margin-bottom: 5px;
078.        font-weight: bold;
079.        display: inline-block;
080.    }
081.
082.    #allMembers {
083.        width: 270px;
084.    }
085.
086.    #example .demo-section {
087.        max-width: none;
088.        width: 515px;
089.    }
090.
091.    #example .k-listbox {
092.        width: 236px;
093.        height: 310px;
094.    }
095.
096.        #example .k-listbox:first-of-type {
097.            width: 270px;
098.            margin-right: 1px;
099.        }
100.</style>
101.
102.<script type="text/javascript">
103.    function sendAntiForgery() {
104.        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
105.    }
106.</script>

 

I am using Visual Studio 2015 and the project is ASP.NET MVC. Any insight is appreciated!

[Georgi]

Hi Jennifer,


Possible solution is to get all items inside the selected list box with the dataItems  method and append them to the body of the request to the server.

e.g.

$('#submit-form').on('click', function () {
         $.ajax({
             type: "POST",
             url: "/Home/Create",
             contentType: "application/json; charset=utf-8",
             data: JSON.stringify({ selectedItems: $('#selected').data('kendoListBox').dataItems() }),
             dataType: "json",
             success: function (result) {
              alert("Successfully sent to server: " + result.map(function (x) {
                     return x.Text
                 }))
             }
         });
     })

I have assembled small sample (send-items-from-listbox.zip) which illustrates the aforementioned approach.


Regards,
Georgi
Progress Telerik

[Robert Michels]

Hi Georgi,

We are having a similar issue posting the selected items from a listbox back to a controller. We understand your suggestion in principle and the code sample in the thread seems to make sense.

However the sample code zip you attached is for a kendo grid component, not for a listbox. Is there a sample project for the listbox available? It would help us expedite this implementation.

 

[quote]Georgi said: 

I have assembled small sample (send-items-from-listbox.zip) which illustrates the aforementioned approach.

[/quote]

 

Thanks,

John

[Georgi]

Hello Robert,

I apologize for the inconvenience, indeed I have sent the wrong project.

Attached you will find the proper project.


Regards,
Georgi
Progress Telerik

[Krishna]

Hello Georgi,

Thanks for your solution. I am also having the same problem in one of my project but, with me, i have more than one Listboxes and i do not have any button which can trigger the action. Please find the detailed scenario...

I have 2 Kendo tabs (tab1, tab2) and each tabs have some multiple listboxes. Now, once i select a list from the list box and go to the next tab, i need the selected data to be passed to my controller as my tab2 listbox contents are dependant on tab1 listbox selections.

Is there any other approach that is suitable for this scenario?

Thanks,

Krishna

 

[Georgi]

Hi Krishna,

A possible solution is to check whether the user is opening the second tab within the select event handler and if he does send the selected items from the first tab to the server.

I have modified the sample to apply the above solution, please examine it and let me know if it helps you.


Regards,
Georgi
Progress Telerik

[TJim]

 

For future posters, this is what worked for me in asp.net core

function onRemove(e) {
$.ajax({
    type: "POST",
    url: "/OrgStructure/RemoveCaps",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(e.dataItems),
     dataType: "json"
     //success: function (result) {
     // alert("Successfully sent to server: " + result.map(function (x) {
     //        return x.Text
     //    }))
     //}
 });