时间戳

首页 > 解决方案 > Bootstrap Modal 不适用于 asp.net Web 应用程序

c# - Bootstrap Modal 不适用于 asp.net Web 应用程序

问题描述


所以，我在 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# 代码的模式。模态仍然没有弹出。

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

解决方案

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

<script>

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

    </script>

在我调用的代码隐藏中： 
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openModal();", true);

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

推荐阅读