[英]Why won't my KendoUI Grid Sort in my ASP.NET Core application?
[英]How do I capture KendoUI Multiselect data in my ASP.NET Core Application?
我试图从我的两个 KendoUI Multiselect 小部件中获取数据,但我无法让它们将任何内容发布到我的 controller。 我有三个模型Products
、 Tags
和Categories
。 我想从我的两个小部件发布数据,遍历数据并将其发布到相关表Tags
和Categories
。 我遇到的问题是,提交表单时,两个小部件的计数为 0,我不确定我做错了什么。
这是我的基本形式。
索引.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>
这是我的观点 model ,在这里我引入了我的Products
model 并将我的ProductCategories
和ProductTags
与它们各自的 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; }
}
}
这是我的 controller 表格,如果 model 有效,我将在该表格中提交产品数据,然后我遍历两个类别和标签的结果并将它们发布到他们的表格中。 问题是,正如我上面所说,它们是空的,计数为 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");
}
我对此的方法完全错误吗?
如果直接使用表单提交,那么只会传递每个多选选择的int[] Values
,而不是对应的List<object>
,因此 model 无法接收对应的两个列表数据。
我建议你可以使用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>
这是测试结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.