Show employee details with thumbnail image of employee in modal popup extender varbinary

Question

 <asp:GridView CssClass="table table-bordered" ID="GridView1" runat="server" BackColor="White" OnRowCommand="GridView1_RowCommand" OnRowDeleting="GridView1_RowDeleting" OnRowDataBound="GridView1_RowDataBound" BorderColor="#CCCCCC" AutoGenerateColumns="false"
  BorderStyle="None" BorderWidth="1px" DataKeyNames="id">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <%#Container.DataItemIndex +1 %>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="id" HeaderText="Empid" />
    <asp:BoundField DataField="name" HeaderText="Name" />
    <asp:BoundField DataField="age" HeaderText="Age" />
    <asp:BoundField DataField="position" HeaderText="Position" />
    <asp:BoundField DataField="date" HeaderText="Date" />
    <asp:BoundField DataField="address" HeaderText="Address" />
    <asp:BoundField DataField="City" HeaderText="City" />
    <asp:BoundField DataField="state" HeaderText="State" />
    <asp:BoundField DataField="postalcode" HeaderText="Pin Code" />
    <asp:BoundField DataField="country" HeaderText="Country" />
    <asp:BoundField DataField="mobile" HeaderText="Mobile" />
    <asp:BoundField DataField="phone" HeaderText="Alternate Phone" />
    <asp:BoundField DataField="email" HeaderText="Email" />
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Image ID="Image1" runat="server" Visible='<%#Eval("profilepic")!=DBNull.Value%>' ImageUrl='<%#Eval("profilepic")!=DBNull.Value ? "data:Image/jpg;base64," + Convert.ToBase64String((byte[])Eval("profilepic")) : string.Empty%>' Height="50px" Width="50px"
        />
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField>
      <ItemTemplate>

        <asp:LinkButton ID="LinkButton4" runat="server" Text="Edit" OnClick="LinkButton4_Click" />
        <asp:ImageButton ID="ImageButton2" ImageUrl="~/images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px" />
        <asp:LinkButton ID="LinkButton2" runat="server" Text="View" CommandName="Select" CommandArgument="<%# Container.DataItemIndex %>" />
      </ItemTemplate>
      <EditItemTemplate>
        <asp:ImageButton ID="btnCancel" ImageUrl="~/images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px" />
        <asp:ImageButton ID="ImageButton3" ImageUrl="~/images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px" />
      </EditItemTemplate>

    </asp:TemplateField>

  </Columns>

  <FooterStyle BackColor="White" ForeColor="#000066"></FooterStyle>

  <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White"></HeaderStyle>

  <PagerStyle HorizontalAlign="Left" BackColor="White" ForeColor="#000066"></PagerStyle>

  <RowStyle ForeColor="#000066"></RowStyle>

  <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
  <SortedAscendingCellStyle BackColor="#F1F1F1"></SortedAscendingCellStyle>
  <SortedAscendingHeaderStyle BackColor="#007DBB"></SortedAscendingHeaderStyle>
  <SortedDescendingCellStyle BackColor="#CAC9C9">
  </SortedDescendingCellStyle>
  <SortedDescendingHeaderStyle BackColor="#00547E">
  </SortedDescendingHeaderStyle>
</asp:GridView>
<asp:Panel ID="Panel1" runat="server">
  <div class="header">
    Details
  </div>
  <table class="table">
    <tr>
      <td>
        <asp:Image ID="Image2" runat="server" />
      </td>
    </tr>
    <tr>
      <th>Age</th>
      <td>
        <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
      </td>
    </tr>
    <tr>
      <th>Address</th>
      <td>
        <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
      </td>
    </tr>
    <tr>
      <th>City</th>
      <td>
        <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
      </td>
    </tr>
    <tr>
      <th>State</th>
      <td>
        <asp:Label ID="Label6" runat="server" Text=""></asp:Label>
      </td>
    </tr>
    <tr>
      <th>Postal Code</th>
      <td>
        <asp:Label ID="Label7" runat="server" Text=""></asp:Label>
      </td>
    </tr>
    <tr>
      <th>Alternate Phone</th>
      <td>
        <asp:Label ID="Label11" runat="server" Text=""></asp:Label>
      </td>
    </tr>
  </table>

  <div class="footer" align="right">
    <asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
  </div>
</asp:Panel>

<asp:Button ID="buttonshowpop1" runat="server" Text="Button" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="buttonshowpop1" PopupControlID="Panel1" runat="server"></ajaxToolkit:ModalPopupExtender>

I want to display employee details in modal pop up extender ajax I have binary image saved in varbinary max through upload file in inserts employees in SQL Server database table. I have searched but cannot find related to this

Answer 1

You need one ModalPopupExtender for employee detail, then move the control to ItemTemplate. Then create a pop up panel DetailsPopUpPanel to show an enlarged version of the image with additional employee details. Finally wire up everything using properties. So when user clicks on ViewDetailsButton, the DetailsPopUpPanel comes up.

<ItemTemplate>
    <asp:ImageButton ID="ViewDetailsButton" Visible='<%#Eval("profilepic")!=DBNull.Value%>' runat="server" ImageUrl='<%#Eval("profilepic")!=DBNull.Value ? "data:Image/jpg;base64," + Convert.ToBase64String((byte[])Eval("profilepic")) : string.Empty%>' Width="100px" Height="100px" />
    <asp:Panel ID="DetailsPopUpPanel" runat="server" CssClass="modalPopup" align="center" Style="display: none">
        <asp:Image ImageUrl='<%#Eval("profilepic")!=DBNull.Value ? "data:Image/jpg;base64," + Convert.ToBase64String((byte[])Eval("profilepic")) : string.Empty%>' width="800" height="400" runat="server" />
        <div style="text-align:center;">
        <asp:ImageButton ID="ClosePopUpPanel" runat="server" ImageUrl="~/Images/x.png" Width="25px" />
            </div>
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender TargetControlID="ViewDetailsButton" PopupControlID='DetailsPopUpPanel' CancelControlID="ClosePopUpPanel" runat="server">
    </ajaxToolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>