Как мне захватить данные KendoUI Multiselect в моем базовом приложении ASP. NET? - PullRequest
0 голосов
/ 22 апреля 2020

Я пытаюсь получить данные из моих двух виджетов KendoUI Multiselect и не могу заставить их что-либо публиковать на моем контроллере. У меня есть три модели Products, Tags и Categories. Я хочу разместить данные из моих двух виджетов, перебрать данные и разместить их в соответствующих таблицах Tags и Categories. У меня проблема в том, что при отправке формы два виджета имеют счетчик 0, и я не уверен, что я сделал неправильно.

Вот моя базовая форма c.

Index.cs html

<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");
 }

Мой подход к этому совершенно неправильный?

1 Ответ

0 голосов
/ 24 апреля 2020

Если вы напрямую используете форму для отправки, тогда она будет передавать только int[] Values, выбранный каждым множественным выбором, а не соответствующий List<object>, поэтому модель не может получить два соответствующих списка данных.

Я предлагаю использовать метод ajax для передачи параметров и получения данных, выбранных каждым множественным выбором, в 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>

Вот результат теста:

enter image description here

...