Click here to Skip to main content
15,886,258 members
Articles / Web Development / ASP.NET

Display/Store and Retrieve Image Data from Database to Gridview, and also on Mouse Over

Rate me:
Please Sign up or sign in to vote.
4.44/5 (21 votes)
15 Oct 2011CPOL4 min read 127.9K   9.9K   50  
How to Display/Store and Retrieve Image Data from Database to Gridview, and also on mouse over
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplayRecord.aspx.cs" Inherits="DisplayRecord"
    EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UsersControl/Loader.ascx" TagName="Loader" TagPrefix="uc2" %>
<%@ Register Src="~/UsersControl/UserAccountUC.ascx" TagName="UserAccountUC" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="Stylesheet" type="text/css" href="css/XPStyle.css" />
    <style type="text/css">
        .AlgemBackground
        {
            background-color: #000000;
            opacity: 0.75;
            filter: alpha(opacity=70);
        }
    </style>
</head>

<script type="text/javascript">

    function ShowModal() {
        var modalPopupBehavior = $find('loader');

        modalPopupBehavior.updated();
        return true;
    }
       
</script>

<body class="bg">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <cc1:ModalPopupExtender runat="server" ID="mpeLoader" BehaviorID="loader" TargetControlID="hfloader"
            PopupControlID="panelLoading" BackgroundCssClass="modalBackground" DropShadow="False">
        </cc1:ModalPopupExtender>
        <asp:Panel runat="server" ID="panelLoading">
            <uc2:Loader ID="ucLoader" runat="server" />
        </asp:Panel>
        <asp:Button runat="server" ID="hfloader" Style="display: none" />
        <table width="100%">
            <tr align="center">
                <td>
                    <h2>
                        User's Maintenance
                    </h2>
                </td>
            </tr>
            <tr align="center">
                <td>
                    <asp:UpdatePanel ID="upUserGrid" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
                                OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="3" OnRowCommand="GridView1_RowCommand"
                                EmptyDataText="*** No Record ***">
                                <EmptyDataRowStyle ForeColor="#CC3300" />
                                <Columns>
                                    <asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Delete">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="gImgBtnDelete" runat="server" ToolTip="Delete" OnClick="gImgBtnDelete_Click"
                                                OnClientClick="return confirm('Are you sure you want to delete this records?');"
                                                ImageUrl="~/Images/btn_delete.gif" />
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Center" />
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="UserID" HeaderText="User ID" InsertVisible="False" ReadOnly="True" />
                                    <asp:BoundField DataField="Username" HeaderText="User Name" />
                                    <asp:BoundField DataField="Password" HeaderText="Password" ItemStyle-ForeColor="Blue">
                                        <ItemStyle ForeColor="Blue" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="LastName" HeaderText="LastName" />
                                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                                    <asp:BoundField DataField="MiddleName" HeaderText="MiddleName" />
                                    <asp:BoundField DataField="WorksiteCode" HeaderText="WorksiteCode" Visible="false" />
                                    <asp:BoundField DataField="AccessLevel" HeaderText="AccessLevel" />
                                    <asp:BoundField DataField="Active" HeaderText="Active" />
                                    <asp:BoundField DataField="DateCreated" HeaderText="DateCreated" />
                                    <asp:BoundField DataField="DateUpdated" HeaderText="DateUpdated" />
                                    <asp:BoundField DataField="Worksitedesc" HeaderText="Worksitedesc" Visible="false" />
                                    <asp:BoundField DataField="Username" HeaderText="User Name" />
                                    <asp:TemplateField HeaderText="Image" ItemStyle-HorizontalAlign="Justify" ItemStyle-VerticalAlign="Middle">
                                        <ItemTemplate>
                                            <a href='PhotoDetail.aspx?id=<%# Eval("UserID") %>'>
                                                <img src='<%# "ShowImage.ashx?Id=" + Eval("UserID") %>' style="border: 4px solid white"
                                                    class="" alt='Deleted Photo Album Number <%# Eval("Picture") %>' /></a>
                                        </ItemTemplate>
                                        <ItemStyle HorizontalAlign="Justify" VerticalAlign="Middle"></ItemStyle>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        <table width="100%">
            <tr align="center">
                <td>
                    <asp:Button ID="btnAddNew" runat="server" Text="Add New" OnClick="btnAddNew_Click"
                        OnClientClick="return ShowModal();" />
                    <asp:Button ID="btnBack" runat="server" Text="Back" OnClick="btnBack_Click" />
                </td>
            </tr>
        </table>
        <cc1:ModalPopupExtender runat="server" ID="mpeUserAccountUC" TargetControlID="hfPopAddNew"
            PopupControlID="pnlUserAccountUC" BackgroundCssClass="AlgemBackground" BehaviorID="mpeBehavior3"
            DropShadow="false" PopupDragHandleControlID="pnlUserAccountUC">
        </cc1:ModalPopupExtender>
        <asp:Panel runat="server" ID="pnlUserAccountUC" Style="display: none; background-color: White;"
            Width="70%">
            <uc3:UserAccountUC runat="server" ID="ucUserAccountUC" />
        </asp:Panel>
        <asp:Button runat="server" ID="hfPopAddNew" Style="display: none" />
    </div>
    <table>
        <tr>
            <td>
                <asp:HiddenField ID="hfKeyId" runat="server" />
                <asp:HiddenField ID="hfPageIndex" runat="server" />
                <asp:HiddenField ID="hfAddNew" runat="server" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) ***
Philippines Philippines
MCTS - Microsoft Certified Technology Specialist.
An Accountant.
Had been developed Payroll Accounting System Application
Live in: Quezon City, Metro Manila Philippines
Could reached at email address: ag_mojedo@live.com

Comments and Discussions