0

JQuery フレームワークと ASP.NET (VB) を使用する以下のコードがあります。

基本的に、以下のコード スニペットは ASP ページ上にあり、ハイパーリンク/ボタンをクリックしてポップアップが表示されるまで非表示になっています。以下は非表示のポップアップ コードです。

<!--HIDDEN POPUP 1 BEGIN-->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog1-screen">    </div>
<div class="ui-popup-container pop ui-popup-hidden" id="popupDialog1-popup"><div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
        <div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
            <h1 class="ui-title" role="heading" aria-level="1">Export Data</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
            <h3 class="ui-title">Export Data</h3>
            <asp:HiddenField ID="hidDataName" runat="server" />
            <p>Choose one of the formats below to export the data to.</p>
                <div data-role="controlgroup" data-type="horizontal">
                    <asp:LinkButton ID="btnExcel" runat="server" data-role="button"><asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />Excel</asp:LinkButton>
                    <asp:LinkButton ID="btnPDF" runat="server" data-role="button"><asp:Image ID="imgPDF" runat="server" ImageUrl="~/images/PDF.ico" Width="50px" Height="50px" />PDF</asp:LinkButton>
                    <asp:LinkButton ID="btnWord" runat="server" data-role="button"><asp:Image ID="imgWord" runat="server" ImageUrl="~/images/Word.ico" Width="50px" Height="50px" />Word</asp:LinkButton>
                    <asp:LinkButton ID="btnCSV" runat="server" data-role="button"><asp:Image ID="imgCSV" runat="server" ImageUrl="~/images/CSV.ico" Width="50px" Height="50px" />CSV</asp:LinkButton>
                </div>      
        </div>
</div></div>
<!--HIDDEN POPUP 1 END-->

今、私は問題なくポップアップを開く以下のリンクを持っています:

<a href="#popupDialog1"  data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" aria-haspopup="true" data-theme="j" aria-owns="#popupDialog1" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-hover-j ui-btn-up-j">
<span class="ui-btn-inner"><span class="ui-btn-text">Approve All</span></span></a>

ただし、上記のボタンをクリックしていくつかのコードを実行できるようにしたいのですが、LinkBut​​ton を使用してみましたが、ポップアップを表示できません。コードを実行したい理由は、ページ上のどのボタンがポップアップを要求したかを知る必要があるからです。

それが意味をなすことを願っています。

どんな助けでも感謝します。

ありがとう、スティーブ

4

2 に答える 2

2

2つの方法のいずれかで解決できると思います。

  1. jQuery を使用してクリック イベントを処理します。
  2. コントロールで OnClientClick イベントを使用します。
  3. リンク ボタンで data-rel 属性を使用します。

オプション1：

私の意見では最も簡単な ClientIDMode="Static" を設定するか、javascript で control.ClientID を使用します (以下を参照)。これにより、必要なコントロールで jQuery コードが確実に実行されます。jQuery をコーディングしてコードを実行します。

<script>
    $(document).ready(function() {

         $("#btnExcel").click(function() {
             $("#popupDialog1-screen").popup();
         }

    });
</script>

また

<script>
    $(document).ready(function() {

         $("#<%= btnExcel.ClientID %>").click(function() {
             $("#popupDialog1-screen").popup();
         }

    });
</script>

オプション 2:

    <asp:LinkButton ID="btnExcel" runat="server" OnClientClick="ExcelClick();" 
data-role="button"><asp:Image ID="imgExcel" runat="server" 
ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />
Excel</asp:LinkButton>

...

<script>
     function ExcelClick() {
         $("#popupDialog1-screen").popup();
     }
</script>

オプション 3:

<asp:LinkButton ID="btnExcel" runat="server" data-rel="popup">
    <asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" 
       Width="50px" Height="50px" />Excel
</asp:LinkButton>

ノート：

上記のコードでは、プラグインの実行時にコードが自動初期化されます (jQuery Mobile)。リンク ボタンから呼び出したいので、 data-rel 属性をリンク ボタンに追加するか、上記のオプション 1 と 2 で行ったようにダイアログを手動で呼び出す必要があります。より詳しい説明。

ドキュメントから：

popup プラグインの呼び出し このプラグインは、属性 data-role="popup" を持つ div を含むすべてのページで自動初期化します。ただし、必要に応じて、任意のセレクターでポップアップ プラグインを直接呼び出すことができます。これは、他の jQuery プラグインと同様に、ポップアップ オプション、メソッド、およびイベント API をプログラムで操作できます。

$( "#myPopupDiv" ).popup();

チャンスがなかったので、コードをテストして、正しい div ID を取得したことを確認する必要があります。

お役に立てれば。

ウェイド

于 2013-01-24T17:28:09.033 に答える
0

皆さんの助けに感謝します。私はWade73の助けを借りて問題を解決しました。

asp.netリンクボタンのクリックイベントに以下のコードを追加しました。

Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", "$(function () {$('#popupDialog1').popup('open');});", True)

これにより、イベントが発生した後にポップアップが表示されます。

再度、感謝します。

于 2013-01-25T19:29:47.953 に答える