如何使用Bootstrap的模式彈出窗口從ASP.NET GridView顯示detailsview

Question

我正在處理asp.net網絡表單。 我正在嘗試通過bootstrap的模態窗口使用detailsview控件在gridview中顯示所選行的詳細信息。 以下是我的代碼。 當我單擊“詳細信息”按鈕時，頁面顯示為灰色，但沒有顯示模式彈出窗口或數據。

<form id="form1" runat="server">
    <div style="width: 90%; margin-right: 5%; margin-left: 5%; text-align: center">
        <asp:ScriptManager runat="server" ID="ScriptManager1"/>

        <h1>Grid View System</h1>

        <asp:UpdatePanel ID="upCrudGrid" runat="server">
            <ContentTemplate>
                <asp:GridView ID="grdvCrudOperation" runat="server" Width="940px" HorizontalAlign="Center"
                    OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false" AllowPaging="true"
                    DataKeyNames="EmployeeID" CssClass="table table-hover table-striped">
                    <Columns>
                        <asp:ButtonField CommandName="detail" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Detail" HeaderText="Detailed View">
                            <ControlStyle CssClass="btn btn-info"></ControlStyle>
                        </asp:ButtonField>
                        <asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Edit" HeaderText="Edit Record">
                            <ControlStyle CssClass="btn btn-info"></ControlStyle>
                        </asp:ButtonField>
                        <asp:ButtonField CommandName="deleteRecord" ControlStyle-CssClass="btn btn-info" ButtonType="Button" Text="Delete" HeaderText="Delete Record">
                            <ControlStyle CssClass="btn btn-info"></ControlStyle>
                        </asp:ButtonField>
                        <asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
                        <asp:BoundField DataField="FirstName" HeaderText="First Name"/>
                        <asp:BoundField DataField="LastName" HeaderText="Last Name"/>
                        <asp:BoundField DataField="Title" HeaderText="Title"/>
                        <asp:BoundField DataField="Address" HeaderText="Address"/>
                    </Columns>
                </asp:GridView>
                <asp:Button ID="btnAdd" runat="server" Text="Add New Record" CssClass="btn btn-info" OnClick="btnAdd_Click"/>
            </ContentTemplate>
            <Triggers>
            </Triggers>
        </asp:UpdatePanel>

        <div id="detailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Details</h3>
            </div>
            <div class="modal-body">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White" 
                            ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush" 
                            FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False">
                            <Fields>
                                <asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
                                <asp:BoundField DataField="FirstName" HeaderText="First Name"/>
                                <asp:BoundField DataField="LastName" HeaderText="Last Name"/>
                                <asp:BoundField DataField="Title" HeaderText="Title"/>
                                <asp:BoundField DataField="Address" HeaderText="Address"/>
                            </Fields>
                        </asp:DetailsView>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand"/>
                        <asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click"/>
                    </Triggers>
                </asp:UpdatePanel>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
</form>

后面的代碼：

    protected DataTable dt;
    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            int index = Convert.ToInt32(e.CommandArgument);
            if (e.CommandName.Equals("detail"))
            {
                int ID = Convert.ToInt32(grdvCrudOperation.DataKeys[index].Value.ToString());
                IEnumerable<DataRow> query = from i in dt.AsEnumerable()
                                             where i.Field<int>("EmployeeID").Equals(ID)
                                             select i;
                DataTable detailTable = query.CopyToDataTable<DataRow>();
                DetailsView1.DataSource = detailTable;
                DetailsView1.DataBind();
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append(@"<script type='text/javascript'>");
                sb.Append("$('#detailModal').modal('show');");
                sb.Append(@"</script>");
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DetailModalScript", sb.ToString(), false);
            }
    }

Answer 1

我的代碼的aspx面是錯誤的。 以下是更新的代碼。 現在工作正常：

    <div id="detailModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">               
            <div class="modal-dialog">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                    <ContentTemplate>
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h3 id="myModalLabel">Details</h3>
                            </div>
                            <div class="modal-body" >
                                <asp:DetailsView ID="DetailsView1" runat="server" CssClass="table table-bordered table-hover" BackColor="White" 
                                    ForeColor="Black" FieldHeaderStyle-Wrap="false" FieldHeaderStyle-Font-Bold="true" FieldHeaderStyle-BackColor="LavenderBlush" 
                                    FieldHeaderStyle-ForeColor="Black" BorderStyle="Groove" AutoGenerateRows="False">
                                    <Fields>
                                        <asp:BoundField DataField="EmployeeID" HeaderText="ID"/>
                                        <asp:BoundField DataField="FirstName" HeaderText="First Name"/>
                                        <asp:BoundField DataField="LastName" HeaderText="Last Name"/>
                                        <asp:BoundField DataField="Title" HeaderText="Title"/>
                                        <asp:BoundField DataField="Address" HeaderText="Address"/>
                                    </Fields>
                                </asp:DetailsView>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                            </div>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="grdvCrudOperation" EventName="RowCommand"/>
                        <asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click"/>
                    </Triggers>
                </asp:UpdatePanel>

            </div>
        </div>