jquery - Kendo 上传不会发布具有复杂类型属性的对象

Question

我在 Asp.net MVC 应用程序中使用kendo上传控件。在单击“确定”按钮事件时，我想上传一个文件以及一些元数据(请注意，此“确定”按钮不是上传控件的“确定”按钮，而是 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 Controller 和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 字符串，然后将其反序列化为 Controller 中的 Address 对象。

客户端代码:

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

Controller 代码:

[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

    }