GridViewのポップアップモーダル表示ボタン

Question

データベースからレコードセットを取得するグリッドがあります。グリッドの一部として、[表示]ボタンがあります。 [表示]リンクボタンをクリックすると、フォームにレコードを表示するポップアップが開きます。

私の問題は、表示リンクボタンをクリックすると、ポップアップモーダルが開かないということです。

は、これは私がLinkBut​​tonコントロールではJavaScriptを経由してポストバックが発生し、その後、サーバー側のクリックイベントこれまで

<form id="form1" runat="server" > 

     <div class="grid"> 
      <asp:HiddenField ID="hfUserID" runat="server" /> 
      <asp:Button ID="btnAddUser" runat="server" Text="Add New User" OnClick="btnAddUser_Click" /> 
      <asp:GridView ID="gvUsers" runat="server" PagerStyle-CssClass="pager" 
       HeaderStyle-CssClass="header" RowStyle-CssClass="rows" 

       CssClass="mydatagrid" AllowPaging="True" 
       AutoGenerateColumns="false" 
       ShowHeaderWhenEmpty="true" 
       BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3"> 
       <FooterStyle BackColor="White" ForeColor="#000066" /> 
       <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> 
       <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
       <RowStyle ForeColor="#000066" /> 
       <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
       <SortedAscendingCellStyle BackColor="#F1F1F1" /> 
       <SortedAscendingHeaderStyle BackColor="#007DBB" /> 
       <SortedDescendingCellStyle BackColor="#CAC9C9" /> 
       <SortedDescendingHeaderStyle BackColor="#00547E" /> 
       <Columns> 
        <asp:TemplateField HeaderText="UserID"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("UserID") %>' runat="server"/> 
         </ItemTemplate> 
         <EditItemTemplate> 
          <asp:TextBox ID="txtUsername" Text='<%# Eval("UserID") %>' runat="server"/> 
         </EditItemTemplate> 
         <FooterTemplate> 
          <asp:TextBox ID="txtUsernameFooter" runat="server"/> 
         </FooterTemplate> 
        </asp:TemplateField> 

        <asp:TemplateField HeaderText="Username"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("Username") %>' runat="server"/> 
         </ItemTemplate> 
         <EditItemTemplate> 
          <asp:TextBox ID="txtUsername" Text='<%# Eval("Username") %>' runat="server"/> 
         </EditItemTemplate> 
         <FooterTemplate> 
          <asp:TextBox ID="txtUsernameFooter" runat="server"/> 
         </FooterTemplate> 
        </asp:TemplateField> 

        <asp:TemplateField HeaderText="Password"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("Password") %>' runat="server"/> 
         </ItemTemplate> 
         <EditItemTemplate> 
          <asp:TextBox ID="txtPassword" Text='<%# Eval("Password") %>' runat="server"/> 
         </EditItemTemplate> 
         <FooterTemplate> 
          <asp:TextBox ID="txtPasswordFooter" runat="server"/> 
         </FooterTemplate> 
        </asp:TemplateField> 

        <asp:TemplateField HeaderText="Email"> 
         <ItemTemplate> 
          <asp:Label Text='<%# Eval("Email") %>' runat="server"/> 
         </ItemTemplate> 
         <EditItemTemplate> 
          <asp:TextBox ID="txtEmail" Text='<%# Eval("Email") %>' runat="server"/> 
         </EditItemTemplate> 
         <FooterTemplate> 
          <asp:TextBox ID="txtEmailFooter" runat="server"/> 
         </FooterTemplate> 
        </asp:TemplateField> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <asp:LinkButton ID="lnkView" style="color:pink" runat="server" CommandArgument='<%#Eval("UserID")%>' OnClick="lnk_OnClick">View </asp:LinkButton> 
         </ItemTemplate> 
        </asp:TemplateField> 
       </Columns> 
      </asp:GridView> 
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
      <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
      <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 

      </div> 
    </form> 

<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">&times;</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the Modal Body</p> 
     <p>Some other text...</p> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
    </div> 
    </div> 

</div> 

    <script> 


     var modal = document.getElementById('myModal'); 


     var btn = document.getElementById("lnkView"); 


     var span = document.getElementsByClassName("close")[0]; 


     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 


     span.onclick = function() { 
      modal.style.display = "none"; 
     } 



</script> 

Answer 1

を持っているものです。ポストバックはおそらく問題を引き起こしているものです。

は、私はあなたがそれをサーバ側を操作する必要がある場合は、あなたのItemTemplateに、または<asp:HyperLink>でプレーンなHTML <a>要素をしよう（だけでなく、クライアントのクリックイベントハンドラを発射）をお勧めします。

Answer 2

ブートストラップにはそのためのAPIがあります。イベントハンドラでプログラム的に開く必要はありません。ボタンにdata-toggleを追加してください。そして、そのボタンのhrefタグにモーダルIDを付けてください。あなたの閉じるボタンに同じ属性を添付し、それを閉じるために、そして、

<a style="color:pink" data-toggle="modal" href="#myModal">View</a> 

：：そして、通常のaタグにあなたのLinkButtonを変更GridViewの編集をクリックしたときに、[ポップアップブートストラップモデルの

<div id="myModal" class="modal"> 
    <!-- Modal content --> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <span class="close">&times;</span> 
     <h2>Modal Header</h2> 
    </div> 
    <div class="modal-body"> 
     <p>Some text in the Modal Body</p> 
     <p>Some other text...</p> 
    </div> 
    <div class="modal-footer"> 
     <h3>Modal Footer</h3> 
     <a class="btn btn-default prev pull-left" data-toggle="modal" href="#myModal">Cancel</a> 
    </div> 
    </div> 
</div>