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");
              }

          });

Ajax调用不调用控制器操作方法来插入数据

1 个答案: