Using Ajax.BeginForm helper in MVC 5 for uploading picture issue

Question

I use Ajax.BeginForm in view, for uploading userImage and userInformation:

@using (Ajax.BeginForm("EditProfile", "User", new AjaxOptions(){HttpMethod="POST"}, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.ID)
            <input type="hidden" name="Name" value="@Model.Name" />
            <div class="form-group focus">

                @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } } )
                    @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.UserImage, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-6">
                    <input type="file" name="userImage" value="" class="form-control" style="margin-right: 14px;" />
                    @Html.ValidationMessageFor(model => model.UserImage, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <center>
                        <input type="submit" value="GO" class="btn btn-default" />
                    </center>
                </div>
            </div>
        }

and in controller i have:

  public ActionResult EditProfile(Tbl_Users user, HttpPostedFileBase userImage)
    {
       //Do something
    }

when i trace the code in EditProfile, i see that userImage is null, but another arguman user is not null! what is the problem??

Note: i do same with Html.BeginForm with same controller, and it works properly, but by ajax i have problem.

this is my Tbl_User:

  public int ID { get; set; }
    public string UserName { get; set; }
    public string Password { get; set; }
    public string Email { get; set; }
    public string Name { get; set; }
    public string Access { get; set; }
    public string Description { get; set; }
    public int UniqueKey { get; set; }
    public bool IsConfirm { get; set; }
    public bool IsActive { get; set; }
    public string UserImage { get; set; }

can you post the entire class `Tbl_Users` ? Seems to me that class has a `UserImage` property that may be conflicting with the `HttpPostedFileBase` in the model binding process. — Jack B, Jun 18 '16 at 16:10
You cannot use `Ajax.BeginForm()` to upload images. You need to use `FormData`. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) for an example — , Jun 18 '16 at 23:30

Using Ajax.BeginForm helper in MVC 5 for uploading picture issue

0 Answers0