剣道アップロードは複合型プロパティのオブジェクトを投稿しません

Question

Asp.net MVCアプリケーションで剣道アップロードコントロールを使用しています。 OKボタンのクリックイベントでいくつかのメタデータと共にファイルをアップロードしたい（このOKボタンはアップロードコントロールの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 
    } 

です

[OK]をクリックすると、選択したファイルがHttpContext.Request.Files内のサーバーに期待どおりに送信されます。
また、プリミティブなデータ型を持つモデルの即時プロパティがポストされますが、モデルの複雑なオブジェクト型の子プロパティはポストされません。

したがって、上記の例では、NameとAgeには値がありますが、Addressはnullのままです。

Answer 1

剣道アップロードウィジェットは最終的に、文字列やBLOBを値（https://developer.mozilla.org/en-US/docs/Web/API/FormData/append）としてしか扱えないFormDataオブジェクトにフィールドを追加するという問題があります。

あなたができることは、クライアント側でアドレスオブジェクトを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 

    }