Visual Studio 2017 Mvc 5 Create Modal Dialog to Upload Images

• Remove From My Forums

Trouble when i upload image with Jquery ajax Bootstrap Modal

• Question

• User1300485619 posted

  Hi all

  i have a Trouble when i endeavor to upload any epitome .. information technology is upload already but the controller transport me to a bare folio with the json result as a text

  the view

  <div>     <a href="#" class="btn btn-main" onclick="AddNewHuman(0)">Create New</a>     <br /><br />     <table class="table table-responsive">         <thead>             <tr style="groundwork-color:#333;color:white;">                 <th>Human Proper noun</th>                 <th>Human Prototype</th>                 <th>Man Phone</th>                 <th></th>                 <th></th>                              </tr>         </thead>         <tbody id="SetHumanList">             <tr id="LoadingStatus"></tr>         </tbody>     </tabular array> </div> @using (Html.BeginForm("SaveData", "Human", FormMethod.Mail service, new { id = "form" , enctype = "multipart/form-data" })) {   <div class="modal fade" id="MyModal" >     <div course="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <a href="#" class="close" data-dismiss="modal">&times;</a>                 <h4 id="ModalTitle"></h4>             </div>                          <div grade="modal-trunk">                 <form id="grade">                                      <fieldset id="SubmitForm">                         @Html.HiddenFor(a=>a.HumanId, new { @id = "HumId" })                         <div class="course-group">                             @Html.TextBoxFor(a => a.HumanName, new { @id = "HumName",@course = "form-control",@placeholder="Name" })                         </div>                         <div grade="grade-grouping">                             @*@Html.TextBoxFor(a => a.HumanPic, new { @id = "HumPic", @class = "form-control", @placeholder = "Pic" })*@                             <input type="file" name="Upload" grade="form-control w" />                         </div>                         <div course="form-grouping">                             @Html.TextBoxFor(a => a.HumanPhone, new { @id = "HumPhone", @grade = "grade-control", @placeholder = "Phone" })                         </div>                         <div class="form-group">                             @*<a href="#" class="btn btn-primary"  id="SaveRecord">Relieve</a>*@                             @*<input id="SaveRecord" type="submit" value="Create" grade="btn btn-info" />*@                             <button id="SaveRecord" type="submit" class="btn btn-warning">Create</button>                         </div>                     </fieldset>                 </form>             </div>                      </div>     </div> </div> }
  ================================== the SaveRecord JS ==============================
                    
  $("#SaveRecord").click(function () {
              var data = $("#SubmitForm").serialize();
              $.ajax({
                  type: "POST",
                  url: "/Human/SaveData",
                  data: data,
                  success: part (result) {
                      warning("Success");
                      window.location.href = "/Human/alphabetize";
                      $("#MyModal").modal("hide");
                  }
              })
          })
                  

  and my Controller
  

                    public JsonResult SaveData(Human model, HttpPostedFileBase Upload)         {             var effect = simulated;             try             {                 if (model.HumanId > 0)                 {                     Human hum = db.Human.SingleOrDefault(x=>x.HumanId==model.HumanId);                     hum.HumanName = model.HumanName;                     hum.HumanPic = model.HumanPic;                     hum.HumanPhone = model.HumanPhone;                     db.SaveChanges();                     effect = truthful;                 }                 else                 {                     Human hum = new Human();                     string path = Path.Combine(Server.MapPath("~/images"), Upload.FileName);                     Upload.SaveAs(path);                     //hum.HumanPic = Upload.FileName;                     hum.HumanName = model.HumanName;                     hum.HumanPic = Upload.FileName;                     hum.HumanPhone = model.HumanPhone;                     db.Human being.Add(hum);                     db.SaveChanges();                     upshot = truthful;                 }             }             grab (Exception ex)             {                                  throw ex;             }             render Json(consequence, JsonRequestBehavior.AllowGet);         }

  the browser give me this after click Save Push button >> http://localhost:46420/Human being/SaveData

  {"event":truthful}

  
  i desire it to become me back to the Human being/Index controller instead of Human/SaveData
  

  i need a assist please

Answers

• User-1508012637 posted

  Hi Mohaworld,

  If nosotros desire to upload a file through AJAX, nosotros need to use the FormData object. According to your decription, I've create a demo and the screenshot as beneath:

  
  Please refer to the post-obit lawmaking with detailed comments:

  View

  @model ImageFileUpload.Models.Human being  @{     ViewBag.Title = "SaveData"; }  <h2>SaveData</h2>  <div>     <a href="#" form="btn btn-master" onclick="AddNewHuman()">Create New</a>     <br /><br />     <table class="tabular array table-responsive">         <thead>             <tr style="background-color:#333;color:white;">                 <thursday>Human Proper name</thursday>                 <th>Human Image</thursday>                 <th>Human being Phone</th>                 <th></th>                 <th></th>             </tr>         </thead>         <tbody id="SetHumanList">             <tr id="LoadingStatus"></tr>         </tbody>     </tabular array> </div>  @using (Html.BeginForm("SaveData", "Human being", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" })) {     <div class="modal fade" id="MyModal">         <div class="modal-dialog">             <div class="modal-content">                 <div class="modal-header">                     <a href="#" grade="close" data-dismiss="modal">&times;</a>                     <h4 id="ModalTitle"></h4>                 </div>                  <div class="modal-torso">                     <fieldset id="SubmitForm">                         @Html.HiddenFor(a => a.HumanId, new { @id = "HumId" })                         <div class="grade-group">                             @Html.TextBoxFor(a => a.HumanName, new { @id = "HumName", @class = "form-control", @placeholder = "Proper name" })                         </div>                         <div class="grade-group">                             <input blazon="file" id="UploadFile" name="Upload" course="form-control west" />                         </div>                         <div class="form-group">                             @Html.TextBoxFor(a => a.HumanPhone, new { @id = "HumPhone", @course = "class-control", @placeholder = "Phone" })                         </div>                         <div class="class-group">                             <button id="SaveRecord"                      type="push"                      class="btn btn-warning">Create</button>                         </div>                     </fieldset>                 </div>             </div>         </div>     </div> }  <div>     @Html.ActionLink("Back to List", "Index") </div>  @section Scripts {     <script src="~/Scripts/jquery.form.min.js"></script>      @Scripts.Render("~/bundles/jqueryval")      <script>         part AddNewHuman() {             $("#MyModal").modal("show")         }                      $("#SaveRecord").click(function () {             var formData = new FormData();              formData.suspend("Upload", $('#UploadFile')[0].files[0]); //suspend the paradigm file              var other_data = $('grade').serializeArray();             $.each(other_data, part (primal, input) { //append other input value                 formData.append(input.name, input.value);             });              $.ajax({                 type: "POST",                 url: "/Homo/SaveData",                 data: formData,                 contentType: false, // Not to set up any content header                 processData: false, // Non to process data                 success: function (result) {                     alert("Success");                     window.location.href = "/Homo/index";                     //$("#MyModal").modal("hide"); //this line is unnecessary considering the user has been redirect                 }             })         });                      </script> }                    

  When i Follow your tips its give me catch ex

  Accually why you get the exception is because the serialize() method cannot serialize the upload file input. So the server will not get the image file and and then you'll get the "Object reference not fix to an instance of an object" exception. And remember to ready the push type to "button", otherwise the button would submit the form once more afterwards you ship the AJAX asking.

  If yous accept any other questions, please feel gratuitous to contact me whatever fourth dimension.

  Best Regards
  Velen

  • Marked every bit answer past Thursday, October 7, 2021 12:00 AM

russellonewalre.blogspot.com

Source: https://social.msdn.microsoft.com/Forums/en-US/68a13604-5bd1-4500-bec0-dd4c31807790

Share this post