c# MVC3 ajax.beginform to upload file not working

Question

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

View

    @using (Ajax.BeginForm(\"CreateRo         


        

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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