MVC5 局部视图重定向而不是更新 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>

在我的控制器中我有：

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

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

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

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

您在 ajax 选项中指定了 get，然后将您的操作方法修饰为 post。

要么将 get 更改为 post，要么删除 post，看看是否有帮助。

Answer 2

看来你这里有几个问题。

加载脚本

首先确保加载正确的脚本以使用 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 方法

您的操作指定了 POST，而您的 AJAX 请求正在尝试 GET。由于您正在尝试上传文件，因此您要为两者指定 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?

MVC5 局部视图重定向而不是更新 DIV

MVC5 Partial View redirects instead of updating DIV

asp.net

jquery

asp.net-ajax

asp.net-mvc-5

加载脚本

匹配 HTTP 方法

AJAX 文件上传