Открыто prettyPhoto popup с страницей aspx внутри кнопки GridView нажмите

Question

На данный момент у меня есть страница aspx с сеткой на ней. Я хотел бы добавить всплывающее окно prettyPhoto, которое появляется при нажатии кнопки в gridview. Всплывающее окно будет содержать информацию о выбранной строке. Мой сетчатый сет выглядит так:

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

Любые советы или рекомендации были бы действительно полезными! Я смотрел онлайн и, похоже, ничего не нашел.

Answer 1

Выполнение всплывающего окна из сетки является сложным делом. Действие выбора строки вызывает обратную передачу, которая проигрывает, пытаясь управлять всплывающим кодом на стороне клиента. Вам нужно сделать несколько обручей, чтобы всплывающее окно появилось после завершения обратной передачи. Но вызывая обратный вид поражений, цель использования всплывающего окна для начала.

Таким образом, один из способов справиться с этим - убедиться, что вся подробная информация доступна на начальном проходе. Вы можете сделать это, вставив DetailsView (с собственным источником данных, который заполняется ключом из текущей строки) в скрытом div, встроенном в новое или существующее поле шаблона в текущем GridView.

Или, если вы в порядке с обратной передачей, просто бросьте скрытый div, содержащий DetailsView на текущей странице ниже всего остального, и просто разработайте логику, чтобы отобразить теперь заполненный DV после завершения постов.

Answer 2

Я использовал модем 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 
})