Bild wird nicht mit Daten mit Ajax jquery in asp.net eingefügt MVC

Question

Ich versuche, Daten in die Datenbank mit Ajax mit Jquery einfügen. Meine Daten werden ohne Ajax perfekt eingefügt, aber wenn ich Ajax verwende, ist etwas mit dem Bild nicht in Ordnung. es erhält die Datei Null in der Steuerung in Post-Methode.

Dies ist mein Formular in der Ansicht.

<form id="InsertForm" name="InsertForm" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <label for="Name">Name</label> 
     <input type="text" class="form-control" name="StudentName" id="name" /> 
    </div> 
    <div class="form-group"> 
     <label for="LastName">Last Name</label> 
     <input type="text" class="form-control" name="StudentLastName" id="last" /> 
    </div> 
    <div class="form-group"> 
     <label for="Address">Address</label> 
     <input type="text" class="form-control" name="StudentAddress" id="address" /> 
    </div> 
    <div class="form-group"> 
     <label for="Gender">Gender</label> 
     <input type="text" class="form-control" name="Gender" id="gender" /> 
    </div> 
    <div class="form-group"> 
     <label for="Image">Image</label> 
     <input type="file" class="form-control" id="StudentImage" name="StudentImage" /> 
    </div> 

    <button id="saveclick" type="submit" name="save">Save</button> 
</form> 

Dies ist mein Skript in der Ansicht zum Einfügen von Daten mit Bild.

<script> 
    $(document).ready(function() { 
    $("#saveclick").click(function (e) { 
     var student = { 
     StudentName: $("#name").val(), 
     StudentLastName: $("#last").val(), 
     StudentAddress: $("#address").val(), 
     Gender: $("#gender").val(), 
     StudentImage: $("#StudentImage").val().split('\\').pop() 
     }; 

     //var formdata = new FormData($('InsertForm').get(0)); 
     //var Student= $("#InsertForm").serialize(); 

     var jsonData = JSON.stringify(student); 
     alert(jsonData); 

     $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Student", null)',// Insert Action Method in Student Controller. 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     enctype: 'multipart/form-data', 
     data: jsonData, 
     success: function (data) { 
      if (data.success) { 
      alert(data.message); 
      } 
     }, 
     error: function (xhr) { 
      alert('error'); 
     } 
     }); 
     return false; 
    }); 
    }); 
</script> 

Dies ist meine Controller-Aktion Methode in Student Controller.

[HttpPost] 
public JsonResult Insert(Student student) 
{ 

    if (ModelState.IsValid) 
    { 
     Student stu = new Student(); 
     stu.StudentName = student.StudentName; 
     stu.StudentLastName = student.StudentLastName; 
     stu.StudentAddress = student.StudentAddress; 
     stu.Gender = student.Gender; 
     HttpPostedFileBase file = Request.Files["StudentImage"]; 
     file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName); 
     stu.StudentImage = file.FileName; 
     db.Students.Add(stu); 
     db.SaveChanges(); 
     return Json(student); 
    } 
    else 
    { 
     ModelState.AddModelError("", "Inavlid Data Inserted"); 
    } 
    return Json(student); 
} 

Danke, wenn Sie mein Problem lösen.

Answer 1

try folgenden

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#saveclick").click(function (e) { 
    var data = new FormData(); 
    var files = fileUpload.files; 
    fileData.append("StudentImage", files[0]); 
    fileData.append("StudentName",$("#name").val()); 
    /* add all values as above one by one for LastName,Gender,Address*/ 

     $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Insert", "Student", null)',// Insert Action Method in Student Controller. 
     contentType: "application/json; charset=utf-8", 
     processdata: false, 
     data: data, 
     type:"POST" 
     success: function (data) { 
      if (data.success) { 
      alert(data.message); 
      } 
     }, 
     error: function (xhr) { 
      alert('error'); 
     } 
     }); 
     return false; 
    }); 
    }); 
</script> 

Answer 2

Hier ist die Lösung, die mein großes Problem zu lösen. Wir müssen die ForamData in einer beliebigen Variable anhängen.

<script> 
    $(document).ready(function() { 
     $("#saveclick").click(function (e) { 
      // Create FormData object 
      var fileData = new FormData(); 
      var fileUpload = $("#StudentImage").get(0); 
      var files = fileUpload.files; 

      // Looping over all files and add it to FormData object 
      //for (var i = 0; i < files.length; i++) { 
      // fileData.append(files[i].name, files[i]); 
      //} 
      fileData.append("StudentImage", files[0]); 
      fileData.append("StudentName", $("#name").val()); 
      fileData.append("StudentLastName", $("#last").val()); 
      fileData.append("StudentAddress", $("#address").val()); 
      fileData.append("Gender", $("#gender").val()); 


      $.ajax({ 
       type: "POST", 
       url: '@Url.Action("Insert", "Student", null)', 
       data: fileData, 
       processData: false, 
       contentType: false, 
       success: function (data) { 
        if (data.success) { 
         alert(data.message); 
        } 
       }, 
       error: function (xhr) { 
        alert('error'); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script>