我如何使用jQuery在asp.net MVC中添加/发送多个记录？

Question

I want to send multiple records in the database using javascript in asp.net mvc i tried many different ways but all in vain. here I have the best code which can send the data to the controller but the file is not sending.

I search different ways i have found one is with FormData but i am unable to handle that in this context.

Controller:

public ActionResult SaveAllFeedback(FEEDBACKVM[] fEEDBACKs)
        {
            try
            {
                if (fEEDBACKs != null)
                {
                    FEEDBACK fEEDBACK = new FEEDBACK();
                    foreach (var item in fEEDBACKs)
                    {
                        fEEDBACK.DATE = item.DATE;
                        fEEDBACK.COMMENT = item.COMMENT;
                        fEEDBACK.STUDENTID = item.STUDENTID;
                        fEEDBACK.TEACHERID = db.TEACHERs.Where(x => x.EMAIL == User.Identity.Name).FirstOrDefault().ID;
                        if (item.HOMEWORK != null)
                        {
                            fEEDBACK.HOMEWORK = SaveToPhysicalLocation(item.HOMEWORK);
                        }
                        db.FEEDBACKs.Add(fEEDBACK);
                    }
                    db.SaveChanges();
                    return Json("Done", JsonRequestBehavior.AllowGet);
                }
                return Json("Unable to save your feedback! Please Provice correct information", JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                return Json("Unable to save your feedback! Please try again later.", JsonRequestBehavior.AllowGet);
            }
        }


ViewPage:

<form>
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        <div class="form-group">
            <input name="DATE" id="DATE" type="date" class="form-control" />
        </div>

        <table class="table table-responsive table-hover" id="table1">
            <thead>
                <tr class="bg-cyan">
                    <th></th>
                    <th>RollNumber</th>
                    <th>Comment</th>
                    <th>Homework</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in ViewBag.students)
                {
                    <tr>
                        <td>
                            <input name="STUDENTID" type="text" value="@item.Key" hidden="hidden" />
                        </td>
                        <td>
                            <input name="STUDENTROLLNUMBER" type="text" value="@item.Value" class="form-control" readonly="readonly" />
                        </td>
                        <td>
                            <input name="COMMENT" type="text" class="form-control" />
                        </td>
                        <td>
                            <input name="HOMEWORK" type="file" class="form-control" />
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <div class="form-group">
            <div class="col-md-10">
                @Html.ValidationMessage("ErrorInfo", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button id="saveButton" type="submit" class="btn btn-danger">Save Attendance</button>
            </div>
        </div>
    </form>



Script:

<script>

           //After Click Save Button Pass All Data View To Controller For Save Database
            function saveButton(data) {
                return $.ajax({
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    type: 'POST',
                    url: '@Url.Action("SaveAllFeedback", "Teacherss")',
                    data: data,
                    success: function (result) {
                        alert(result);
                        location.reload();
                    },
                    error: function () {
                        alert("Error!")
                    }
                });
            }
            //Collect Multiple Order List For Pass To Controller
            $("#saveButton").click(function (e) {
                e.preventDefault();


                var formData = new FormData();

                var arr = [];
                arr.length = 0;

                $.each($("#table1 tbody tr"), function () {
                   //arr.push({
                   //     //DATE: $("#DATE").val(),
                   //     //STUDENTID: $(this).find('td:eq(0) input').val(),
                   //     //COMMENT: $(this).find('td:eq(2) input').val(),
                   //     //HOMEWORK: $(this).find('td:eq(3) input').val()
                   // });

                    formData.append("DATE", $("#DATE").val());
                    formData.append("STUDENTID", $(this).find('td:eq(0) input').val());
                    formData.append("COMMENT", $(this).find('td:eq(2) input').val());
                    formData.append("HOMEWORK", $(this).find('td:eq(3) input')[0].files[0]);


                });

                var data = JSON.stringify({
                    fEEDBACKs: formData
                });

                $.when(saveButton (data)).then(function (response) {
                    console.log(response);
                }).fail(function (err) {
                    console.log(err);
                });
            });

        </script>

I just want to send multiple records with the file to the database

Answer 1

are you sure you want send the files???? if yes then

Your form tag should be look like this

<form id="yourid" action="youraction" enctype="multipart/form-data">
  Form Component
</form>

NOTE:- enctype="multipart/form-data" tag is important

and then controller should be look like this

    public ActionResult YourController(FormCollection data)
    {
        if (Request.Files.Count > 0)
        {
            foreach (string fileName in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[fileName];
                //you can save the file like this
                string path = Server.MapPath("~/Yourpath/FileName" + fileName.Substring(fileName.LastIndexOf('.')));
                file.SaveAs(path);
                //or you can load it to memory like this
                MemoryStream ms = new MemoryStream();
                file.InputStream.CopyTo(ms);
                //use it how you like
            }
        }            
        return View();
    }