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

Posted 2023-04-01

【中文标题】如何在 aspx 按钮单击上弹出模式并使用 gridview 加载数据？

【英文标题】：How to popup a modal on aspx button click and load data using gridview?

【发布时间】：2022-01-14 04:49:48

【问题描述】：

我在 .aspx 页面中有一个按钮（参见截图）。当我单击 查看重复顺序 按钮时，我想打开一个模式弹出窗口并在 gridview 表单中加载数据集记录，但我没有找到将模式保留在现有 aspx 页面中的解决方案。

【问题讨论】：

不清楚为什么你不能把网格视图放到上面的弹出框中？？？你是如何启动该对话框的？ （人们经常使用十几个或更多流行的对话框小部件 - 也许是 jQuery.ui？它会有助于显示按钮，至少是用于启动该对话框的 js 代码。但我不明白为什么您无法在启动该弹出窗口之前加载网格???这确实表明您的按钮执行回发，填充网格，然后您启动弹出对话框，然后网格可以在该对话框中。但如前所述，有 100 个对话系统。

所以，你现在有一个模态对话框，当你点击查看重复订单时，你是要弹出另一个对话框，还是干脆关闭现有对话框，然后用网格弹出一个新对话框用于展示？

是的，点击查看重复订单按钮后，1.我想打开另一个弹出对话框模型（一个新的），2.我不想关闭现有对话框

【参考方案1】：

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

但是，第一规则！！！

在几乎所有情况下，如果该对话框中的按钮会导致回发（并在后面运行代码），那么您的对话框就会被炸毁 - 当然，当回发后页面重新刷新时，那么你的对话框就消失了。

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

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

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

将另一页加载到第二个对话框中。 jQuery.UI 可以加载其他页面，您可以再次执行此操作而无需回发。我非常喜欢这个选项，因此我们将这样做。

好的，所以我们为此假设 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”。

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

如果我们点击 My 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();
    

现在，如果我们点击 Show Grid，我们会看到：

所以请记住，如果您在当前页面上进行回发？您的对话框被炸成碎片 - 并且重新刷新后，所有对话框都会关闭。

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

那么，您可以将 FIRST 按钮包围在更新面板内。当您单击它时，您的按钮将在客户端弹出第一个对话框，但后面的代码也必须加载该网格。您可以处理回发，但是如果我们在显示网格按钮上加载网格，并且还调用客户端代码来弹出网格，则网格会在代码后面的代码有机会运行之前弹出 - 您看不到结果.但是，如果您使用后面的代码加载网格，然后弹出对话框，那就没问题了，因为再次显示网格按钮只会弹出第二个对话框。

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

另一方面，如果在页面加载时您无论如何都加载了网格 (style=display:none)，那么您可以弹出第一个对话框，然后弹出第二个对话框以显示网格，并且由于它已经加载，所以没有需要回发，对吧？

但是，你可以有一个“div”，然后是一个更新面板，然后是内容，而且真的很酷，令人惊讶的是这样的对话框将继续存在并允许回发，但如果你尝试，仍然很难加载网格然后显示并使用回发来加载网格。

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