打开漂亮的照片弹出窗口，其中有 aspx 页面在网格视图按钮单击

本文关键字：aspx 网格 单击 按钮 视图 漂亮 照片 窗口 | 更新日期: 2023-09-27 18:36:44

目前我有一个带有网格视图的aspx页面。我想添加一个漂亮的照片弹出窗口，该弹出窗口出现在网格视图中的按钮单击上。弹出窗口将包含所选行的详细信息。我的网格视图如下所示： 

  <asp:GridView ID="gvBacklog" runat="server" AutoGenerateColumns="false" DataKeyNames="BacklogID" CssClass="table table-striped table-bordered table-condensed table-responsive" DataSourceID="ldsBacklog" AllowPaging="true" AllowSorting="true">
                    <Columns>
                        <asp:BoundField DataField="BacklogID" HeaderText="Backlog ID" SortExpression="BacklogID" />
                        <asp:TemplateField HeaderText="User Story" SortExpression="Story.StoryName">
                            <ItemTemplate>
                                <%#Eval("Story.StoryName") %>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <itemtemplate>
                                    <asp:TextBox Id="txtStoryName" runat="server" Text='<%#Bind("Story.StoryName")%>'></asp:TextBox>
                                </itemtemplate>
                            </EditItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Description" SortExpression="Story.StoryDesc">
                            <ItemTemplate>
                                <%#Eval ("Story.StoryDesc") %>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <itemtemplate>
                                    <asp:TextBox Id="txtDesc" runat="server" Text='<%#Bind("Story.StoryDesc")%>'></asp:TextBox>
                                </itemtemplate>
                            </EditItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Story Points" SortExpression="Story.StoryPoints">
                            <ItemTemplate>
                                <%#Eval ("Story.StoryPoints") %>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlFibbonacci" runat="server" SelectedValue='<%#Bind("Story.StoryPoints")%>'>
                                    <asp:ListItem>0</asp:ListItem>
                                    <asp:ListItem>1</asp:ListItem>
                                    <asp:ListItem>2</asp:ListItem>
                                    <asp:ListItem>3</asp:ListItem>
                                    <asp:ListItem>5</asp:ListItem>
                                    <asp:ListItem>8</asp:ListItem>
                                    <asp:ListItem>13</asp:ListItem>
                                    <asp:ListItem>20</asp:ListItem>
                                    <asp:ListItem>40</asp:ListItem>
                                    <asp:ListItem>100</asp:ListItem>
                                </asp:DropDownList>
                            </EditItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Size" SortExpression="Story.Size">
                            <ItemTemplate>
                                <%#Eval ("Story.Size") %>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="WSJF Score" SortExpression="Story.WSJFScore">
                            <ItemTemplate>
                                <%#Eval ("Story.WSJFScore") %>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Sprint" SortExpression="Sprint.SprintNumber">
                            <ItemTemplate>
                                <%#Eval("Sprint.SprintNumber") %>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:DropDownList ID="ddlSprint" DataSourceID="ldsSprint" DataValueField="SprintNumber" SelectedValue='<%#Bind("Sprint.SprintNumber") %>' runat="server"></asp:DropDownList>
                            </EditItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Added By" SortExpression="User.Username">
                            <ItemTemplate>
                                <%#Eval ("User.Username") %>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lbEdit" runat="server" CssClass="btn btn-default">
                                    <span class="glyphicon glyphicon-pencil"></span>
                                </asp:LinkButton>
                                <asp:LinkButton ID="lbDelete" runat="server" CssClass="btn btn-default" CommandName="Delete">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

任何提示或建议都会非常有帮助！我在网上看了一下，似乎什么也找不到。

打开漂亮的照片弹出窗口，其中有 aspx 页面在网格视图按钮单击

从网格视图执行弹出窗口是一项棘手的工作。选择行的操作会导致回发，这会严重破坏尝试管理客户端弹出代码。 您必须执行一些箍跳跃才能在回发完成后显示弹出窗口。但是导致回发会破坏使用弹出窗口的目的。

因此，处理此问题的一种方法是确保所有详细信息在初始传递中可用。 为此，可以将 DetailsView（其自己的数据源使用当前行中的键填充）嵌入到当前 GridView 的新模板或现有模板字段中的隐藏div 中。

或者，如果您对回发感到满意，只需在其他所有内容下方的当前页面上抛出一个包含 DetailsView 的隐藏div，然后找出在帖子完成后显示现在填充的 DV 的逻辑。

我使用Bootstrap模式来实现该功能。 

<div class="modal fade">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->


$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
})
相关文章：