1

I follow https://demos.telerik.com/kendo-ui/multiselect/addnewitem to add a new item using KendoUI Multi Select

enter image description here

Controller:

    [HttpPost]
    [Route("admin/blog/PostTag")]

    public IActionResult PostTag([FromForm]TagModel models)
    {            
        return Ok();
    }

The models always get null value, I also try without [FromForm] PostTag(TagModel models) or use [FromBody] but it doesn't work.

enter image description here

TagModel class:

public class TagModel
{
    public int Id     {get;set;}
    public string Tag { get; set; }
}

KendoUi on View page:

 <select asp-for="Tag" data-placeholder="Chọn tag"></select>

                    <script id="noDataTemplate" type="text/x-kendo-tmpl">
                        # var value = instance.input.val(); #
                        # var id = instance.element[0].id; #
                        <div>
                            No data found. Do you want to add new item - '#: value #' ?
                        </div>
                        <br />
                        <button class="k-button" onclick="addNew('#: id #', '#: value #')" ontouchend="addNew('#: id #', '#: value #')">Add new item</button>
                    </script>
                    <script>
                        function addNew(widgetId, value) {
                            var widget = $("#" + widgetId).getKendoMultiSelect();
                            var dataSource = widget.dataSource;

                            if (confirm("Are you sure?")) {
                                dataSource.add({
                                    Id: 0,
                                    Tag: value
                                });
                                console.log(dataSource);
                                dataSource.sync();
                                //dataSource.one("requestEnd", function (args) {

                                //    if (args.type !== "create") {
                                //        return;
                                //    }
                                //     console.log(args.type)
                                //    var newValue = args.response[0].id;

                                //    dataSource.one("sync", function () {
                                //        widget.value(widget.value().concat([newValue]));
                                //    });
                                //});

                                //dataSource.sync();
                            }
                        }
                    </script>
                   <script>
                        $(document).ready(function () {
                            var crudServiceBaseUrl = "/admin/blog";
                            var dataSource = new kendo.data.DataSource({
                                batch: true,
                                transport: {
                                    read: {
                                        url: "https://localhost:44383/admin/blog/gettags"
                                    },
                                    create: {
                                        url: "https://localhost:44383/admin/blog/posttag",
                                        type: "POST",
                                        dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                                    },
                                    parameterMap: function (data, type) {
                                        if (type != "read" && data.models) {
                                            console.log(data.models);
                                            return { models: kendo.stringify(data.models) };
                                        };

                                    }
                                },
                                schema: {
                                    model: {
                                        id: "Id",
                                        fields: {
                                            Id: { type: "number" },
                                            Tag: { type: "string" }
                                        }
                                    }
                                }
                            });

                            $("#Tag").kendoMultiSelect({
                                filter: "startswith",
                                dataTextField: "Tag",
                                dataValueField: "Id",
                                dataSource: dataSource,
                                noDataTemplate: $("#noDataTemplate").html()
                            });
                        });
                    </script>
nam vo
  • 3,271
  • 12
  • 49
  • 76
  • You seem to be passing a form field "models", with a JSON object (which includes `Id` and `Tag`) as its value. For it to match your C# I would expect `Id=ABC&Tag=DEF` as the raw request body (click "view source" in the box you highlighted in Chrome) – ProgrammingLlama Apr 11 '19 at 04:45
  • thanks, view source looks like this models=%5B%7B%22Id%22%3A0%2C%22Tag%22%3A%22fghdfgdf%22%7D%5D – nam vo Apr 11 '19 at 04:47
  • I'm afraid I'm not familiar with Kendo UI so I can't advise. I can only state what the problem is at the request level. At a guess (based on what has already been generated), try replacing `return { models: kendo.stringify(data.models) };` with `return data.models;` Alternatively (and probably better), switch to using JSON instead of a form body. – ProgrammingLlama Apr 11 '19 at 04:47
  • [This post](https://stackoverflow.com/a/25285852/3181933) seems to cover sending JSON. You'd need to change `[FromForm]` to `[FromBody]` in C# to support that. – ProgrammingLlama Apr 11 '19 at 04:50
  • return data.models gives undefined, and [FromBody] gives 415 status unsupported media type though I can test the post method from Postman, it works with application/json. really confusing situation. – nam vo Apr 11 '19 at 04:58
  • @john thanks for your dedication. I post a workaround solution instead. – nam vo Apr 11 '19 at 05:49

1 Answers1

0

I don't know why cannot catch the value from the Kendo, so I retrieve the data from Request instead.

enter image description here

nam vo
  • 3,271
  • 12
  • 49
  • 76