Bild-Upload - MVC, wenn im Bootstrap-Modal verwendet, gibt Null zurück

Question

Ich verbinde die Teilansicht innerhalb des Bootstrap Modal Popup. Wenn ich aus dem Popup hochlade, wird der Upload als null zurückgegeben. Wenn ich die Teilansicht stattdessen direkt im Browser öffne, ist die Datei im Modell vorhanden. Es gibt also kein Problem mit dem Hochladen von Dateien. Das Problem ist mit Modal Popup oder etwas.

Es sieht:

• Modal Popup
• Partial View

Wenn aus der modalen Popup-Posting, der Inhaltstyp application/x-www-form-urlencoded geändert wird, in dem wie bei der Verwendung von Bei der Teilansicht direkt handelt es sich um Multipart/Form-Daten.

modalform.js

$(function() { 

    $.ajaxSetup({ cache: false }); 

    $("a[data-modal]").on("click", function (e) { 

     // hide dropdown if any 
     $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle'); 


     $('#myModalContent').load(this.href, function() { 


      $('#myModal').modal({ 
       /*backdrop: 'static',*/ 
       keyboard: true 
      }, 'show'); 

      bindForm(this); 
     }); 

     return false; 
    }); 


}); 

function bindForm(dialog) { 

    $('form', dialog).submit(function() { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function (result) { 
       if (result.success) { 
        $('#myModal').modal('hide'); 
        //Refresh 
        location.reload(); 
       } else { 
        $('#myModalContent').html(result); 
        bindForm(); 
       } 
      } 
     }); 
     return false; 
    }); 
} 

Ich bin mit AJAX Posting die Daten von meinem Formular abzuschicken. Bei Verwendung von $ (this) .serialize() wird der Ajax-Erfolg aufgerufen, aber die Datei wird nicht zurückgegeben, da der Inhaltstyp unterschiedlich ist. Wie kann ich das ändern ??

Modell

public partial class Produkty 
    { 
     public int PRO_Id { get; set; } 
     public string PRO_Nazwa { get; set; } 
     public string PRO_Jednostka { get; set; } 
     public float PRO_Vat { get; set; } 
     public string PRO_Rodzaj { get; set; } 
     public string PRO_Opis { get; set; } 
     public string PRO_Waluta { get; set; } 
     public float PRO_CenaN { get; set; } 
     public float PRO_CenaB { get; set; } 
     public string PRO_ZdjecieN { get; set; } 
     public byte[] PRO_ZdjecieF { get; set; } 
    } 

Ansicht erstellen

