Answered by:
modal ajax post file returns null in file upload

Question
-
User456628452 posted
i am trying to upload file in ajax modal pop up, when i submit data and file to controller, file give null value.
this is what i have done so far
index page
<a class="btn btn-primary add-tooltip" href="#" onclick="addNewSubject(@student.Id);">Add New</a>
Modal pop up
<script> function addNewSubject(Id) { var urlPath = '@(Url.Action("AddNewSubject", "Student"))'; $.ajax({ type: "GET", url: urlPath, data: { "Id": Id}, success: function (data) { $('#modal-container').html(data); $('#modal-container').modal('show'); }, error: function () { alert("Error loading the page."); } }); }; </script>
Modal View
@using (Ajax.BeginForm("AddNewSubject", "Student", new AjaxOptions { UpdateTargetId = "result-ajax", LoadingElementId = "preloader", OnSuccess = "success", OnFailure = "failure", HttpMethod = "POST" }, new { enctype = "multipart/form-data" })) { <div id = "result-ajax" > @Html.AntiForgeryToken() <div class="modal-body"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.Hidden("StudentId", (int) ViewBag.StudentId) <div class="form-group"> @Html.LabelFor(model => model.Number, "Subject No", htmlAttributes: new { @class = "control-label" }) @Html.TextBoxFor(m => Model.Number, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Number, "", new { @class = "text-danger" }) </div> <div class="form-group"> @Html.LabelFor(model => model.Name, "Subject Name", htmlAttributes: new { @class = "control-label" }) @Html.EditorFor(m => Model.Name) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> <label for="file">Upload Image:</label> <input type = "file" name="file" id="file" /><br><br> @*<input type="submit" value="Upload Image" />*@ </div> </div> <div class="modal-footer"> <input type = "submit" id="BtnSave" class="btn btn-primary" value="submit" /> </div> } <script> function success(ajaxContext) { $('#modal-container').modal('hide'); location.reload(); } function failure(ajaxContext) { var response = ajaxContext.responseText; $.notify({ icon: 'fa fa-thumbs-o-down', title: "<strong>An error occured: <strong>", message: "Server returned an error" }, { type: "danger", //showProgressbar: true, placement: { from: "top", align: "right" } }); } </script>
Controller
[HttpPost] [ValidateAntiForgeryToken] public ActionResult AddNewSubject(AddSubjectViewModel model, HttpPostedFileBase file) {
Wednesday, January 22, 2020 11:14 AM
Answers
-
User-17257777 posted
Hi marya,
Are you using modal as a partial view? I have a test based on your code and I can get the file
Index View:
<a class="btn btn-primary add-tooltip" href="#" onclick="addNewSubject(1);">Add New</a> <div id="modal-container" class="modal fade" role="dialog"> </div> @section scripts{ <script> function addNewSubject(Id) { var urlPath = '@(Url.Action("AddNewSubject", "Student"))'; $.ajax({ type: "GET", url: urlPath, data: { "Id": Id}, success: function (data) { $('#modal-container').html(data); $('#modal-container').modal('show'); }, error: function () { alert("Error loading the page."); } }); }; </script> }
Partial View:
<div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> @using (Ajax.BeginForm("AddNewSubject", "Student", new AjaxOptions { UpdateTargetId = "result-ajax", LoadingElementId = "preloader", OnSuccess = "success", OnFailure = "failure", HttpMethod = "POST" }, new { enctype = "multipart/form-data" })) { <div id="result-ajax"> @Html.AntiForgeryToken() <div class="modal-body"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.Hidden("StudentId", (int)ViewBag.StudentId) <div class="form-group"> @Html.LabelFor(model => model.Number, "Subject No", htmlAttributes: new { @class = "control-label" }) @Html.TextBoxFor(m => Model.Number, new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Number, "", new { @class = "text-danger" }) </div> <div class="form-group"> @Html.LabelFor(model => model.Name, "Subject Name", htmlAttributes: new { @class = "control-label" }) @Html.EditorFor(m => Model.Name) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> <label for="file">Upload Image:</label> <input type="file" name="file" id="file" /><br><br> @*<input type="submit" value="Upload Image" />*@ </div> </div> <div class="modal-footer"> <input type="submit" id="BtnSave" class="btn btn-primary" value="submit" /> </div> } </div> </div>
Controller:
[HttpPost] [ValidateAntiForgeryToken] public ActionResult AddNewSubject(AddSubjectViewModel model, HttpPostedFileBase file) { return Content(""); } [HttpGet] public ActionResult AddNewSubject(int Id) { ViewBag.StudentId = Id; return PartialView("AddNewSubject"); }
Result:
If this is not your case, please provide us more related codes.
Best Regards,
Jiadong Meng
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Thursday, January 23, 2020 3:38 AM