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

Question

So, I have a web form in asp.net. On that web form, there is a GridView. When the user clicks the view details on gridview, I want a modal popup to show the list of stores in that category. I have been trying different stuff but the modal does not show up. Below is my code for front end:

 <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>

I am trying to view the modal on grid's selectindexchanged event. The code I am using is as follows:

 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(); } }

Can someone please tell me why the modal popup is not showing up? What am i doing wrong? Any help will be highly appreciated. Thanks!

UPDATE: I tried to display the modal without any grid and backend C# code, by using the simple template from W3Schools. The modal still does not popup at all.

Answer 1

So I solved my problem. It occurred to me that if I enter $(#DetailsModal).modal() in the console window of chrome, the modal appears. So I should try calling it the same way in my site.
So, I wrote a javascript function at the end of my page:

<script>

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

    </script>

And in the code-behind I called by using:

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

And then after that when I tried opening the modal, it appeared correctly with the correct data.
Thanks to everyone who took time out of their schedule to give suggestions.