如何在ASP.NET Core应用程序中捕获KendoUI Multiselect数据? [英] How do I capture KendoUI Multiselect data in my ASP.NET Core Application?
问题描述
我正在尝试从我的两个KendoUI Multiselect小部件中获取数据，但是我无法让它们将任何内容发布到我的控制器中.我有三个模型Products，Tags和Categories.我想从我的两个小部件中发布数据，遍历数据并将其发布到相对表Tags和Categories中.我的问题是，提交表单时，两个小部件的计数为0，我不确定自己做错了什么.
I am trying to grab data from my two KendoUI Multiselect widgets and I can't get them to post anything to my controller. I have three models Products, Tags, and Categories. I want to post the data from my two widgets, iterate over the data and post it to the relative tables Tags and Categories. The problem I have is that when the form is submitted, the two widgets have a count of 0 and I'm not sure what I've done wrong.
这是我的基本表格.
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投射为具有各自模型的列表.
Here is my view model where I bring in my Products model and cast my ProductCategories and ProductTags as a list with their respective model.
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.
Here is my controller for the form where I submit the product data if the model is valid, then I iterate over the results of both categories and tags and post them into their tables. The problem is, as I said above, they are empty with a count of 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");
}
我的处理方法完全错误吗?
Is my approach to this totally wrong?
推荐答案
如果您直接使用表单提交，那么它将仅传递每个multipselect选择的int[] Values，而不传递相应的List<object>，因此该模型无法接收相应的两个数据列表.
If you directly use the form to submit, then it will only pass the int[] Values selected by each multipselect, not the corresponding List<object>, so the model cannot receive the corresponding two lists of data.
我建议您可以使用ajax方法传递参数，并将每个multipselect选择的数据获取到compose the required parameters，然后将其传递给Create方法.
I suggest that you can use the ajax method to pass parameters, and get the data selected by each multipselect to compose the required parameters ,then pass them to the Create method.
首先，将ID添加到每个multipselect，标题输入和提交按钮:
First, add Id to each multipselect ,title input and submit button :
<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:
Then add the following js in this view:
<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>
这是测试结果:
这篇关于如何在ASP.NET Core应用程序中捕获KendoUI Multiselect数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
