Question

我有一个带有GridView的UpdatePanel。

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服务器端代码注册客户端脚本似乎很麻烦。我发现它很麻烦而令人沮丧：）

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

Answer 1

试试这个：

<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>

Answer 2

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

请参阅此文章以了解如何使用它：http://jqueryui.com/demos/dialog

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

jQuery(".modal").each(function() {
      var popup = jQuery(this);
      popup.parent().appendTo(jQuery("form:first"));
});

ASP.Net UpdatePanel + Gridview +超链接+ jQuery nyroModal插件 - 整个新窗口打开，但我只想要一个模态

2 个答案:

修改