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包装器，结果相同。

[其他附加信息]

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

Answer 1

让我们尝试一些事情。

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

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

Answer 2

经过几天的调试后我发现了问题。我不知道jquery.unobtrusive-ajax.js是如何工作的。我删除的“X”图像在我的照片上。因此，当我点击X时，我也会点击该照片进行预览。在X的点击覆盖中，我有event.stopPropagation（），这样底层图像也不会得到点击。这阻止了在jquery.unobtrusive-ajax.js中重写的click事件。删除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;
        }
    });

Ajax.ActionLink替换整个页面

2 个答案: