如何在我的 ASP.NET Core 应用程序中捕获 KendoUI 多选数据？

Question

我正在尝试从我的两个 KendoUI 多选小部件中获取数据，但我无法让它们向我的控制器发布任何内容。我有三个模型Products、Tags 和Categories。我想从我的两个小部件发布数据，遍历数据并将其发布到相关表 Tags 和 Categories。我遇到的问题是，提交表单时，两个小部件的计数为 0，我不确定我做错了什么。

这是我的基本形式。

Index.cshtml

<form asp-action="Create" asp-controller="Products" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="Products.Title"></label>
        <input type="text" asp-for="Products.Title" class="form-control" />
    </div>


        <kendo-multiselect name="ProductTags" for="ProductTags" style="width:100%"
            placeholder="Select tags..."
            datatextfield="TagName"
            datavaluefield="Id">
            <datasource type="DataSourceTagHelperType.Ajax" page-size="80" server-filtering="true">
                <transport>
                    <read url="@Url.Action("TagVirtualRead", "Products")" />
                </transport>
            </datasource>
            <virtual value-mapper="TagMapper" />
            <popup-animation>
                <open duration="500" />
                <close duration="500" />
            </popup-animation>
        </kendo-multiselect>

    <kendo-multiselect name="ProductCategories" for="ProductCategories" style="width:100%"
        placeholder="Select categories..."
        datatextfield="CategoryName"
        datavaluefield="Id">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="80" server-filtering="true">
            <transport>
                <read url="@Url.Action("CategoryVirtualRead", "Products")" />
            </transport>
        </datasource>
        <virtual value-mapper="CategoryMapper" />
        <popup-animation>
            <open duration="500" />
            <close duration="500" />
        </popup-animation>
    </kendo-multiselect>


    <div class="form-group">
        <button type="submit" class="btn btn-default btn-primary">Submit</button>
    </div>
</form>

这是我的视图模型，我将Products 模型导入其中，并将ProductCategories 和ProductTags 与它们各自的模型一起作为列表。

using System;
using System.Collections.Generic;
using System.Text;

namespace MyProject.Data.ViewModels
{
    public class CreateProductViewModel
    {
        public CreateProductViewModel()
        {
            ProductCategories = new List<ProductCategories>();
            ProductTags = new List<ProductTags>();
        }
        public Products Products { get; set; }
        public List<ProductCategories> ProductCategories { get; set; }
        public List<ProductTags> ProductTags { get; set; }
    }
}

这是我的表单控制器，如果模型有效，我会在其中提交产品数据，然后我会遍历类别和标签的结果并将它们发布到它们的表中。问题是，正如我上面所说，它们是空的，计数为 0。

创建

[HttpPost]
public IActionResult Create(CreateProductViewModel model)
{
    if (ModelState.IsValid && model !=null)
    {
        try
        {
            var product = new Products
            {
                Id = model.Products.Id,
                Title = model.Products.Title,
                SKU = model.Products.SKU,
                Price = model.Products.Price,
                ShortDescription = model.Products.ShortDescription,
                LongDescription = model.Products.LongDescription,
                StockLevel = model.Products.StockLevel
            };
            _productsService.InsertProduct(product);
            int newId = product.Id;

            //Process Tags
            if (model.ProductTags !=null) {
                try
                {
                    foreach (var tag in model.ProductTags)
                    {
                        var tagItem = new ProductTags
                        {
                            ProductId = product.Id,
                            TagName = tag.TagName
                        };
                        _productTagService.InsertProductTag(tagItem);
                    }
                }
                catch (Exception ex)
                {
                    Console.WriteLine(ex.Message);
                 }
             }
             //Process Categories
             if (model.ProductCategories != null) {
                 try
                 {
                     foreach (var category in model.ProductCategories)
                     {
                         var categoryItem = new ProductCategories
                         {
                             ProductId = product.Id,
                             CategoryName = category.CategoryName
                         };
                         _productCategoryService.InsertProductCategory(categoryItem);
                     };
                 }
                 catch (Exception ex)
                 {
                     Console.WriteLine(ex.Message);
                 }
             }
         }
         catch (Exception ex) {
             Console.WriteLine(ex.Message);
         };
     }
     return RedirectToAction("Index", "Products");
 }

我的处理方法完全错误吗？

Answer 1

如果直接使用表单提交，那么只会传递每个multipselect选中的int[] Values，而不是对应的List<object>，所以模型无法接收到对应的两个数据列表。

我建议你可以使用ajax方法传参，将每个multipselect选中的数据传给compose the required parameters，然后传给Create方法。

首先，为每个多选、标题输入和提交按钮添加Id：

<form asp-action="Create" asp-controller="Products" method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="Products.Title"></label>
        <input type="text" asp-for="Products.Title" class="form-control"  id="TitleInput" />
    </div>


        <kendo-multiselect id="ProductTags" name="ProductTags" for="ProductTags" style="width:100%"
            placeholder="Select tags..."
            datatextfield="TagName"
            datavaluefield="Id">
            <datasource type="DataSourceTagHelperType.Ajax" page-size="80" server-filtering="true">
                <transport>
                    <read url="@Url.Action("TagVirtualRead", "Products")" />
                </transport>
            </datasource>
            <virtual value-mapper="TagMapper" />
            <popup-animation>
                <open duration="500" />
                <close duration="500" />
            </popup-animation>
        </kendo-multiselect>

    <kendo-multiselect id="ProductCategories" name="ProductCategories" for="ProductCategories" style="width:100%"
        placeholder="Select categories..."
        datatextfield="CategoryName"
        datavaluefield="Id">
        <datasource type="DataSourceTagHelperType.Ajax" page-size="80" server-filtering="true">
            <transport>
                <read url="@Url.Action("CategoryVirtualRead", "Products")" />
            </transport>
        </datasource>
        <virtual value-mapper="CategoryMapper" />
        <popup-animation>
            <open duration="500" />
            <close duration="500" />
        </popup-animation>
    </kendo-multiselect>


    <div class="form-group">
        <button type="submit" class="btn btn-default btn-primary" id="submit">Submit</button>
    </div>
</form>

然后在这个视图中添加如下js：

<script>
        $("form").submit(function () {
            event.preventDefault();
            var ProductTags = [];
            var ProductCategories = [];
            $("#ProductCategories option:selected").each(function () {
                var category = {};
                category.Id = $(this).val();
                category.CategoryName = $(this).text();
                ProductCategories.push(category);
            });
            $("#ProductTags option:selected").each(function () {
                var tag = {};
                tag.Id = $(this).val();
                tag.TagName = $(this).text();
                ProductTags.push(tag);
            });
            var createProductViewModel = {
                Products: {
                    Title: $("#TitleInput").val()
                },
                ProductTags: ProductTags,
                ProductCategories: ProductCategories
            }
            $.ajax({
                url: "/Products/Create",
                type: "POST",
                data: createProductViewModel,
            });
        })
    </script>

这是测试结果：