如何在 aspx 按钮上弹出模式单击并使用 gridview 加载数据？

Question

我在 .aspx 页面中有一个按钮（见屏幕截图）。当我单击 View Duplicate Order 按钮时，我想打开一个模态弹出窗口并以 gridview 形式加载数据集记录，但我没有找到将模态保留在现有 aspx 页面中的解决方案。

Answer 1

好的，有几种方法可以做到这一点。

但是，第一条规则！！！

在几乎所有情况下，如果该对话框中的某个按钮会导致 post-back（和运行代码落后），那么您的对话框就会失效 - 当然当post-返回后页面重新刷新，然后您的对话框消失了。

因此，您可以考虑将对话框和代码放在更新面板的内部。这样你实际上仍然可以拥有 post-backs，这很有效。另一方面，您可以将网格放在“div”中。当您单击该按钮以显示您当前的对话框时，该按钮也会运行加载网格（在第二个网格中）。请注意我是如何建议您的第一个对话框启动将加载网格 - 第一个对话框是我们执行 post-back 的地方（将网格加载到 div（显示：none），然后后面的最后一行代码是简单的注册脚本，现在运行n + 显示您的对话框。查看订单的按钮可以简单地成为您弹出的另一个对话框，以显示第二个对话框中隐藏的网格。

所以，以上可以在没有更新面板的情况下完成。

下一个示例 - 我将使用的示例？

将另一页加载到第二个对话框中。 jQuery.UI 可以加载其他页面，您可以在没有 post-back 的情况下再次执行此操作。我非常喜欢这个选项，因此这就是我们要做的。

好的，所以我们假设 jQuery.UI（对话）。

所以，或者示例将：

单击按钮 ---> 显示第一个对话框。

在第二个对话框中，我们可以关闭，或者选择显示网格，这将启动第二个对话框。

所以，我们有这个例子：

    <asp:Button ID="FirstDialog" runat="server" Text="Show first dialog" 
            OnClientClick="showfirst(this);return false" CssClass="btn"/>
        <script>
            function showfirst(btn) {
                var mydiv = $("#firstdialog")
                mydiv.dialog({
                    modal: true, appendTo: "form",
                    title: "Two button example", closeText: "",
                    width: "30%",
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    buttons: {
                        Cancel: (function () {
                            mydiv.dialog("close")
                        })
                    }
                });
            }
        </script>

        <div id="firstdialog" style="display:none">
            <h2>My First dialog</h2>
            <asp:Button ID="cmdGrid" runat="server" Text="Show Grid" CssClass="btn"
                style="float:left"  OnClientClick="showgrid();return false;"/>

            <asp:Button ID="cmdCancel" runat="server" Text="My ASP btn cancel" CssClass="btn"
                style="float:right"
                OnClientClick="$('#firstdialog').dialog('close');return false"
                />

     <script>
         function showgrid(btn) {
             var mydiv = $("#gridialog")

             mydiv.dialog({
                 autoOpen: false,
                 modal: true, appendTo: "form",
                 title: "You can book to these Hotels", closeText: "",
                 width: "80%",
                 position: {
                     my: 'center top',
                     at: 'center top',
                     of: window},
                 buttons: {
                     Ok: (function () {
                         mydiv.dialog("close")
                     })
                 }
             });
             mydiv.load("MyGrid.aspx")
             mydiv.dialog("open")

         }
     </script>

        <div id="gridialog" style="display:none;width:80%">
        </div>

所以，我们现在有这个：

我们点击第一个按钮，我们现在有这个：

所以，典型的 jQuery.UI 对话框 - 它使主页变灰 - 我们有现在显示为对话框的“div”。

如果我们单击“取消”按钮 - 对话框关闭。

如果我们单击我的 ASP btn 取消 - 对话框关闭。

但是，如果我们点击显示网格，那么我们可以看到该按钮只是启动了另一个对话框。（它运行的函数 showgrid()。

该对话框的代码 - 大致相同，但关于 jQuery.UI 的真正好处是我们可以加载另一个页面 - 整个另一个页面。

所以，首先是我们当前页面中的 showgrid() 代码。同样，jQuery.UI 对话框。

所以我们在页面上仍然有一个 div，但是我们要将整个其他页面加载到那个“div”。这通常就是为什么 jquery.UI 对话框非常好！！！

所以这个：

  <script>
         function showgrid(btn) {
             var mydiv = $("#gridialog")

             mydiv.dialog({
                 autoOpen: false,
                 modal: true, appendTo: "form",
                 title: "You can book to these Hotels", closeText: "",
                 width: "80%",
                 position: {
                     my: 'center top',
                     at: 'center top',
                     of: window},
                 buttons: {
                     Ok: (function () {
                         mydiv.dialog("close")
                     })
                 }
             });
             mydiv.load("MyGrid.aspx")
             mydiv.dialog("open")

         }
     </script>

        <div id="gridialog" style="display:none;width:80%">
        </div>

所以我们现在构建一个全新的独立页面，如下所示：

       <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="server" CssClass="table">
                </asp:GridView>
            </div>
        </form>

此页面的加载事件是加载网格：

   protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }
void LoadGrid()
    {
        // load up our grid
        string strSQL = "SELECT TOP 15 FirstName, LastName, HotelName, Description from tblHotels " +
                        "WHERE Description is not null ORDER BY HotelName";
        GridView1.DataSource = MyRst(strSQL);
        GridView1.DataBind();
    }

现在如果我们点击“显示网格”，我们会看到：

所以请记住，如果您在当前页面上执行 post-back 操作？您的对话框被炸成碎片 - 重新刷新后，所有对话框都会消失。

但是，如前所述，如果您真的不能使用或想要第二页？

好吧，那么您可以将“第一个”按钮包围在更新面板中。当您单击它时，您的按钮将在客户端弹出第一个对话框，但后面的代码也必须加载该网格。您可以支持 post-backs，但是如果我们在显示网格按钮上加载网格，并且还调用客户端代码弹出网格，网格在代码隐藏代码有机会运行之前弹出 -而且您看不到结果。但是，如果你用代码加载网格然后弹出对话框，那么你很好，因为再次显示网格按钮只会弹出第二个对话框。

因此，第二个对话框可以是一个 100% 单独的页面来加载网格 - 毫无疑问，您必须传递一个查询参数，或者甚至使用 session() 来加载带有正确信息的网格。如前所述，由于需要将网格“传递”或“过滤”到某些行，因此我可以很好地证明这一点，并且看到使用 post-back 加载第一个对话框是一个令人信服的选择.

另一方面，如果在页面加载时无论如何加载网格 (style=display:none)，那么您可以弹出第一个对话框，然后弹出第二个对话框以显示网格，因为它已经加载，那么不需要 post-back，对吧？

但是，你可以有一个“div”，然后是一个更新面板，然后是内容，真的很酷，令人惊讶的是，这样的对话框将存活下来并允许 post 支持，但它仍然很难加载网格然后显示，如果你尝试使用 post-back 加载网格。

所以，可能最省力的方法是在弹出第一个对话框之前加载 GV，但上面是一种方法，但是你必须添加 URL 参数，或者使用 session() 来过滤整个新的我们放入对话框的网格页面。

如何在 aspx 按钮上弹出模式单击并使用 gridview 加载数据？

How to popup a modal on aspx button click and load data using gridview?

c#

asp.net

aspxgridview