asp.net 和 jQuery（漂亮的照片）答案

【问题标题】：asp.net and jQuery (pretty photo)asp.net 和 jQuery（漂亮的照片）
【发布时间】：2010-08-15 11:40:57
【问题描述】：

我在我的 aspx 页面中遇到了 PrettyPhoto 的问题。在更新面板控件中有一个 Repeater 控件。中继器控制重复表行：每行包含图像，这是一个链接（具有 rel=prettyphoto 属性）和几个链接按钮（编辑、保存）。 jQuery代码是这样的：

function bindPrettyPhoto()
{
   $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
};

$(document).ready(function(){
   bindPrettyPhoto();
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPrettyPhoto);

当页面加载漂亮的照片时工作正常。当我单击一次按钮编辑或保存漂亮的照片时工作正常，但在此单击后每次单击更新面板中的任何其他按钮都不会导致操作。有任何想法吗？如有任何建议，我将不胜感激。

问候，马丁

【问题讨论】：

最后一行Sys.WebForms...什么时候运行？
在异步回发完成并将控制权返回给浏览器后引发 EndRequest 事件。

标签： jquery asp.net button event-handling

【解决方案1】：

你可以这样做：

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    RegisterScript();
}

private void RegisterScript()
{
    StringBuilder sb2 = new StringBuilder();
    string selector = this.ClientID.ToString();

    if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
    {
        sb2.AppendLine(String.Concat("Sys.Application.add_load(", selector, "_func);"));
        sb2.AppendLine(String.Concat("function ", selector, "_func() {"));
    }
    else
    {
        sb2.AppendLine(" $(document).ready(function() {");
    }

    sb2.AppendLine("$(\"a[rel^='prettyPhoto']\").prettyPhoto({ animation_speed: 'fast' });");
    sb2.AppendLine("}");

    if (!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
        sb2.Append(");");

    if (ScriptManager.GetCurrent(this.Page).GetRegisteredClientScriptBlocks().FirstOrDefault(e => e.Key == String.Concat("PrettyPhoto", selector)) == null)
        ScriptManager.RegisterClientScriptBlock(this, this.GetType(), String.Concat("PrettyPhoto", selector), String.Format("<script type=\"text/javascript\">{0}</script>", sb2.ToString()), false);
}

【讨论】：

【解决方案2】：

使用更新面板时，只有页面的一部分会回传到服务器。 jquery 命令document.ready 仅在加载整个页面（或类似的东西）时触发。不幸的是，每次加载页面上的内容时都需要初始化 PrettyPhoto。

如果您使用更新面板并且希望 PrettyPhoto 正常工作，则需要将 PrettyPhoto 初始化代码放入 .NET AJAX "pageLoad" 函数中，如下所示：

function pageLoad() {
   $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
}

有关document.ready 和pageLoad 之间区别的好文章，请查看此链接：

http://encosia.com/document-ready-and-pageload-are-not-the-same/

【讨论】：

【解决方案3】：

尝试将Sys.WebForms... 调用放在$(document).ready() 函数中。可能是您在页面上加载特定函数之前调用它。

【讨论】：

【解决方案4】：

这是因为您需要删除这个 Jquery 插件每次在页面加载时添加的 Div 标签（在每个回帖上也是如此）。为此，在 js 文件函数 $.fn.prettyPhoto 或您的 $(document).ready (); 中添加以下修复代码但你应该确保你的脚本在 Jquery 插件之前运行

修复代码必须在 $("a[rel^='prettyPhoto']").prettyPhoto() 函数之前在每个页面加载时运行：

//to remove div tag prettyPhoto adds  on each page load 
$('div.pp_pic_holder').remove();
$('div.pp_overlay').remove();
$('div.ppt').remove();
//End  remove div tag prettyPhoto adds  on each page load

所以你可以改变你的功能：

 function bindPrettyPhoto() 
 {
    //to remove div tag prettyPhoto adds  on each page load 
    $('div.pp_pic_holder').remove();
    $('div.pp_overlay').remove();
    $('div.ppt').remove();
    //End  remove div tag prettyPhoto adds  on each page load
    $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
 };

正如我之前所说，您还可以将修复代码添加到 js 文件函数$.fn.prettyPhoto

所以对于版本 2.5.6 只需将函数更改为 this（通过在函数开头添加固定代码）：

 $.prettyPhoto = { version: '2.5.6' }; $.fn.prettyPhoto = function (settings) {

        $('div.pp_pic_holder').remove();
        $('div.pp_overlay').remove();
        $('div.ppt').remove();

.../* the rest of the function*/.....

【讨论】：