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

Question

我在Asp.net MVC 应用程序中使用剑道上传控制。在 OK 按钮的单击事件上，我想上传一个文件以及一些元数据（注意这个 OK 按钮不是 Upload 控件的 OK 按钮，它是 UI 上的其他按钮）

所以我将 AutoUpload 设置为 false。

然后我通过 javascript 触发上传事件。我还想将元数据与文件一起保存，以便根据文档here 我附加了一个客户端事件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

问题在于 Kendo Upload 小部件最终会将字段附加到 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

    }