0

I've tried Ajax.BeginForm, but does it not work.

With Ajax.BeginForm, the file arrives in null.

Now I'm trying to solve the problem with Html.BeginForm, the image also comes null.

What am I doing wrong?

_Upload.cshtml:

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Upload</h4>
</div>
@using (Html.BeginForm("Upload", "Account", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal", role = "form" }))
{

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

        <div class="form-group">

            <div class="col-xs-6">
                @Html.LabelFor(model => model.Image)
                @Html.TextBoxFor(model => model.Image, new { @class = "form-control", @type = "file" })
            </div>
        </div>      


        <center><div id="result"></div></center>
        <div class="modal-footer">
            <input type="submit" id="submit_button" class="btn btn-success" value="Update" />
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

        <script>

    $(function () {

        $("#submit_button").click(function (e) {
            e.preventDefault();

            var _form = $(this).closest("form");
            var _formData = _form.serialize();


            $.post(_form.attr("action"), _formData, function (res) {

                if (!res.IsSuccess) {
                    var errors = "";
                    $.each(res.Errors, function (i, item) {
                        errors = errors + "<li>" + item + "</li>";
                    });
                    $("#result").html('<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.</div>');
                }
                else {
                    //No errors. May be redirect ?
                }
            });

        });

    });

</script>

Controller:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Upload(My_Models model)
        {
            return Json(new { IsSuccess = false });
        }

Removing JavaScript above the image arrive OK through model. Inseting the JavaScript above the image does not arrived. What is going on ?

The JavaScript above is only to show the message regarding to get image.

Matheus Miranda
  • 1,755
  • 2
  • 21
  • 36
  • serialize alone will not send your file. Take a look at this http://stackoverflow.com/questions/38703182/cannot-bind-form-data-and-uploaded-file-in-controller/38703844#38703844 – Shyju Sep 12 '16 at 16:25
  • You need to use `FormData` to upload files using ajax. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) (and you not using `BeginForm()` - your using `$.post()` to submit the form!) –  Sep 12 '16 at 22:24
  • Does not work, error javascript: ncaught TypeError: Illegal invocation – Matheus Miranda Sep 12 '16 at 22:43

0 Answers0