0

内部に GridView を含む UpdatePanel があります。

Gridview には、ハイパーリンクを含む TemplateColumn があります。

ページの先頭で jQuery を使用して、これらすべてのハイパーリンクを nyroModal モーダル ハイパーリンクに設定しました。つまり、それらをクリックすると、ターゲット ページがモーダル ダイアログに読み込まれます。このコードは次のとおりです。

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

UpdatePanel を削除すると、上記のナイロモーダル コードは完全に機能します。しかし、そこに UpdatePanel があると、nyroModal 呼び出しが詰め込まれ、リンクが Firefox の生のまったく新しいウィンドウ/タブとして開かれます。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>

編集

うまくいくように見えるページを作成しました。完全なソースコードは以下のとおりです。

注：上記のコードでは、私がしなかった重要なことが1つあります。リンクが実際にブラウザの場所を変更するのを防ぐのを忘れたので、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

jqueryUIのダイアログを使用することをお勧めします。

使用方法については、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 に答える