bootstrapのモーダルポップアップを使用してasp.net gridviewからdetailsviewを表示するには

Question

私はasp.net Webフォームで作業しています。私は、ブートストラップのモーダルウィンドウを通してDetailsviewコントロールを使用して、グリッドビューで選択された行の詳細を表示しようとしています。以下は私のコードです。詳細ボタンをクリックするとページがグレーアウトされますが、モーダルポップアップやデータは表示されません。背後

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