從ASP.NET Gridview顯示jQuery彈出詳細信息頁面的最簡單方法

Question

我有一些數據的ac＃Asp.net Gridview，然后每行數據都有一個詳細信息頁面，並帶有一個超鏈接以查看詳細信息頁面。 在針對任何特定數據行單擊“顯示詳細信息”后，使用jquery模式框顯示彈出窗口的最佳（最簡單）方法是什么？

因此，例如，單擊“顯示詳細信息”超鏈接后，頁面“ details.aspx？id = 10012”將在模式對話框中彈出。

Answer 1

我將CustomerID作為QueryString傳遞到另一個頁面的示例

步驟1-像這樣在您的頁面中創建一個ItemTemplate。

<ItemTemplate>
    <asp:HyperLink ID="DetailsLink" runat="server"
        CssClass="my_link"
        Text="View Details"
        ToolTip='<%# Eval("CustomerID") %>'
        NavigateUrl="#">
    </asp:HyperLink>
</ItemTemplate>

步驟2-像這樣在GridView外部放置一個div。

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>

步驟3-JS

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        height: 600,
        open: function (ev, ui) {
            $('#myIframe').attr('src', 'Popup.aspx?id=' + selectedID);
        }
    });
    var selectedID = "0";
    $('.my_link').click(function (event) {
        selectedID = this.title;
        event.preventDefault();
        $('#dialog').dialog('open');
    });
});

該代碼不言自明。 希望這可以幫助。