在局部视图中，在 ajax 链接上单击更新局部视图答案

【问题标题】：Inside a partial view, on ajax link click update partial view在局部视图中，在 ajax 链接上单击更新局部视图
【发布时间】：2014-03-13 12:38:15
【问题描述】：

我有一个有局部视图的视图

主视图

....
....
@if (Model.ProvidedResponseCount > 0)
{
    <div id="providedTimes" data-url="@Url.Action("ProvidedAttendeeResponse", new { attendeeId = @Model.AttendeeId })">

    </div>
}
....
....

这是局部视图

....
....
        <tbody>
            @foreach (var times in Model.ProvidedDateTimes)
            {
                <tr>
                    <td>
                        @times.StartDateTime &nbsp; to &nbsp; @times.EndDateTime
                    </td>
                    <td>@Html.ActionLink("Delete", "DeleteResponse", new { id = @times.ResponseId})</td>
                </tr>
            }
        </tbody>
....
....

以及控制器中的删除方法actionlink调用

public void DeleteResponse(int id)
{       
    _responseRepository.DeleteResponse(id);      
}

每当我点击局部视图中的操作链接时，我都会被转发到不同的链接。例如，localhost/Response/DeleteResponse/2。有什么链接。

但我想留在同一页面上，只是希望更新部分视图。

我该怎么办？

Ajax.Actionlink 会帮忙吗？

我对 Ajax.ActionLink 没有太多经验，谁能建议我应该怎么做？

我尝试过的事情

@Ajax.ActionLink("Delete", "DeleteResponse", new { id = @times.ResponseId }, new AjaxOptions ())
@Ajax.ActionLink("Delete", "DeleteResponse", new { id = @times.ResponseId }, new AjaxOptions {UpdateTargetId="dummy"})

然后在控制器中

public ActionResult DeleteResponse(int id)
{

    _responseRepository.DeleteResponse(id);

    return new EmptyResult();
}

两者都不起作用仍然将我重定向到新网址。

@Ajax.ActionLink("Delete", "DeleteResponse", new { id = @times.ResponseId }, new AjaxOptions {OnSuccess = "update"})

$(函数更新() { 警报（“你好”）； var url = $("#providedTimes").data('url'); url = url + "&t=" + new Date().getTime();
```
    $.get(url, function (data) {

        $('#providedTimes').html(data);
    });
});
```

这会无限次地提醒你好。

编辑 2：

@Ajax.ActionLink("Delete", "DeleteResponse", new { id = @times.ResponseId }, new AjaxOptions { UpdateTargetId="dummy",OnBegin = "begin",OnComplete="complete",OnFailure="fail",OnSuccess = "success"})



$(function begin() {
        alert("begin");
    });
    $(function complete() {
        alert("complete");
    });
    $(function fail() {
        alert("fail");
    });

我收到警报 begin，然后是 complete 然后 fail，当我加载主视图和单击删除按钮时，全部两次部分视图会将我重定向到不同的路线。

现在，当我单击删除时，我得到控制台错误：

【问题讨论】：

Ajax.ActionLink 将是您最好的解决方案，除了 jQuery POST。如果您没有在AjaxOptions 中指定UpdateTargetId，那么它应该让您保持在同一页面上并且不会修改任何内容。但是，在“删除”链接和事件监听器上添加一个类也可以工作。然后，您可以使用 jQuery.AJAX 进行 POST。
你可以在<td>里面试试这个：@Ajax.ActionLink("Delete", "DeleteResponse", new AjaxOptions())。
我这样做了，但它仍然将我重定向到不同的网址。我可能需要在 ajaxoptions 中使用 OnSuccess 吗？
将您的操作更改为：public ActionResult DeleteResponse(int id){ _responseRepository.DeleteResponse(id); return new EmptyResult();}。在 ActionLink 内部更改 new AjaxOptions() { UpdateTargetId = "dummy" }。在你的部分，最后，添加一个空/隐藏的<div>。我确信必须有直接的解决方案，但这必须工作......
仍然将我重定向到另一个链接。我尝试 OnSuccess 调用一个函数，并在该函数中再次更新部分视图，但这也不起作用。这是为您提供的代码生成的 Html <a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#dummy" href="/Response/DeleteResponse/9">Delete</a>

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

你可以做以下检查：

1.我猜你已经添加了 jquery.unobtrusive-ajax.js

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

确保已为页面加载它。检查萤火虫。
尝试将其添加到页面底部。
如果使用低于版本 4 的 MVC，请在您的 web.config 中启用不显眼的 javascript。

2。除了上面，我没有看到 @Ajax.ActionLink 的持有者

   @Ajax.ActionLink(
    "load partial view", 
    "Delete", 
    "DeleteResponse", 
    new AjaxOptions { UpdateTargetId = "result" }
   )

持有人

<div id="result"></div>

【讨论】：

我已经加载了 jquery unobtrusive ajax javascript。但是当我对 OnFailure 事件发出警报时。它被调用。一定意味着某事发生了故障。
能看看控制台报错吗？我发布了一张图片
似乎是兼容问题。您的 jquery 库是否也位于任何其他库或代码之前？如果它已经尝试更改 jquery 版本，因为我已经使用 juqery 1.9.1 和 unobtrusive-ajax。