@using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" })) 
//@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="modal-body"> 

     <div class="form-horizontal"> 
      @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Nazwa, "Nazwa", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.PRO_Nazwa, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.ValidationMessageFor(model => model.PRO_Nazwa, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Jednostka, "Jednostka", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.PRO_Jednostka, new { htmlAttributes = new { @class = "form-control", @Value = "szt." } }) 
        @Html.ValidationMessageFor(model => model.PRO_Jednostka, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Vat, "Vat", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.DropDownListFor(model => model.PRO_Vat, new List<SelectListItem> 
        { 
         new SelectListItem{ Text = "23 %", Value = "23"}, 
         new SelectListItem{ Text = "8 %", Value = "8" }, 
         new SelectListItem{ Text = "5 %", Value = "5" }, 
         new SelectListItem{ Text = "4 %", Value = "4" }, 
         new SelectListItem{ Text = "0 %", Value = "0" } 

        }, "wybierz...", new { @class = "form-control", @id = "Value1" }) 
        @Html.ValidationMessageFor(model => model.PRO_Vat, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Rodzaj, "Rodzaj", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.DropDownListFor(model => model.PRO_Rodzaj, new List<SelectListItem> 
        { 
         new SelectListItem{ Text = "towar", Value = "towar" }, 
         new SelectListItem{ Text = "usługa", Value = "usługa" } 

        }, "wybierz...", new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.PRO_Rodzaj, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Waluta, "Waluta", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.DropDownListFor(model => model.PRO_Waluta, new List<SelectListItem> 
        { 
         new SelectListItem{ Text = "PLN", Value = "PLN" }, 
         new SelectListItem{ Text = "EUR", Value = "EUR" }, 
         new SelectListItem{ Text = "USD", Value = "USD" }, 
         new SelectListItem{ Text = "GBP", Value = "GBP" }, 
         new SelectListItem{ Text = "CHF", Value = "CHF" } 

        }, "wybierz...", new { @class = "form-control" }) 
        @Html.ValidationMessageFor(model => model.PRO_Waluta, "", new { @class = "text-danger" }) 
       </div> 
      </div> 


      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_CenaN, "Cena netto", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.PRO_CenaN, new { htmlAttributes = new { @class = "form-control", @id = "Value2" } }) 
        @Html.ValidationMessageFor(model => model.PRO_CenaN, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_CenaB, "Cena brutto", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.PRO_CenaB, new { htmlAttributes = new { @class = "form-control", @id = "MultiplyValue1Value2" } }) 
        @Html.ValidationMessageFor(model => model.PRO_CenaB, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_Opis, "Opis", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.EditorFor(model => model.PRO_Opis, new { htmlAttributes = new { @class = "form-control", @Value = "brak" } }) 
        @Html.ValidationMessageFor(model => model.PRO_Opis, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

      <div class="form-group"> 
       @Html.LabelFor(model => model.PRO_ZdjecieF, "Plik", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        <input type="file" id="file" class ="btn btn-default btn-file" name="file" /> 
        @Html.ValidationMessageFor(model => model.PRO_ZdjecieF, "", new { @class = "text-danger" }) 
       </div> 
      </div> 

     </div> 

    </div> 

    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">Anuluj</button> 
     <input class="btn btn-primary" id="upload" type="submit" value="Zapisz" /> 
    </div> 

Controller:

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Exclude = "PRO_ZdjecieF,PRO_Zdjecie")]Produkty pro, HttpPostedFileBase file) 
     {   


      if (ModelState.IsValid) 
      { 
       //if (imageF != null) 
       { 
        pro.PRO_ZdjecieF = new byte[file.ContentLength]; 
        pro.PRO_ZdjecieN = file.ContentType; 
        file.InputStream.Read(pro.PRO_ZdjecieF, 0, file.ContentLength); 
       } 

       db.Produkties.Add(pro); 
       db.SaveChanges(); 
       return Json(new { success = true }); 
      } 

      return PartialView("Create", pro); 
     } 

Bitte helfen thi zu lösen s.

Answer 1

$(function() { 
 

 
    $.ajaxSetup({ cache: false }); 
 

 
    $("a[data-modal]").on("click", function (e) { 
 
     $("#myModalContent").load(this.href, function() { 
 
      
 

 
      $("#myModal").modal({ 
 
       keyboard: true 
 
      }, "show"); 
 

 
      bindForm(this); 
 
     }); 
 

 
     return false; 
 
    }); 
 
}); 
 

 
function bindForm(dialog) { 
 
    
 
    $("#crtForm", dialog).submit(function() { 
 
     var myform = document.getElementById("crtForm"); 
 
     var fdata = new FormData(myform); 
 
     $.ajax({ 
 
      url: this.action, 
 
      data: fdata, 
 
      cache: false, 
 
      processData: false, 
 
      contentType: false, 
 
      type: "POST", 
 
      success: function (result) { 
 
       if (result.success) { 
 
        $("#myModal").modal("hide"); 
 
        location.reload(); 
 
       } else { 
 
        $("#myModalContent").html(result); 
 
        bindForm(); 
 
       } 
 
      } 
 
     }); 
 
     return false; 
 
    }); 
 
}

realen Arbeits Code