ASP.NET MVC4 Ajax ActionLink帮助程序不起作用 - 使用返回的部分视图重新加载整个页面
[英]ASP.NET MVC4 Ajax ActionLink helper doesn't work - reloads entire page with the returned partial view
问题描述
I have a pretty simple index page for an MVC project which allows you to create "jobs" and edit existing jobs. 
我有一个非常简单的MVC项目索引页面，它允许您创建“作业”并编辑现有作业。 I'm trying to use an Ajax link to replace the contents of a div with the job-edit form, which the Create() and Edit() actions return as a partial view. 我正在尝试使用Ajax链接用作业编辑表单替换div的内容，Create（）和Edit（）操作作为局部视图返回。 Instead, when you click on the Ajax links, the entire page content is replaced with the partial view, instead of just the contents of the appropriate div element. 相反，当您单击Ajax链接时，整个页面内容将替换为部分视图，而不仅仅是相应div元素的内容。 Here's the relevant .cshtml code: 这是相关的.cshtml代码：
@{
string placeholder = "777777";
}
<body>
<ol id="JobListing">
@Html.Partial("_ExportJobListingPartial", Model)
</ol>
<br /><br /><br />
@Ajax.ActionLink("New", "Create", new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })
<br /><br />
<div id="EditJobLinkContainer">
@Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)
</div>
<br /><br />
<div id="EditJobContainer">
EMPTY BOX HERE
</div>
<br />
</body>
</html>
<script>
$(function() {
$("#JobListing").selectable({
selected: function (event, ui) {
// Select only one at a time
$(ui.selected).addClass("ui-selected").siblings().removeClass("ui-selected");
$("#EditJobLinkContainer").html('@Ajax.ActionLink("Edit", "Edit",
new { id = placeholder }, // Route values
new AjaxOptions { UpdateTargetId = "EditJobContainer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }, // Ajax options
new { id = "EditJobLink" } // Html attributes
)');
$("#EditJobLink").click(UpdateOnClick);
}
});
$("#EditJobLink").click(UpdateOnClick);
function UpdateOnClick() {
//Get the id of the selected item
var id = $(".ui-selected").first().attr("name");
this.href = this.href.replace("@placeholder", id);
}
});
</script>
Most of the answers I've read online to similar questions suggest that maybe I'm not including the unobtrusive-ajax code correctly or in the right place. 我在网上看到的类似问题的大多数答案表明，我可能没有正确地或正确地包括不显眼的ajax代码。 I have it in the _Layout view, before the RenderBody() call, as 我在_Layout视图中，在RenderBody（）调用之前得到它
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
I know this code is loading in because I inserted an alert() call into the unobtrusive-ajax.js file which launches on page load, and the links to the code in Chrome work fine. 我知道这个代码正在加载，因为我在一个unobtrusive-ajax.js文件中插入了一个alert（）调用，该文件在页面加载时启动，并且Chrome中代码的链接工作正常。 However, I had to manually replace the calls to live() with on() in the ajax scripts since live() is deprecated in the most recent version of jQuery, even though I'm pretty sure they're the latest scripts with MVC4. 但是，由于在jQuery的最新版本中不推荐使用live（），我不得不在ajax脚本中手动替换live（）和on（）的调用，尽管我很确定它们是MVC4的最新脚本。 At one point the Ajax call was actually working for the "New" link, but I've made changes since, and nothing has been working for a few days now. 有一次，Ajax调用实际上是在为“新”链接工作，但是我已经做了更改，现在几天都没有工作。 Any help would be greatly appreciated. 任何帮助将不胜感激。
2 个解决方案
解决方案1
0 2013-03-25 13:39:00
I use empty dedicated div for that 我使用空的专用div
the html is html是
<div id="targetDiv">
and the script is 而剧本是
$(".get-roles").live("click", function (e) {
$("#targetDiv").empty();
$.ajax({
url: "edit",
type: 'GET'
xhrFields: {
withCredentials: true
},
success: function (data) {
if (data) {
$("#targetDiv").append(data);
}
else {
$("#targetDiv").text("Error");
}
}
});
});
解决方案2
0 2014-02-05 09:52:42
您需要在页面中包含此内容
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.