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

Answer 2

您已指定get in ajax选项，然后将您的action方法修饰为post。

更改获取帖子，或删除帖子，看看是否有帮助。

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

2 个答案:

加载脚本

匹配HTTP方法

AJAX文件上传