jquery - MVC5 部分 View 重定向而不是更新 DIV

Question

我在 SO 上不止一次发现这个问题，但没有找到适合我的解决方案。

我有一个观点:

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

在我的 Controller 中，我有:

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

我的 Controller 确实收到了调用，它执行所需的操作，调用部分 View 并尝试填充它。但随后，它不会返回到我的 View 并更新 div，而是重定向到我在请求 (/UploadImage) 中使用的 Controller 和操作，并向我显示那里的部分 View ，而不是返回到我的 View 并更新 div。我调用的 Controller 操作与我的部分 View 所在的 Controller 不同，但我认为这应该没有问题？

我发现很多答案都说缺少脚本，但我使用:

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

在我的 _Layout.cshtml 中并更新了 jqueryval 以包含不显眼的验证:

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

我还尝试手动添加它们:

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

但这也没有帮助。

有人知道这可能是什么吗？

编辑:我发现我的 ajax 表单实际上不起作用。我在 ajax 表单中声明 GET 时执行 POST。当我将它们都放入 POST 或 GET 时，我确实收到了正确的请求，但事实是，我的请求不是 Ajax 请求。所以我想我总是被重定向，因为 UpdateTargetID 没有被使用。

这些是我的页面上包含的脚本:

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

请问可能出了什么问题？

Answer 1

您似乎遇到了几个问题。

加载脚本

首先确保您加载正确的脚本以使用AjaxHelper。

MVC5, AjaxHelper, and the Correct Scripts & Load Order

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

检查您的调试控制台，看看您没有收到任何脚本错误或脚本加载返回 404 NOT FOUND。

匹配 HTTP 方法

当您的 AJAX 请求尝试 GET 时，您的操作指定 POST。由于您正在尝试上传文件，因此您希望为这两个文件指定 POST。

[HttpPost]        
public PartialViewResult UploadImage(HttpPostedFileBase file)

和

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

为了完整起见，您应该具有

[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>

我删除了一些内容，因为我们希望确保基本的 Ajax.BeginForm() 示例无需额外的移动部件即可正常工作。如果这有效，则继续恢复多余的部件。如果此时您的表单正在重定向，那么您可能会遇到某种错误——通常是由于脚本错误。

AJAX 文件上传

您正在尝试通过 AJAX 上传文件，并且需要注意一些问题。与其重复非常好的答案，不如从这里开始:

jQuery Ajax File Upload

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