Ajax.ActionLink 替换整个页面

Question

MVC4/VS2010/.Net4.0

我在网上找到了很多关于 Ajax.ActionLink() 替换整个页面而不是 UpdateTargetId 的答案，并且大多数都指向 jquery.unobtrusive-ajax.min.js。我很难让我的版本与 jquery 一起使用。实际上，我让它正常工作，但似乎仍然获得了发布到新页面的相同行为。

我在这里使用 jquery-2.1.1 和 unobtrusive-ajax： https://code.google.com/p/tfsstatus/

我的 PartialView X 图像删除图像是这样创建的：

@Html.Raw(Ajax.ActionLink("[replacethis]", "DeletePhoto", 
                new
                {
                    PhotoId = photo.Id, 
                    UserId = photo.UserId, 
                    CurrentFolder = ViewData["CurrentFolder"], 
                    page = ViewData["PageNumber"]
                },
                new AjaxOptions()
                {
                    HttpMethod = "GET",
                    UpdateTargetId = "photoList",
                    InsertionMode = InsertionMode.Replace
                },
                new 
                {
                    style = "position:absolute;top:2px;right:2px;z-index:2;display:none;width:22px;height22px",
                    @class="deleteImg"
                }
            ).ToHtmlString().Replace("[replacethis]", 
            "<img src=\"/Content/Desktop/images/delete.png\" alt=\"Delete\"/>"))

我正在使用 Html.Raw() 以便我可以包装图像而不是文本链接并在文本上使用替换。

我的布局在头部包含：

<script src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

我的控制器布局如下：

[HttpGet]
public ActionResult DeletePhoto()
{
    // Code
    return PartialView("PhotoList", photos.ToPagedList(page, 24));
}

我在“live”上遇到了 javascript 崩溃，因为它在当前的 JQuery 中已被弃用。所以我在 unobtrusive-ajax 中将每个“live”更改为“on”。

经过大量努力使这两个文件的版本同步后，单击 X 图像后，我仍然得到一个新页面，而不是目标 div 中的部分更新。除此之外，一切都在使用代码，例如图像正在被删除。

感谢任何帮助。

[附加信息]

我的局部视图如下所示：

@using MyProject.Areas.User.Models
@using PagedList.Mvc
@model PagedList.IPagedList<UserPhoto>

<div>
    @foreach (UserPhoto photo in Model)
    {
        <div id="id:@photo.Id" class="thumbnail photoThumb">
            <div style="position: relative; left: 0; top: 0;">
                <img src="/User/Photos/ImageThumbnail?PhotoId=@photo.Id&width=146&height=146" alt="photo"
                     width="146" height="146" style="position: relative; top: 0; left: 0;"/>
                @Html.Raw(Ajax.ActionLink("[replacethis]", "DeletePhoto", 
                    new
                    {
                        PhotoId = photo.Id, 
                        UserId = photo.UserId, 
                        CurrentFolder = ViewData["CurrentFolder"], 
                        page = ViewData["PageNumber"]
                    },
                    new AjaxOptions()
                    {
                        HttpMethod = "GET",
                        UpdateTargetId = "photoList",
                        InsertionMode = InsertionMode.Replace
                    },
                    new 
                    {
                        style = "position:absolute;top:2px;right:2px;z-index:2;display:none;width:22px;height22px",
                        @class="deleteImg"
                    }
                ).ToHtmlString().Replace("[replacethis]", 
                "<img src=\"/Content/Desktop/images/delete.png\" alt=\"Delete\"/>"))
             </div>  
        </div>
    }
    <div class="clear">
    </div>
</div>

@*  ****** Pagination ******  *@
<div style="width:100%;">
        @Html.PagedListPager(Model, page => Url.Action("Index", new { page, UserId = ViewData["UserId"] }),
            new PagedListRenderOptions() { Display = PagedListDisplayMode.IfNeeded })
</div>

我的观点是局部的：

<div id="photoList">
    @{
        Html.RenderPartial("PhotoList", Model);
    }
</div>

我还尝试在部分视图中使用 div photoList 包装器，结果相同。

[其他附加信息]

我创建了一个新项目来进行 cliché 2 时间戳测试，以检查我的 jquery 和 unobtrusive-ajax 是否有效。您知道其中一个，您在主视图中放置一个时间戳，然后在更新部分视图中放置一个。嗯，这行得通。所以试图缩小问题的范围，我替换了我的主项目的控制器方法中的所有内容，该方法返回部分视图以更新时间戳并注释掉部分视图中的所有其他内容，它仍然用一个页面替换了整个页面时间戳。

Answer 1

让我们尝试几件事。

1. 我更喜欢在控制器方法中使用PartialViewResult 而不是ActionResult，即使VS 没有抱怨。
2. [HttpGet] 不应修改资源。即，由于您要删除照片，请将其替换为 [HttpPost]。
3. 脚本 - 还将以下脚本添加到布局页面 jquery.validate.js 和 jquery.validate.unobtrusive.js。

使用示例代码检查此post。类似问题here.

Answer 2

经过几天的调试，我发现了问题。我不知道 jquery.unobtrusive-ajax.js 是如何工作的。我要删除的“X”图像在我的照片上方。因此，当我单击 X 时，我还会单击照片以进行预览。在 X 的点击覆盖中，我有 event.stopPropagation() ，这样底层图像也不会得到点击。这阻止了在 jquery.unobtrusive-ajax.js 中被覆盖的点击事件。删除 stopPropagation 调用后，POSTS 工作并且目标 div 的替换工作。

    $(".deleteImg").click(function (e) {
        e.stopPropagation();  // This line was preventing it from working
        if (!confirm("Are you sure you wish to delete this photo?")) {
            return;
        }
    });