Post Form zusammen mit mehreren Dateien zu Web API

Question

Ich bin noch neu, wie Web API 2.0 funktioniert, aber ich fange an, den Dreh der Dinge zu bekommen. Das einzige Problem, das ich hatte, ist, wie man ein Formular zusammen mit mehreren Dateien, die der Benutzer auf meinen Controller hochgeladen hat, veröffentlicht.

Ich denke, ich brauche hauptsächlich Hilfe bei der Verwendung JavaScript oder jquery mit ajax, um alle richtigen Werte zu posten. Hier

ist ein snippit meiner HTML:

<form id="CreateAnnouncementForm" class="form-horizontal"> 
    <input type="hidden" name="announcementTypeID"/> 

     <div class="row"> 
      <div class="col-md-12"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Headline</label> 
        <div class="col-sm-10"> 
         <input type="text" class="form-control" name="headline" /> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">More Info</label> 
        <div class="col-sm-10"> 
         <textarea class="form-control" name="moreInfo"></textarea> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Attachments</label> 
        <div class="col-sm-10"> 
         <input type="file" name="Attachments" multiple/> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

Hier ist die JavaScript/jQuery/Ajax, die ich normalerweise verwenden, um meine Form an die Steuerung zu schreiben:

onAnnouncementCreate: function() { 
    var form = $("#CreateAnnouncementForm"); 

    var validator = $(form).kendoValidator().data("kendoValidator"); 

    if (validator.validate()) { 
     var options = { 
      url: getApiUrl() + "/Announcement", 
      dataType: "json", 
      type: "POST", 
      headers: { 
       "Authorization": "Bearer " + getJwtToken(), 
       "LocationId": getCurrentLocation() 
      }, 
      data: $(form).serialize(), 
      statusCode: { 
       200: function() { 
        $("#AnnouncementCreateModal").modal("hide"); 
        announcementViewModel.reloadGrids(); 
       }, 
       400: function (response) { 
        toastr.options = { "positionClass": "toast-bottom-full-width"; 
        toastr.error(response.responseText); 
       } 
      } 
     }; 

     $.ajax(options); 
    } 
} 

Jetzt glaube ich es wäre am besten, wenn ich gerade ein ViewModel erstellt, das sowohl die ViewModel für alle Werte in meinem Formular enthielt und es eine IEnumerable für die Anlagen enthalten, die die Benutzer innerhalb des Formulars hochladen können.

Das Problem, das ich habe, ist jedoch korrekt die Anhänge zum Formular hinzufügen, so dass sie korrekt zugeordnet werden.

Mein ViewModel wird wie folgt aussehen:

public class AnnouncementCreateViewModel 
{ 
    public AnnouncementViewModel Announcement { get; set; } 
    public IEnumerable<HttpPostedFileBase> Attachments { get; set; } 
} 

Natürlich würde ich dann müssen die Namen in meiner Form ändern, um das neue Modell zu reflektieren.

Wenn mir jemand helfen kann, sie auf meinen Controller zu stellen, wäre das sehr geschätzt, denn das ist das Einzige, mit dem ich immer noch zu kämpfen habe.

Answer 1

Da erwies sich das als schwieriger als ich dachte, es wäre. Ich entschied mich für eine alternative Route.

Da ich bereits das Kendo UI Framework verwende, verwende ich jetzt das Kendo Upload Widget, um das Hochladen meiner Dateien zu verarbeiten. Ich habe es asynchron die Dateien auf meinen Web-API-Controller hochladen und dann habe ich eine separate Aktion, um das Formular zu behandeln, wenn es eingereicht wird.

Natürlich kann ich gerne auch andere Antworten finden, die dieses Problem lösen könnten, indem sie alle Daten in einem Anruf veröffentlichen, aber für den Moment reicht dies.