我在 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>
请问可能出了什么问题?
最佳答案
您似乎遇到了几个问题。
加载脚本
首先确保您加载正确的脚本以使用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 - MVC5 部分 View 重定向而不是更新 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28222467/