Passing data to controller for 'selected' listbox

7 posts, 0 answers
  1. Jennifer
    Jennifer avatar
    4 posts
    Member since:
    Oct 2015

    Posted 23 Aug 2017 Link to this post

    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!

  2. Georgi
    Admin
    Georgi avatar
    579 posts

    Posted 25 Aug 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Robert Michels
    Robert Michels avatar
    6 posts
    Member since:
    Oct 2009

    Posted 02 Oct 2017 in reply to Georgi Link to this post

    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.

     

    Georgi said: 

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

     

    Thanks,

    John

  4. Georgi
    Admin
    Georgi avatar
    579 posts

    Posted 04 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Krishna
    Krishna avatar
    5 posts
    Member since:
    Jan 2017

    Posted 07 Nov 2017 in reply to Georgi Link to this post

    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

     

  6. Georgi
    Admin
    Georgi avatar
    579 posts

    Posted 10 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. TJim
    TJim avatar
    9 posts
    Member since:
    May 2018

    Posted 19 Jul Link to this post

     

    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
         //    }))
         //}
     });
Back to Top