Bootstrap Modal 不适用于 asp.net Web 应用程序答案

【问题标题】：Bootstrap Modal not working with asp.net web applicationBootstrap Modal 不适用于 asp.net Web 应用程序
【发布时间】：2021-01-25 22:38:03
【问题描述】：

所以，我在 asp.net 中有一个网络表单。在该 Web 表单上，有一个 GridView。当用户单击 gridview 上的视图详细信息时，我想要一个模式弹出窗口来显示该类别中的商店列表。我一直在尝试不同的东西，但模式没有出现。下面是我的前端代码：

            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">

                <ContentTemplate>

                    <div id="DetailsModal" class="modal fade" role="dialog">

                        <div class="modal-dialog">

                            <div class="modal-content">

                                <div class="modal-header">
                                    <asp:Label ID="lblHead" runat="server" Text="List of stores:" CssClass="h4"></asp:Label>
                                </div>

                                <div class="modal-body">

                                    <asp:Table ID="tblJobs" runat="server" CssClass="tblStoresView" GridLines="Both" CellPadding="6" CellSpacing="6" Visible="False">
                                        <asp:TableRow runat="server">

                                            <asp:TableCell runat="server">
                                                <asp:Label ID="Label1" runat="server" Text="Store Name"></asp:Label>
                                            </asp:TableCell>

                                            <asp:TableCell runat="server">
                                                <asp:Label ID="lblPost" runat="server" Text=""></asp:Label>
                                            </asp:TableCell>

                                        </asp:TableRow>

                                        <asp:TableRow runat="server">

                                            <asp:TableCell runat="server">
                                                <asp:Label ID="Label2" runat="server" Text="Floor"></asp:Label>
                                            </asp:TableCell>

                                        </asp:TableRow>

                                        <asp:TableRow runat="server">

                                            <asp:TableCell runat="server">
                                                <asp:Label ID="Label5" runat="server" Text="Store number"></asp:Label>
                                            </asp:TableCell>

                                            <asp:TableCell runat="server">
                                                <asp:Label ID="lblType" runat="server" Text=""></asp:Label>
                                            </asp:TableCell>

                                        </asp:TableRow>

                                </asp:Table>

                                </div>

                                <div class="modal-footer">
                                    <asp:Button ID="BtnView" CssClass="button" runat="server" Text="View" Visible="False" OnClick="BtnView_Click" />
                                </div>

                            </div>

                        </div>

                    </div>

                </ContentTemplate>

            </asp:UpdatePanel>

我正在尝试查看网格的 selectindexchanged 事件上的模式。我正在使用的代码如下：

protected void gridStores_SelectedIndexChanged(object sender, EventArgs e)
        {
            tblStores.Visible = true;
            BtnView.Visible = true;
            GridViewRow row = gridStores.SelectedRow;

            conn = new SqlConnection();
            conn.ConnectionString = connString;
            sqlcmd = conn.CreateCommand();

            string query = "select * from [stores] where cat = @cat";

            sqlcmd = new SqlCommand(query, conn);
            sqlcmd.Parameters.AddWithValue("@cat", row.Cells[1].Text);

                conn.Open();

                da = new SqlDataAdapter(sqlcmd);
                ds = new DataSet();
                da.Fill(ds, "StoresProject");
                dt = ds.Tables[0];

                foreach (DataRow dr in dt.Rows)
                {
                    lblName.Text = dr["store name"].ToString();
                    lblFloow.Text = dr["floor"].ToString();
                    lblNumber.Text = dr["store number"].ToString();

                }
        }

有人可以告诉我为什么模式弹出窗口没有出现吗？我究竟做错了什么？任何帮助将不胜感激。谢谢！

更新：我尝试使用来自 W3Schools 的简单模板来显示没有任何网格和后端 C# 代码的模式。模态仍然没有弹出。

【问题讨论】：

您查看过浏览器的开发工具控制台吗？
另外，你到底为什么在 2020 年使用 WebForms？并且您需要正确处理您的 SqlConnection 和 SqlCommand 对象（使用 using() 块）。最后，您应该使用SqlDataReader 而不是SqlDataAdapter - 没有必要为此使用DataSet。
你会建议什么来代替网络表单？ @Dai 你能告诉我我做错了什么，我怎样才能让模态弹出？我必须提交这个项目。
你需要使用javascript来显示模态：$('#myModal').modal('show')。由于您使用的是 WebForms，请使用 ScriptManager.RegisterStartupScript 从 SelectedIndexChanged 事件中调用 javascript
虽然同意以前的 cmets，但 WebForms 在这一点上已经过时了。您可能希望查看 .NET Core 或类似内容中的 Razor Pages。还可以看看使用像Entity Framework 这样的 ORM 与直接使用 ADO.NET

标签： c# asp.net bootstrap-4 bootstrap-modal

【解决方案1】：

所以我解决了我的问题。我突然想到，如果我在 chrome 的控制台窗口中输入$(#DetailsModal).modal()，就会出现模式。所以我应该尝试在我的网站上以同样的方式调用它。
所以，我在页面末尾写了一个 javascript 函数：

<script>

        function openModal(){
        $('#DetailsModal').modal();
        }

    </script>

在我调用的代码隐藏中：

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openModal();", true);

然后，当我尝试打开模式时，它以正确的数据正确显示。
感谢所有抽出时间提供建议的人。

【讨论】：