ASP.Net MVC Ajax.BeginForm文件上传响应问题

Question

So I have a modal which allows a user to upload a file, I am wanting to get a json response back to say whether the upload was successful or not and display that to the end user.

Currently my View is this

@model int

<div id="modal_newSupportPlan" class="modal fade" style="display:none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            <button type="button" class="close" data-dismiss="modal">x</button>
            <h6 class="modal-title">New Support Plan</h6>
        </div>
        @using (Ajax.BeginForm("CreateSupportPlan", "Client",
            new AjaxOptions() { OnSuccess = "getSupportPlanResult", HttpMethod = "post" },
            new { @Class = "form-horizontal", enctype = "multipart/form-data" }))
        {
            <div class="modal-body">
                <input name="ClientFK" value="@Model" style="display:none" />
                <div class="form-group" id="newsupportplan_error_plantype">
                    <label class="control-label col-sm-3">Type of Plan</label>
                    <div class="col-sm-9">
                        <select id="planType" name="PlanType" class="form-control">
                            <option></option>
                            <option value="1">Initial Plan</option>
                            <option value="2">Pre Employment Plan</option>
                            <option value="3">6 Month Plan</option>
                            <option value="4">12 Month Plan</option>
                            <option value="5">Ongoing Support Plan</option>
                        </select>
                    </div>
                </div>
                <div class="form-group" id="newsupportplan_error_StartDate">
                    <label class="control-label col-sm-3">Date</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control pickadate-accessibility" name="Date" />
                    </div>
                </div>
                <div class="form-group" id="newsuportplan_error_SLILevel">
                    <label class="control-label col-sm-3">Support Level</label>
                    <div class="col-sm-9">
                        <select id="SliLevel" name="SliLevel" class="form-control">
                            <option></option>
                            <option value="1">SLI 1</option>
                            <option value="2">SLI 2</option>
                            <option value="3">SLI 3</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-3">Upload File</label>
                    <div class="col-sm-9">
                        <input type="file" name="Blob" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        }
    </div>
</div>

And my Controller method is this

[HttpPost]
    public ActionResult CreateSupportPlan(ModelHelper.SupportPlanViewModel supportPlanDetails)
    {
        try
        {
            esp_storage_supportPlans espStorageSupportPlans = new esp_storage_supportPlans();
            bool validation = true;
            var errorList = new List<string>();
            var passList = new List<string>();

            if (string.IsNullOrEmpty(supportPlanDetails.PlanType.ToString()))
            {
                errorList.Add("SupportPlanType");
                validation = false;
            }
            else
            {
                passList.Add("SupportPlanType");
            }

            if (string.IsNullOrEmpty(supportPlanDetails.Date.ToString()))
            {
                errorList.Add("Date");
                validation = false;
            }
            else
            {
                passList.Add("Date");
            }

            if (string.IsNullOrEmpty(supportPlanDetails.SliLevel))
            {
                errorList.Add("SLILevel");
                validation = false;
            }
            else
            {
                passList.Add("SLILevel");
            }

            if (supportPlanDetails.Blob != null && supportPlanDetails.Blob.ContentLength > 0)
            {
                if (validation)
                {
                    var uploadedFile = new byte[supportPlanDetails.Blob.InputStream.Length];
                    supportPlanDetails.Blob.InputStream.Read(uploadedFile, 0, uploadedFile.Length);
                    espStorageSupportPlans.Blob = uploadedFile;
                    espStorageSupportPlans.ClientFK = supportPlanDetails.ClientFK;
                    espStorageSupportPlans.Date = Convert.ToDateTime(supportPlanDetails.Date);
                    espStorageSupportPlans.SliLevel = supportPlanDetails.SliLevel;

                    if (supportPlanDetails.PlanType == 1) espStorageSupportPlans.PlanType = "Initial Plan";
                    if (supportPlanDetails.PlanType == 2) espStorageSupportPlans.PlanType = "Pre Employment Plan";
                    if (supportPlanDetails.PlanType == 3) espStorageSupportPlans.PlanType = "6 Month Plan";
                    if (supportPlanDetails.PlanType == 4) espStorageSupportPlans.PlanType = "12 Month Plan";
                    if (supportPlanDetails.PlanType == 5) espStorageSupportPlans.PlanType = "Ongoing Support Plan";

                    string extension = Path.GetExtension(supportPlanDetails.Blob.FileName);
                    espStorageSupportPlans.Extn = extension;
                    espStorageSupportPlans.FileName = supportPlanDetails.Blob.FileName;

                    db.esp_storage_supportPlans.Add(espStorageSupportPlans);
                    db.SaveChanges();
                }
            }
            else
            {
                errorList.Add("Blob");
                validation = false;
            }

            if (!validation)
            {
                return Json(new { result = "Validation", errors = errorList, pass = passList }, JsonRequestBehavior.AllowGet);
            }

            return Json(new { result = "success" }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception)
        {
            return Json(new { result = "failed" }, JsonRequestBehavior.AllowGet);
        }
    }

My javascript is the following 2 parts first part has made the form work by uploading the file

window.addEventListener("submit", function (e) {
    var form = e.target;
    if (form.getAttribute("enctype") === "multipart/form-data") {
        if (form.dataset.ajax) {
            e.preventDefault();
            e.stopImmediatePropagation();
            var xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (form.dataset.ajaxUpdate) {
                        var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                        if (updateTarget) {
                            updateTarget.innerHTML = xhr.responseText;
                        }
                    }
                }
            };
            xhr.send(new FormData(form));
        }
    }
}, true);

My second part is the onsuccess function but this is not being triggered. And stopped triggering when I implemented the first part to get the form uploading

function getSupportPlanResult(data) {
    console.log("here");
    if (data.result === "success") {
        opts.title = "Completed";
        type: "success";
        opts.text = "Support Plan created successfully.";
        opts.type = "success";
        new PNotify(opts);
        supportPlanTable.destroy();
        BuildDataTable_SupportPlan();
        $('#modal_newSupportPlan').modal('hide');
    } else {
        if (data.result === "validation") {
            console.log(data);
        } else {
            opts.title = "Somthing Went Wrong";
            opts.text = "Support Plan failed to create, please try again.";
            opts.addclass = "stack-custom-bottom bg-danger";
            opts.type = "error";
            new PNotify(opts);
        }
    }
}

Answer 1

Why don't you use any library to do the dirty work of handling XHR for you? Like axios? The code could look then something like this:

window.addEventListener("submit", e => {
    const form = e.target;
    if (form.getAttribute("id") === '<my_unique_id_of_this_element>') {
        axios({
           method: form.method,
           url: form.action,
           data: /* whatever payload you need to send */
        })
        .then(({data}) => getSupportPlanResult(data));               
    }
});