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

Question

我正在尝试从我的两个KendoUI Multiselect小部件中获取数据，但是我无法让它们将任何内容发布到我的控制器中。我有三种型号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添加到每个multipselect，标题输入和提交按钮：

<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>

这里是测试结果：