Question

我有一个网格，从数据库中检索记录。作为我网格的一部分，我有一个View按钮。当我点击查看链接按钮时，我想要弹出一个将在表单中显示记录的弹出窗口。

我的问题是，当我点击查看链接按钮时，弹出模式不会打开。

这是我到目前为止所拥有的

    <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

LinkButton控件通过javascript导致回发，随后是服务器端点击事件。回发可能是造成问题的原因。

我建议您在ItemTemplate中尝试纯HTML <a>元素，或者<asp:HyperLink>如果您需要在服务器端操作它（以及触发客户端点击事件处理程序）。

Answer 2

Bootstrap有一个api。您不需要使用事件处理程序以编程方式打开它。将data-toggle添加到按钮。然后将模态ID附加到该按钮的href标记。并且，将您的LinkButton更改为常规a代码：

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

然后，要关闭它，请将相同的属性附加到关闭按钮：

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

GridView中的“查看”按钮上的弹出模式

2 个答案: