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

我认为您可以通过以下两种方式之一来解决它。

  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 中所做的那样手动调用对话框。请参阅 jQuery Mobile文档以获取更详细的解释。

从文档中：

调用弹出插件 这个插件将在任何包含属性 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 回答