データを挿入するためにコントローラのアクションメソッドを呼び出さないAjaxコール

Question

イメージをデータベースに挿入しようとしています。データはデータベースに保存されますが、すべて正常ですが、Ajaxを使用して同じことをしようとすると、Ajax呼び出しはコントローラのアクションメソッドを呼び出すことができません。ここに私のコードです。

これは、これは私のスクリプトで表示

<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> 

の私のフォームです。

<script> 
     $(document).ready(function() { 
      $("#saveclick").click(function (e) { 
       var FormCollection = { 
        StudentName: $("#name").val(), 
        StudentLastName: $("#last").val(), 
        StudentAddress: $("#address").val(), 
        Gender: $("#gender").val(), 
        StudentImage: $("#StudentImage").get(0).files, 
       }; 

       $.ajax({ 
        url:@Url.Action("Insert", "Student", null), 
        dataType: "json", 
        Type:"POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify({'FormCollection': FormCollection}), 
        success: function() { 
         alert("Data Saved Successfully"); 
        }, 
        error: function() { 
         alert("Please attach the Image"); 
        } 

       }); 
       return false; 
      }); 
    }); 
</script> 

「生徒」コントローラでは、この私のアクションメソッドです。

[HttpPost] 
    public ActionResult Insert(FormCollection fm) 
    { 

     Student s = new Student(); 
     s.StudentName = fm["StudentName"]; 
     s.StudentLastName = fm["StudentLastName"]; 
     s.StudentAddress = fm["StudentAddress"]; 
     s.Gender = fm["Gender"]; 
     HttpPostedFileBase file = Request.Files["StudentImage"]; 
     file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName); 
     s.StudentImage = file.FileName; 
     db.Students.Add(s); 
     db.SaveChanges(); 
     return RedirectToAction("Show"); 
    } 

Answer 1

jQueryのAJAXコードを少し変更してから試すことができますか？このため

 $.ajax({ 
       url:@Url.Action("Insert", "Student", null), 
       Type:"POST", 
       data: new FormData($('#InsertForm')[0]), 
       success: function() { 
        alert("Data Saved Successfully"); 
       }, 
       error: function() { 
        alert("Please attach the Image"); 
       } 

      });