0

我有一个 UpdatePanel，里面有一个 GridView。

Gridview 有一个包含超链接的 TemplateColumn。

在页面的开头使用 jQuery，我将所有这些超链接设置为 nyroModal 模态超链接。也就是说，当您单击它们时，目标页面将加载到模式对话框中。这段代码是：

<script type="text/javascript">
    $(document).ready(function(){
        $(".modal").nyroModal();
    });
</script>

如果我删除了 UpdatePanel，那么上面的 nyromodal 代码可以很好地工作。但是有了 UpdatePanel，它会填充 nyroModal 调用，并在 Firefox 中将链接作为原始的全新窗口/标签打开。UpdatePanel 试图太聪明并启动回发等。

我是否必须在渲染时以某种方式注册每个按钮的 nyromodal 调用，或者告诉.Net/UpdatePanel“远离地狱”？我玩了一下 RegisterClientScriptBlock 等，但似乎无法让它开心。使用 .Net 服务器端代码注册客户端脚本似乎很麻烦。我觉得它很麻烦而且令人沮丧:)

非常感谢您的任何建议或见解。

4

2 回答 2

4

试试这个：

<script type="text/javascript">
    $(document).ready(function(){
        /*
            This binds a callback to the click event of all 
            elements with the 'modal' class, even ones that are
            updated inside an UpdatePanel.
        */
        $(".modal").live('click', function(){
            /*
                When the element is clicked, open the nyroModal dialog
                manually. (If the element is a link, nyroModal will 
                automatically get the content based on the link's href attribute.)
            */
            $(this).nyroModalManual();
        });
    });
</script>

编辑

我创建了一个看起来运行良好的页面。完整的源代码如下。

注意：在上面的代码中有一件重要的事情我没有做。我忘了阻止链接实际更改浏览器位置，所以请注意evt.preventDefault();下面的代码（抱歉：P）。

<%@ Page Language="C#" %>
<script runat="server">
  public void Page_Load()
  {
    BindGridViewUrls();
  }

  public void GridViewUrls_PageIndexChanging(object sender, GridViewPageEventArgs e)
  {
    GridViewUrls.PageIndex = e.NewPageIndex;
    BindGridViewUrls();  
  }

  public void BindGridViewUrls() {
    var Urls = new[]{
      new {UrlText="Google", Url="http://google.com"},
      new {UrlText="Stack Overflow", Url="http://stackoverflow.com"},
      new {UrlText="XKCD", Url="http://xkcd.com"},
      new {UrlText="Google Reader", Url="http://google.com/reader"},
      new {UrlText="reddit", Url="http://reddit.com"},
      new {UrlText="Hacker News", Url="http://news.ycombinator.com"},
      new {UrlText="Ubuntu", Url="http://ubuntu.com"},
      new {UrlText="Twitter", Url="http://twitter.com"},
      new {UrlText="YouTube", Url="http://youtube.com"},
      new {UrlText="Wikipedia", Url="http://en.wikipedia.org"},
      new {UrlText="Coding Horror", Url="http://codinghorror.com"},
      new {UrlText="Mozilla", Url="http://mozilla.org"},
      new {UrlText="jQuery", Url="http://jquery.com"},
      new {UrlText="NyroModal", Url="http://nyromodal.nyrodev.com/"},
    };
    GridViewUrls.DataSource = Urls;
    GridViewUrls.DataBind();
  }
</script>
<!DOCTYPE
  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>UpdatePanel Test</title>
  <script 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script>
  <script src="jquery.nyroModal-1.4.2.js"></script>
  <script>
    $(function(){
      $('.modal').live('click', function(evt){
        $(this).nyroModalManual({minWidth:750});
        evt.preventDefault();
      });
    });
  </script>
</head>
<body>
  <form runat="server">
  <div>
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server">
      <ContentTemplate>
        <asp:GridView runat="server" ID="GridViewUrls" AllowPaging="true"
          PageSize="5" OnPageIndexChanging="GridViewUrls_PageIndexChanging">
          <Columns>
            <asp:HyperLinkField DataTextField="UrlText"
              DataNavigateUrlFields="Url" ControlStyle-CssClass="modal"
            />
          </Columns>
        </asp:GridView>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>
  </form>
</body>
</html>
于 2009-05-13T06:50:45.343 回答
0

我建议您使用 jquery UI 中的对话框。

参考这个如何使用它：http: //jqueryui.com/demos/dialog

我已经实现了类似于你想要使用对话框的东西，它工作正常。
您只需要将对话框添加回表单，如下所示：

jQuery(".modal").each(function() {
      var popup = jQuery(this);
      popup.parent().appendTo(jQuery("form:first"));
});
于 2009-05-13T09:35:11.363 回答