Multiselect does not send data to controller method

4 posts, 0 answers
  1. Ruben
    Ruben avatar
    17 posts
    Member since:
    Sep 2017

    Posted 22 Sep 2017 Link to this post

    Hi, I've been working at this for some time to no avail. Here is my code: 

    // view models

     

    public class RegisterViewModel
    {
        [Required]
        [Display(Name = "Roles")]
        public List<RoleModel> RolesList { get; set; }
    }
     
    public class RoleModel
    {
        public string Id { get; set; }
        public string Name { get; set; }
    }

     

    // view

     

    @model ERMgtProgram.Models.RegisterViewModel
    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        <div class="form-group">
        @Html.LabelFor(m => m.RolesList)
        @(Html.Kendo().MultiSelectFor(m => m.RolesList)
            .Name("RolesList")
            .Placeholder("Select roles")
            .DataTextField("Name")
            .DataValueField("Id")
            .HtmlAttributes(new { style = "width: 485px;" })
            .IgnoreCase(true)
            .AutoBind(true)
                    .DataSource(datasource =>
                    {
                        datasource.Read(read => read.Action("ReadRolesList", "Manage"));
                    })
        )
        </div>
         
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" class="k-button" value="Register" />
            </div>
        </div>
    }
    <script>
    $(document).ready(function () {
        var multiSelect = $("#RolesList").data("kendoMultiSelect");
    });
    </script>

     

    //  Controller method for reading data

     

    [Authorize(Roles = "DM_Admin")]
    public async Task<ActionResult> ReadRolesList()
    {
        var dmRoles = await RoleManager.Roles.Where(r =>
            r.Name.Contains("DM_")).ToListAsync();
        var roles = dmRoles.Select(u => new RoleModel
                        {
                        Id = u.Id,
                        Name = u.Name
            }).ToList();
     
        return Json(roles, JsonRequestBehavior.AllowGet);
    }

     

    // controller method that widget posts back to
     
    public async Task<ActionResult> Register(RegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
            // additional code
        }
        // additional code
    }

     

    So, in the view, the MultisSelect widget populates with the correct list of roles, and I am able to select them and everything is fine, and when I click the button to submit the form the correct "Register" controller method is called.

    However, ModelState.IsValid == false and my model.RolesList is empty

    Additionally, I receive this exception:

    Exception {"The parameter conversion from type 'System.String' to type 'ERMgtProgram.Models.RoleModel' failed because no type converter can convert between these types."} System.Exception {System.InvalidOperationException}
    When debugging I can see that the attempted value was: "AttemptedValue "2" string"

    Why is the MultiSelect widget not posting back to the controller with type: List<RoleModel>, and what is an efficient fix for this issue?

     

    Thanks for all the help!
    Ruben

  2. Ruben
    Ruben avatar
    17 posts
    Member since:
    Sep 2017

    Posted 25 Sep 2017 in reply to Ruben Link to this post

    Any feedback would be greatly appreciated. 
  3. Dimitar
    Admin
    Dimitar avatar
    259 posts

    Posted 26 Sep 2017 Link to this post

    Hello Ruben,

    I am attaching an ASP.NET MVC solution, where a similar scenario to the one described is demonstrated (Binding Kendo UI MultiSelect to model).

    I have created the above solution based on the code sample provided and I have made a few modifications in order to achieve the desired result:

    1) When the widget is initialized via a [WidgetName]For method, the id and name for the element are automatically set and there is no need to set the Name() option. More information can be found in the Fundamentals article.

    2) The MultiSelect widget uses a <select> element under the hood to pass its values to the controller method. Therefore, we are able to pass the selected values as List<string> RolesList { get; set; }. In case the RoleModel has an integer Id, then the parent will also have to be modified accordingly - List<int> RolesList { get; set; } .

    In the provided solution, a breakpoint can be set in the beginning of the Save method in the HomeController to verify that the selected values are being successfully received.

    Regards,
    Dimitar
    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.
  4. Ruben
    Ruben avatar
    17 posts
    Member since:
    Sep 2017

    Posted 26 Sep 2017 in reply to Dimitar Link to this post

    Thank you for the help and explanation!
Back to Top