c# MVC3 ajax.beginform to upload file not working

问题:

After clicking the submit button. I am getting null in entity. Do anyone have a solution?

View

    @using (Ajax.BeginForm("CreateRoom", "Room", new AjaxOptions { HttpMethod = "POST", OnComplete = "window.location.href='Index'" }, new { enctype = "multipart/form-data", id = "ajaxUploadForm" }))
    {
        <input type="file" name="Room" />
        <input type="submit" value="OK" />
    }

controller

    [HttpPost]
    public ActionResult CreateRoom(RoomFileView entity)
    {
        //code
    }

model

     public class RoomFileView
    {
        public RoomFileView();

        public int BuildingId { get; set; }
        public int CityId { get; set; }
        public int CountryId { get; set; }
        public int FloorId { get; set; }
        public int LocationId { get; set; }
        public HttpPostedFileWrapper Room { get; set; }

        public string Content();
    }

回答1:

I have written a little hack. It works fine in most of browsers, but FormData object doesn't supported in IE. You could add this code to you custom js file or html page.

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

回答2:

You cannot upload files using AJAX. Use the notmal Html.BeginForm. Please Check out this link click here as this will be helpful for you.

If you want to use asynchronous uploads you may try some of the available upload components such as Ajax Upload and Uploadify.

回答3:

You cannot upload files using AJAX.Beginform.
There are many third party js controls available.
But i don't find them much useful.
Either you have to use <iframe> or use Html.Beginform

回答4:

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

回答5:

Unfortunately you can't use Ajax.BeginForm() to upload a file. I got around this by running an onclick() event on the submit event. I found this SO answer very useful: Ajax.BeginForm is not working as expected