从 ASP.NET Gridview 显示 jquery 弹出详细信息页面的最简单方法答案

【问题标题】：Easiest way to show a jquery popup details page from ASP.NET Gridview从 ASP.NET Gridview 显示 jquery 弹出详细信息页面的最简单方法
【发布时间】：2015-04-21 12:00:24
【问题描述】：

我有一个包含一些数据的 c# Asp.net Gridview，然后每行数据都有一个详细信息页面，并带有一个超链接来查看详细信息页面。在单击任何特定数据行的“显示详细信息”后，使用 jquery 模式框显示弹出窗口的最佳（最简单）方法是什么？

例如，在单击“显示详细信息”超链接后，页面“details.aspx?id=10012”会在模式对话框中弹出

【问题讨论】：

标签： javascript c# jquery gridview modal-dialog

【解决方案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');
    });
});

代码是不言自明的。希望这会有所帮助。

【讨论】：