剑道上传不会发布具有复杂类型属性的对象

Question

我在应用程序中使用剑道上传控件Asp.net MVC。在单击"确定"按钮的事件时，我想上传一个文件以及一些元数据(请注意，此"确定"按钮不是上传控件的"确定"按钮，而是UI上的其他按钮(

所以我将自动上传设置为假。

然后我通过javascript触发上传事件。我还想将元数据与文件一起保存，以便根据此处的文档，我附加了一个客户端事件Upload来设置元数据。

这是我的完整代码

CSHTML

@(Html.Kendo().Upload().Name("files")
.Async(a=>a.Save("Save", "Home")
.AutoUpload(false)))

上传 JavaScript

$(function () {
var _btnOK = $("#btnOK");
var kendoUpload = $("#files").getKendoUpload();
// trigger kendo's upload event
_btnOK.click(function (e) {    
e.preventDefault();    
$(".k-upload-selected").click();    
}); 
// attach metadata here
kendoUpload.bind("upload", function (e) {
e.data = {
"Name": "John Doe",
"Age": 40,
"Address": {
"State": "TX",
"City": "Dallas"
}
};
})       
})

对应的 MVC 控制器和 C# 模型

public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public Address Address { get; set; }
}
public class Address
{       
public string State { get; set; }
public string City { get; set; }
}
[HttpPost]
public async Task<ActionResult> UploadDocument(Person model)
{
//file get posted in HttpContext.Request.Files
//model's immediate properties like Name and Age get posted however
//model.Address is remains null
}

当我单击"确定"时，所选文件将按预期发布到HttpContext.Request.Files中的服务器。
此外，具有原始数据类型的模型的直接属性也会发布，但是复杂对象类型的模型子属性不会发布。

所以在上面的例子中，Name和Age有值，但Address保持为空。

知道吗？

Answer 1

问题是剑道上传小部件最终会将字段附加到 FormData 对象，该对象只能将字符串或 blob 作为值处理 (https://developer.mozilla.org/en-US/docs/Web/API/FormData/append(。

您可以做的是在客户端将地址对象序列化为 json 字符串，然后将其反序列化为控制器中的地址对象。

客户端代码：

// attach metadata here
kendoUpload.bind("upload", function (e) {
var address = {
"State": "TX",
"City": "Dallas"
};
e.data = {
"Name": "John Doe",
"Age": 40,
"Address": JSON.stringify(address)
};
})

控制器代码：

[HttpPost]
public async Task<ActionResult> UploadDocument(Person model)
{
JavaScriptSerializer js = new JavaScriptSerializer();
model.Address = js.Deserialize<Address>(HttpContext.Request.Form["Address"]);
// Do other stuff with your model
}