Bootstrap Modal not working with asp.net web application

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x