使用 Ajax.ActionLink ASP.Net MVC 的多个更新目标 id答案

【问题标题】：Multiple update target ids with Ajax.ActionLink ASP.Net MVC使用 Ajax.ActionLink ASP.Net MVC 的多个更新目标 id
【发布时间】：2009-07-06 17:34:58
【问题描述】：

有没有办法使用 Ajax.ActionLink 指定多个更新目标 ID，以便我可以在回调时呈现一组部分视图？

我看到的问题是 Ajax.ActionLink 只提供一个目标 id 供我更新，但我需要在 ajax 调用后使用不同的数据更新页面的多个区域。

对此的任何帮助都会很棒！谢谢！

【问题讨论】：

标签： asp.net-mvc jquery

【解决方案1】：

您可以查看此链接：http://devlicio.us/blogs/sergio_pereira/archive/2009/08/23/asp-net-mvc-with-jquery-superload.aspx

我遇到了同样的问题，它可以帮助我解决它

【讨论】：

我用过这个，工作过，稍作改动就可以让它在 VB 中工作。仍然，这是一个混乱的解决方案。 mvc 团队需要为我们采取这种做法而受到打击，为什么他们不能制作一个可以正常工作的框架，并按照人们的预期做常见的、基本的日常事情？
@Erx_VB.NExT.Coder：更简洁的解决方案是使用 Json 结果，您可以在此结果上使用 javascript 更新页面的任何部分
@Erx_VB.NExT.Coder 我知道这是不久前的事了，但如果你不必继续使用 asp.net 框架，你应该研究一下 Apache Wicket。 Wicket 使用 Java 作为服务器端代码（只有很小的区别）。

【解决方案2】：

不，没有。但是，您可以编写自己执行此操作的代码。您需要：

将返回的 HTML 划分为不同的“区域”，您将应用到页面的不同部分。您可以在控制器上执行此操作（可能通过呈现多个操作并存储返回的 HTML 片段列表）或在 JavaScript 中。
编写 JavaScript 代码以获取返回的 HTML，迭代您要更新的目标，并将适当的 HTML 片段应用于每个目标。该代码类似于下面的代码。
不要使用 Ajax 表单 HTML 帮助程序。相反，呈现标准表单并通过 JavaScript 提交。

例子：

$.ajax({
    type: "POST", 
    url: "/action/controller",
    success: function(data) {
        var key;
        for (key in data) {
            $("#" + key).html(data[key]);
        }
    }
 });

这假定您调用的操作将返回一个对象，其中属性名称是要更新的元素的 ID，而属性值是作为字符串的 HTML 片段。

【讨论】：

【解决方案3】：

我知道这个问题很老，但如果你使用与@Gregoire 指出的相同的解决方案（http://devlicio.us/blogs/sergio_pereira/archive/2009/08/23/asp-net-mvc-with- jquery-superload.aspx) 用于服务器端，您可以在 AjaxOptions 中传递多个 id

@Ajax.ActionLink("Link", "Action", new AjaxOptions { UpdateTargetId = "id1, #id2" })

在这种情况下，MVC 框架会自动将“#”添加到id1。然后，您需要修改 jquery.unobtrusive-ajax.js 的 asyncOnSuccess 函数，使其看起来像这样：

mode = (element.getAttribute("data-ajax-mode") || "").toUpperCase();
$(element.getAttribute("data-ajax-update")).each(function (i, update) {
    var top,
        html = $("#" + update.id, data).html();

    switch (mode) {
    case "BEFORE":
        top = update.firstChild;
        $("<div />").html(html).contents().each(function () {
            update.insertBefore(this, top);
        });
        break;
    case "AFTER":
        $("<div />").html(html).contents().each(function () {
            update.appendChild(this);
        });
        break;
    default:
        $(update).html(html);
        break;
    }
});

Javascript 只是使用传递的相同 id 来抓取该内容并用相同的内容替换相同的 id。这也适用于 Ajax.BeginForm()。有意义吗？

【讨论】：