2017-02-08 7 views
1

In meinem HTML-Code-Datei ich eine Datei (ohne Formular-Tag)Wie Wörterbuch senden und mit Ajax

<input id="file1" type="file" class="form-control form-exception"> 

und ein paar Textbox

<input id="id-one" type="text" class="form-control" > 
<input id="id-two" type="text" class="form-control" > 
... 
<input id="id-six" type="text" class="form-control" > 
... 

Codebehind in C#

public class Model 
{ 
     public int Id { get; set; } 
     public Dictionary<string, string> Fields { get; set; } 
     public string File { get; set; } 
} 

public ActionResult Send(Model myModel) 
{ 
... 
} 

Ich möchte Daten von HTML zu meinem Controller senden: Id, Dictionary<html id,html value> und Datei.

Diese Lösung hat nicht funktioniert:

var dict={ 
    '[0].Key':'id-one'. 
    '[0].Value':'aaaaa' 
} 
var data = new FormData(); 
data.append('Id', @Model.Id); 
data.append('Fields', dict); 
data.append('File',$('#file1')[0].files[0]); 

$.ajax({ 
      url: '@Url.Action("Send")', 
      type: 'POST', 
      data: data, 
      dataType: 'json', 
      contentType: false, 
      processData: false, 
      complete: function (data) { 
      }, 
      error: function (response) { 
      } 
     }); 

Dieser Code funktioniert für Datei, aber nicht für Wörterbuch

Wie kann ich dieses Problem lösen? Danke im Voraus !!!

Antwort

0

Sie können keine Objekte FormData mit .append(), nur einfache Werte hinzufügen. Sie müssen jedes Name/Wert-Paar einzeln hinzufügen.

var data = new FormData(); 
data.append('Id', @Model.Id); 
data.append('Fields[0].Key', 'id-one'); // add the dictionary key 
data.append('Fields[0].Value', 'aaaaa'); // add the dictionary value 
data.append(File, $('#file1')[0].files[0]); 
$.ajax({ 
    .... 
}); 

Ich nehme an, Sie tatsächlich den Wert des Eingangs mit id="id-one" zu stellen, in welchem ​​Fall seinen data.append('Fields[0].Value', $('#id-one').val());

Zusätzlich, wie erwähnt in Chris Pratt Antwort, Sie den Wert des Input-Datei veröffentlichen, so Ihre Immobilie auf dem Modell sollte

public HttpPostedFileBase File { get; set; } 
+0

Vielen Dank für Hilfe. – l3niwi3c

0

können Sie versuchen, dies zu tun?

var dict={ 

    '[0].Key':'id-one'. 
    '[0].Value':'aaaaa' 
} 
var data = new FormData(); 
data.append('Id', @Model.Id); 
data.append('Fields', dict); 
data.append('File',$('#file1')[0].files[0]); 

$.ajax({ 
    url: '@Url.Action("Send")', 
    data: data, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function(data){ 
    alert(data); 
    } 
}); 
+0

der gleiche Effekt sein: die Datei ist ok, aber Wörterbuch ist ein null- – l3niwi3c

0

Es gibt eine Reihe von Problemen hier.

  1. Ihre File Eigenschaft muss HttpPostedFileBase, nicht string vom Typ sein. Der gepostete Wert wird ein Stream sein, der die eigentlichen Dateidaten enthält, nicht etwas wie der Pfad auf dem Dateisystem des Clients (was dir sowieso nicht gut tun würde).

  2. Ihre Texteingaben haben derzeit keine Namensattribute, daher werden ihre Daten überhaupt nicht in die Post aufgenommen, geschweige denn gebunden.

  3. Um an ein Wörterbuch zu binden, müssen Sie sowohl Key als auch Value Mitglieder für jedes Element angeben, was zwei Eingaben für jedes Element erfordert.

    <input type="hidden" name="Fields[0].Key" value="1" /> 
    <input type="text" name="Fields[0].Value" /> 
    
    <input type="hidden" name="Fields[1].Key" value="2" /> 
    <input type="text" name="Fields[1].Value" /> 
    
    <!-- etc --> 
    

EDIT

bemerkt einfach den aktualisierten Code in Ihrer Frage. Es scheint, das Problem mit der Bindung an Fields ist einfach, dass Sie nicht den Namen der Eigenschaft enthalten. Mit anderen Worten, Fields[0].Key, anstatt [0].Key:

var dict={ 
    'Fields[0].Key':'id-one'. 
    'Fields[0].Value':'aaaaa' 
} 
+0

Name in dict nicht helfen. Ich habe es versucht, Field ist immer noch null. Das ist mein größtes Problem. – l3niwi3c