Bild hochladen Fehler in ASP MVC

Question

Ich habe dieses Problem, wenn ich versuche, ein Bild hochzuladen. Wenn ich den Absenden-Button klicken, erhalte ich folgende Fehlermeldung: click

wenn ich withaut modal param es funktioniert, aber das Fenster ist nicht in modal und sieht sehr schlecht.

Modell:

public partial class Prod 
{ 
    public string PName { get; set; } 
    public byte[] PFile{ get; set; } 
} 

Übersicht:

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

@Html.ActionLink(" ", "Create", "Products", null, new { data_modal = "file", id = "btnCreate", @class = "btn btn-small btn-primary pull-right fa fa-cart-plus" })

@Html.ActionLink(" ", "Create", "Products", null, new { id = "btnCreate", @class = "btn btn-small btn-primary pull-right fa fa-cart-plus" })

}

Ansicht erstellen:

@using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @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.PFile, "Plik", htmlAttributes: new { @class = "control-label col-md-3" }) 
       <div class="col-md-9"> 
        @Html.TextBoxFor(model => model.PFile, new { type = "file", name = "imageF" }) 
        @Html.ValidationMessageFor(model => model.PFile, "", 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" type="submit" value="Zapisz" /> 
    </div> 
} 

Controller:

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Exclude = "PFile")] Prod pro, HttpPostedFileBase imageF) 
     {      
      if (ModelState.IsValid) 
      { 

        if (imageF != null) 
        { 
         pro.PName= imageF.ContentType; 
         pro.PFile= new byte[imageF.ContentLength]; 
         imageF.InputStream.Read(pro.PFile, 0, imageF.ContentLength); 
        } 


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

      } 

      return PartialView("Create", pro); 
     } 

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(), 
     contentType: 'multipart/form-data', 
     success: function (result) { 
      if (result.success) { 
       $('#myModal').modal('hide'); 
       //Refresh 
       location.reload(); 
      } else { 
       $('#myModalContent').html(result); 
       bindForm(); 
      } 
     } 
    }); 
    return false; 
}); } 

Bitte helfen dieses Problem zu lösen.

Answer 1

Versuchen Sie, den Namen des Objekts HttpPostedFileBase in das Attribut Bind einzufügen. Alles, was Sie nicht dort eingeben, wird von der Anfrage ausgeschlossen. Gefällt mir:

public ActionResult Create([Bind(Exclude = "PFile", Include = "imageF")] Prod pro, HttpPostedFileBase imageF) 

Answer 2

Bitte überprüfen Sie dieses. Zuallererst können Sie die Datei nicht über einen Ajax-Aufruf veröffentlichen. Um die Datei auf der Serverseite zu veröffentlichen, ist ein vollständiger Postback erforderlich. Es gibt einige andere Techniken, um Datei von Ajax-Aufruf zu behandeln.

Kontrolle dieser Code ..

Funktionscontroller.

public ActionResult Create(Prod pro) 
    { 
     if (ModelState.IsValid) 
     { 

      if (pro.PFile != null) 
      { 
       pro.PName = pro.PFile.ContentType; 
       pro.PFileByte = new byte[pro.PFile.ContentLength]; 
       pro.PFile.InputStream.Read(pro.PFileByte, 0, pro.PFile.ContentLength); 
      } 


      //db.Prods.Add(pro); 
      //db.SaveChanges(); 
      return Json(new { success = true }); 
     } 
     return PartialView("Create", pro); 
    } 

Ansichtsmodell ...

public partial class Prod 
{ 
    public string PName { get; set; } 
    public byte[] PFileByte { get; set; } 
    public HttpPostedFileBase PFile { get; set; } 
} 

Entfernen Sie die Form der Funktion, und kreuzt. Wenn ein Ajax-Anruf erforderlich ist, dann sag mir Kommentare.

Answer 3

Sorry für mein schlechtes Englisch im Voraus!

Mit diesem Formular müssen Sie nicht Ajax verwenden. Stellen Sie sicher, dass eine verborgene Eingabe für PName vorhanden ist oder dass das Modell, das Sie an den Controller senden, nicht gültig ist. Ich bin mir ziemlich sicher, dass Sie eine ID benötigen, um Daten in Ihrer Datenbank hinzuzufügen, fügen Sie sie also in Ihr Modell ein und stellen Sie sicher, dass Ihre Variable eine gültige ID (eine Zahl) hat.

Versuchen Sie dies, damit Ihr Controller eine Datei hochlädt. Stellen Sie sicher, dass Sie die Rückleitung für das ändern, was Sie brauchen! :

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Create([Bind(Exclude = "PFile,PName")] Prod pro) 
{      
    if (ModelState.IsValid) 
    {  
     try 
     { 
      if (Request.Files[0] != null && Request.Files[0].ContentLength > 0) 
      { 
       byte[] tmp = null; 
       using (var bin = new BinaryReader(Request.Files[0].InputStream)) 
       { 
        tmp = bin.ReadBytes(Request.Files[0].ContentLength); 
       } 
       pro.PName = Request.Files[0].ContentType; 
       pro.PFile = tmp; 
      } 
     } 
     catch { 
      throw new Exception("There is no file to upload."); 
      // TODO Change the exception to this if your want your PFile and PName to be null if there's no file. 
      // pro.PName = ""; 
      // pro.PFile = null; 
     } 
     db.Prods.Add(pro); 
     db.SaveChanges(); 
     return RedirectToAction("Index", "Whatever"); 
    } 
    return PartialView("Create", pro); 
}