MVC5 Partial View redirects instead of updating DIV

Question

I found this problem more than once on SO, but I found no solution that works for me.

I have a view:

<div id="profpics">
    @Html.Partial("_ProfileImagesPartial", Model.ProfileImages)

    @using (Ajax.BeginForm("UploadImage", "ProfileImages", new AjaxOptions { UpdateTargetId = "profpics", HttpMethod = "GET" }))
    {
        @Html.AntiForgeryToken()
        <input type="file" name="file" id="imgInp" />
        <img id="blah" src="#" alt="your image" />
        <input type="submit" value="OK" />
    }
</div>

In my controller I have:

[HttpPost]        
public PartialViewResult UploadImage(HttpPostedFileBase file)
{
    List<ProfileImage> images = new List<ProfileImage>();            
    images = db.Images.ToList();
    return PartialView("_ProfileImagesPartial",images);
}

My controller does receive the call, It does the required actions, calls the partial view and tries to fill it. But then, instead of returning to my view and update the div, it redirects to the controller and action I used in my request (/UploadImage) and shows me the partial view there instead of returning to my view and updating the div. The controller action I call isn't the same as the controller where my partial view lives in, but that too, I think should be no problem?

I found a lot of answers saying there are absent scripts, but i use:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

in my _Layout.cshtml and updated the jqueryval to contain unobtrusive validation:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

I also tried to add them manually:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

But that too didn't help.

Does anyone know what It could be?

Edit: I found out my ajax form isn't really working. I does a POST while I state GET in the ajax form. When I put them both to POST OR GET I do get the right request, but the fact is, my request is no Ajax request. So I guess I Always get redirected because the UpdateTargetID is not being used.

These are the script included on my page:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

what could be wrong please?

Answer 1

Looks like you have several issues here.

Load the scripts

First make sure you are loading the correct scripts to use the AjaxHelper.

MVC5, AjaxHelper, and the Correct Scripts & Load Order

<script src="~/jquery-1.11.0.js"></script>
<script src="~/jquery.unobtrusive-ajax.js"></script>

Check your debug console to see that you are not getting any script errors or script loading returning 404 NOT FOUND.

Match HTTP Method

Your action specifies POST while your AJAX request is attempting GET. Since you are trying to upload a file you want to specify POST for both.

[HttpPost]        
public PartialViewResult UploadImage(HttpPostedFileBase file)

and

new AjaxOptions { HttpMethod = "POST", ... }

For completeness you should have

[HttpPost]        
public PartialViewResult UploadImage(HttpPostedFileBase file)
{
    return PartialView("_ProfileImagesPartial");
}

<div id="profpics">
@using (Ajax.BeginForm(actionName: "UploadImage", controllerName: "ProfileImages",
    routeValues: new {},
    ajaxOptions: new AjaxOptions { UpdateTargetId = "profpics", HttpMethod = "POST" },
    htmlAttributes: new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <input type="file" name="file" id="imgInp" />
    <input type="submit" value="OK" />
}
</div>

I've taken out some things because we want to make sure the basic Ajax.BeginForm() example works without the extra moving parts. If this works then go ahead and restore the extra parts. If your form is redirecting at this point then you probably have a error of some kind -- Usually, it is because of a script error.

AJAX File Upload

You're trying to upload a file via AJAX and there are some issues you need to be aware of. Instead of repeating the very good answers here's a good place to start:

jQuery Ajax File Upload

What does enctype='multipart/form-data' mean?

Answer 2

You have specified get in the ajax options, and then decorated your action method as post.

Either change the get to post, or remove the post and see if that helps.