passing data from view to controller

[Julien]

Hello,

I would like to know how to pass the data from my "SelectedPosteSelectList" to my controller. When I submit my form, my "SelectedPosteSelectList" is null.

 

Thank you

 

public class EquipeViewModel
    {
        public string Nom { get; set; }

        public string Description { get; set; }

        public List<SelectListItem> PostesSelectList { get; set; }

        public List<SelectListItem> SelectedPosteSelectList { get; set; }

    }

 

<form asp-action="Edit">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">

                <label asp-for="Nom" class="control-label"></label>

                <input asp-for="Nom" class="form-control" />

                <span asp-validation-for="Nom" class="text-danger"></span>

            </div>

            <div class="form-group">

                <label asp-for="Description" class="control-label"></label>

                <input asp-for="Description" class="form-control" />

                <span asp-validation-for="Description" class="text-danger"></span>

            </div>

            <input type="hidden" asp-for="Id" />

       

            <div id="example" role="application">

                <div class="demo-section k-content wide">

                    <label for="optional" id="employees">Postes</label>

                    <label for="selected">@Model.Nom</label>

                    <br />

                    @(Html.Kendo().ListBox()

                                        .Name("Postes")

                                        .Toolbar(toolbar =>

                                        {

                                            toolbar.Position(ListBoxToolbarPosition.Right);

                                            toolbar.Tools(tools => tools

                                                .TransferTo()

                                                .TransferFrom()

                                                .TransferAllTo()

                                                .TransferAllFrom()

                                            );

                                        })

                                        .Selectable(ListBoxSelectable.Multiple)

                                        .ConnectWith("SelectedPosteSelectList")

                                        .BindTo(Model.PostesSelectList)

                    )

 

                    @(Html.Kendo().ListBox()

                                        .Name("SelectedPosteSelectList")

                                        .BindTo(@Model.SelectedPosteSelectList)

                                        .Selectable(ListBoxSelectable.Multiple)

                    )

                </div>

            </div>

 

            <div class="form-group">

                <input type="submit" value="Sauvegarder" class="btn btn-success" />

                <a class="btn btn-filter" asp-action="Index">Retour</a>

            </div>

        </form>

public async Task<IActionResult> Edit(int id, EquipeViewModel equipeView)

[Viktor Tachev]

Hi Julien,

Please check out the thread below that discusses how the data in the ListBox cna be passed to the server. 

• https://www.telerik.com/forums/passing-data-to-controller-for-'selected'-listbox

Let me know how the suggested approach works on your end. 

Regards,
Viktor Tachev
Progress Telerik

[Jason]

Viktor;

I followed the thread, however within .net Core this does not seem to work.

Could you post a .net Core example?

[Viktor Tachev]

Hi,

The approach when using .NET Core would be pretty much the same. The difference would be how the data is passed to the server. Check out the highlighted code below for reference.

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

I am also attaching a sample project that illustrates the approach.


Regards,
Viktor Tachev
Progress Telerik

[khairunnisa]

Hi Viktor Tachev,

Your solution seems work for that case but I got different kind of issue which is I'm using Data Source to bind the data. How can I pass the value to the controller?

Thank you.

[Viktor Tachev]

Hi Khairunnisa,

The approach will work regardless of the way ListBox gets its items. The dataItems() method will return the items available in the widget. In case you would like to get only the selected items you can use the select() method.

Regards,
Viktor Tachev
Progress Telerik

[Stephen]

Hi Viktor,

Does it possible to pass the data both selected list to a ASP.NET Core Razor Handler, just like a grid, without using javascript AJAX?

The screen shot is what I'm trying to achieve.

Kindly see attachment.

[Stephen]

Because what your trying to proposed a solution is for me to create a separate API endpoint just to persist the data.

[Alex Hajigeorgieva]

Hello, Stephen,

You can use the Data() method to send the items to the controller if the ListBox is in a grid as editor. We have a project that demonstrates this exact way of handling the ListBox dataItems:

https://github.com/telerik/ui-for-aspnet-core-examples/blob/master/Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Grid/ListBoxAsEditor.cshtml#L43-L55

.Update(update => update.Action("Orders_Update", "ListBoxAsEditor").Data("sendAvailableLocations"))

 function sendAvailableLocations() {
        var items = $("#Available").data("kendoListBox").dataItems();
        var locations = items.map(function (item) { return item.toJSON()});
        return {
            availableLocations: locations
        }
    }

Regards,
Alex Hajigeorgieva
Progress Telerik