代码之家 › 专栏 › 技术社区 › leora Matt Lacey

使用jquery发布后如何刷新多个div

html post asp.net-mvc jquery

leora Matt Lacey · 技术社区 · 14 年前

我有一个屏幕,上面有多个小部件(周围都有不同的div)。我有一个表单,当我发布(使用jquery)时,它使用Ajax更新单个表单。

我还想刷新另外两个div(在表单之外)。在单个jquery ajax后回调上触发多个不同div刷新的最佳方法是什么?

2 回复 | 直到 14 年前

queen3 14 年前

1路。让您的操作后局部视图包含隐藏的数据,您将使用这些数据更新其他div。我认为这比返回特殊的JSON或脚本代码要好得多。您可能可以使用.detach()而不是.clone()。

<div>Main post result data</div>
<div id="additional1" style="display:none">Moredata</div>

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#additional_div").html($("#result #additional1").clone().show());
}

2路。在表单发布成功时,请执行其他$.get()s以更新其他div。如果附加数据较大,效果更好;如果数据较小,则1更好。

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#addiotional_div").load("/additional_action/updated_info");
}

Darin Dimitrov 14 年前

除非修改服务器操作以返回所有需要更新的div的适当HTML(可能使用JSON编码字符串),否则在单个Ajax请求中无法实现这一点。

更新:

我想展示另一种技巧。您可以有一个返回javascript的控制器操作。以下面的ascx局部视图为例( RefreshPartials.ascx ):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

$('#partial1Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData) %>');
$('#partial2Container').html('<%= Template.RenderPartialToString("~/Views/Home/Partial2.ascx", ViewData)%>');

何处 RenderPartialToString is taken from here (备注:此方法可能有一些缺陷,可能不适用于所有情况,但您可以尝试)。接下来,您将对控制器操作执行Ajax请求,该操作只呈现以下部分:

public ActionResult RefreshPartials()
{
    return PartialView("RefreshPartials");
}

您需要指定 dataType: script 在您的Ajax请求中,以便对前一部分中包含的javascript进行评估:

$.ajax({
    url: '/home/refreshpartials',
    dataType: 'script'
});

最后一个注意事项是正确地避免 RenderPartialToString 方法,因为它可能包含制动javascript的字符。您可以使用以下方法:

public static string JsEscape(this HtmlHelper html, string content)
{
    content = Regex.Replace(content, "(\r\n)|(\r)|(\n)", @"\n", RegexOptions.Multiline);
    content = Regex.Replace(content, "(?<!\\\\)\"", "\\\"", RegexOptions.Multiline);
    return content;
}

所以最后你的部分看起来是这样的:

$('#partial1Container').html('<%= Html.JsEscape(Template.RenderPartialToString("~/Views/Home/Partial1.ascx", ViewData)) %>');

你可以看到你可以把你喜欢的任何javascript放在这里 刷新部分.ascx 使您的Ajax请求更加花哨。

备注:此想法来源于 Ruby On Rails Javascript Generators .