動的に作成されたフォームのデータ（モデルバインディングのワイヤ形式）

Question

MVC C＃アプリケーション内のFineuploader（v5.3）のjqueryラッパーを使用しています。

私のコントローラは、ビューの外観（「n」個のテキストフィールドと「n」個のアップロードコントロール）のメタデータを取得し、ビューに渡します。 BAM。これらの動的アップロードコントロールを作成するには、Dynamic Multiple Upload Instancesが既にあります。私の現在の問題は、ファイルを保存するための中間場所なしでワンショットで一緒に作業するアップロードとフォームの投稿が必要であるという点で、わずかに異なります。さらに、私は何がビューからコントローラに渡されるのか分からないので、重要なID情報とその値の両方を追跡するために辞書コレクションを活用しています。ビューからコントローラにテキストコレクションをシリアライズするだけでうまくいきます（詳細については、fieldName [0] .property = value。モデルバインディングのためのHanselmanのワイヤフォーマットhereを参照してください）。

実際の問題は何ですか？このワイヤフォーマットのシリアライズを、アップローダのファイル用に動作させるとともに、フォームとともに正しくポストするようにします。

これで、今度は高度な問題が発生しましたので、詳しく説明しましょう。

はここでコントローラーモデルです：ここで

は、任意のアップロード先なしフォームポストです：あなたはここにアクションでワイヤーフォーマットを参照してくださいすることができます。うまく連動します。

ここでは、動的に非表示のhtmlフィールドを作成し、キーと値を追加します。 は、UserText辞書のプロパティにうまくシリアル化します。そのここを参照してください：

はここに私のFineUploaderのjQueryコードです。私はRazorを利用してインスタンスにカウンタを追加し、それぞれ固有のものにしています。

$('#files-upload0').fineUploader('uploadStoredFiles'); 

$('#files-upload1').fineUploader('uploadStoredFiles'); 

$('#@formId').submit(); 

私は、アップロードコントロールを送信したとき、私は、このフォームデータを参照してください：動的に私のフォームに2つのアップロードコントロールを追加し、それを掲示した後

$('#files-upload@(counter)').fineUploader({ 
    debug: false, 
    autoUpload: false, 
    template: 'qq-template-@(counter)',  
    form: { 
     element : '@formId' 
    }, 
    validation: { 
     acceptFiles: ['image/*', 'application/acrobat', 'application/x-pdf', 'text/pdf', 'text/x-pdf'], 
     allowedExtensions: ['jpeg', 'jpg', 'pdf', 'tif', 'tiff'], 
     sizeLimit: 1024 * 1024 * 9, 
     stopOnFirstInvalidFile: false 
    }, 
    multiple: false 
}).on('submitted', function (event, id, filename) {  
    alert('submitted from ' + @counter); 
}).on('complete', function (event, id, filename, responseJSON) { 
    var element = $("li[qq-file-id=" + id + "] .qq-upload-status-text");  
    element.html("Success"); 
    alert('complete individual from ' + @counter); 
}).on('allComplete', function (succeeded, failed) {  
    alert('ALL complete from ' + @counter); 
}).on('error', function (event, id, name, errorReason, xhr) {  
    alert('Error[@(counter)]: ' + errorReason); 
}); 

。またsetFormをし、私はまだonCompleteのイベントが必要な場合、私は思ったんだけど、など

、ワイヤーを使用している場合：

私は、私はそれを使用するかどうかはわかりませんけれども、SETFORMのドキュメントを見てきましたシリアライズされたコレクションのアイデアを書式設定します。受信ファイルのプロパティ名はどこで変更できますか？たとえば、qqfile [0] .HttpPostedFile、qqfile [0] .ContentLength、qqfile [0] .InputStreamなどが必要であると思うので、シリアライザはプロパティを関連付けて割り当てることができます。現在掲載されているものでは、2番目のファイルアップロードの詳細（llama.jpg）のみが出てくるようです。私が説明しようとしていることは理にかなっているのですか？これについてもっと簡単な方法を考えることができますか？

Answer 1

setForm APIメソッドを使用すると、ファインアップローダを特定の<form>要素に添付することができます。これは、ファインアップローダインスタンスが作成されたとき、またはターゲットフォームが変更されたときに存在しなかったフォームを登録する場合に便利です。例えば

：

var uploader = new qq.FineUploader({}); 
uploader.setForm(document.querySelector('form')) 

詳細はドキュメントサイト上form feature pageで見つけることができます。