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控制器和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字符串，然后将其反序列化为控制器中的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)
                };
        })

控制器代码：

[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

    }

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

1 个答案: