You must Sign In to post a response.
  • Category: .NET

    How to show popup image in asp.net

    I am displaying images with data list.when I click any image it should show popup image and its details from database.
  • #762578

    Hello Shaik Hussain,

    You can refer the below code :

    HTML Markup :

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <style type ="text/css">
    .modalBackground
    {
    background-color:silver;
    filter: alpha(opacity=60);
    opacity: 0.6;
    }

    .modalPopup
    {
    background-color:White;
    border: 1px solid #4C3C1B;
    padding: 5px;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <table class="style1">
    <tr>
    <td class = "style2">
    Name :</td>
    <td>
     <asp:TextBox ID="txtName" CssClass = "style3" runat="server" BorderStyle="Solid"></asp:TextBox> <asp:RequiredFieldValidator
    ID="RequiredFieldValidator1" runat="server"
    ErrorMessage="Please enter your name" Font-Bold="True" Font-Names="Segoe UI"
    Font-Size="Small" ValidationGroup="SubmitInfo" ControlToValidate="txtName"></asp:RequiredFieldValidator>
    </td>
    </tr>
    <tr>
    <td class = "style2">
    Designation :</td>
    <td>
     <asp:TextBox ID="txtDesignation" CssClass = "style3" runat="server" BorderStyle="Solid"></asp:TextBox> <asp:RequiredFieldValidator
    ID="RequiredFieldValidator2" runat="server"
    ErrorMessage="Please enter your designation" Font-Bold="True"
    Font-Names="Segoe UI" Font-Size="Small" ValidationGroup="SubmitInfo"
    ControlToValidate="txtDesignation"></asp:RequiredFieldValidator>
    </td>
    </tr>
    <tr>
    <td class = "style2">
    Photo Identity :</td>
    <td>
     <asp:FileUpload ID="FileUpload1" runat="server" CssClass = "style3" /><br /> 
    <asp:RegularExpressionValidator
    ID="RegularExpressionValidator1" runat="server"
    ErrorMessage="Invalid image type" Font-Bold="True"
    Font-Names="Segoe UI" Font-Size="Small"
    ValidationExpression = "(.*\.([Jj][Pp][Gg])|.*\.([Jj][Pp][Ee][Gg])|.*\.([pP][nN][gG])$)"
    ControlToValidate="FileUpload1"></asp:RegularExpressionValidator>
    </td>
    </tr>
    <tr>
    <td class = "style2">
     </td>
    <td>
     <asp:Button ID="ButtonUpload" CssClass = "style3" runat="server"
    Text="Upload data" onclick="ButtonUpload_Click" ValidationGroup="SubmitInfo" /></td>
    </tr>
    </table>
    <br /><br />
    <asp:DataList ID="DataList1" runat="server" CellPadding="4" DataKeyField="ID" ForeColor="#333333" GridLines="Both">
    <AlternatingItemStyle BackColor="White" />
    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />
    <ItemTemplate>
    <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' Visible="false"/>
    <br />
    Photo:
    <asp:ImageButton ID="imgEmp" runat="server" Width="100px" Height="120px" ImageUrl='<%# Eval("Photo_Path") %>' OnClick="imgEmp_Click"/>
    <br />
    <br />
    </ItemTemplate>
    <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
    </asp:DataList>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" BackgroundCssClass="modalBackground" Enabled="true" PopupControlID="Panel1" Drag="false"></cc1:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Font-Names="Segoe UI">
    <asp:GridView ID="GridView1" runat="server" CellPadding="4" EmptyDataText="No data available" ForeColor="#333333">
    <AlternatingRowStyle BackColor="White" />
    <EditRowStyle BackColor="#7C6F57" />
    <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#E3EAEB" />
    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F8FAFA" />
    <SortedAscendingHeaderStyle BackColor="#246B61" />
    <SortedDescendingCellStyle BackColor="#D4DFE1" />
    <SortedDescendingHeaderStyle BackColor="#15524A" />
    </asp:GridView>
    <br />
    <asp:Button ID="ButtonClose" runat="server" Text="Close" OnClick="ButtonClose_Click"/>
    </asp:Panel>
    </div>
    </form>
    </body>
    </html>


    Code - behind (C#) :

    protected void Page_Load(object sender, EventArgs e)
    {
    if(!IsPostBack)
    BindDataList();
    }

    private void closepopup()
    {
    ModalPopupExtender1.Hide();
    }

    public void BindDataList()
    {
    SqlConnection con1 = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");
    DataSet ds = new DataSet();
    con1.Open();
    string cmdstr = "Select ID, Photo_Path from MemberDetails";
    SqlCommand cmd = new SqlCommand(cmdstr, con1);
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    adp.Fill(ds);
    DataList1.DataSource = ds.Tables[0];
    DataList1.DataBind();
    con1.Close();
    }

    protected void ButtonUpload_Click(object sender, EventArgs e)
    {
    SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");

    string filePath = FileUpload1.PostedFile.FileName;
    string filename = Path.GetFileName(filePath);
    Stream fs = FileUpload1.PostedFile.InputStream;
    BinaryReader br = new BinaryReader(fs);
    Byte[] bytes = br.ReadBytes((Int32)fs.Length);
    con.Open();

    SqlCommand mycmd = con.CreateCommand();
    SqlTransaction dBupdate;
    dBupdate = con.BeginTransaction(IsolationLevel.Serializable);

    mycmd.Connection = con;
    mycmd.Transaction = dBupdate;

    try
    {
    //insert the data into database
    mycmd.CommandText = "INSERT INTO MemberDetails(Member_Name, Member_Designation, Photo_Path) VALUES (@Name, @Designation, @PhotoPath)";

    string fPath = FileUpload1.PostedFile.FileName;
    string fname = Path.GetFileName(filePath);
    string imgpath = "~/Member Photos/" + fname;

    mycmd.Parameters.Add("@Name", SqlDbType.VarChar).Value = txtName.Text;
    mycmd.Parameters.Add("@Designation", SqlDbType.VarChar).Value = txtDesignation.Text;
    mycmd.Parameters.Add("@PhotoPath", SqlDbType.NVarChar).Value = imgpath;
    mycmd.ExecuteNonQuery();
    FileUpload1.SaveAs(Server.MapPath("~/Member Photos/" + imgpath));
    txtName.Text = "";
    txtDesignation.Text = "";
    dBupdate.Commit();

    //saving image to server location
    con.Close();
    txtName.Focus();

    BindDataList();
    }
    catch (Exception ex)
    {
    Response.Write("<script>alert('" + Server.HtmlEncode(ex.Message) + "')</script>");
    dBupdate.Rollback();
    }
    finally
    {
    con.Close();
    }
    }

    protected void ButtonClose_Click(object sender, EventArgs e)
    {
    closepopup();
    }

    protected void imgEmp_Click(object sender, ImageClickEventArgs e)
    {
    try
    {
    ImageButton btn = (ImageButton)sender;
    DataListItem item = (DataListItem)btn.NamingContainer;
    Label lblId = (Label)item.FindControl("IDLabel");

    SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|Database1.mdf;Integrated Security=True");
    con.Open();
    DataTable dt = new DataTable();
    SqlDataAdapter sda = new SqlDataAdapter("SELECT ID, Member_Name AS 'Name', Member_Designation AS 'Designation' FROM MemberDetails WHERE ID = '" + lblId.Text + "'", con);
    sda.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    con.Close();
    this.ModalPopupExtender1.Show();
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    }


    See the attached image. It's an output of this code.


    Hope this is the exact requirement you have.


    Regards,
    Nirav Lalan
    DNS Gold Member
    "Failure is the path of least persistence"

    Delete Attachment

  • #762608
    Hi Nirav.

    Well done. You did great.
    I think you met his requirement.

    Sridhar Thota.
    Editor: DNS Forum.

  • #762664
    Hello Sridhar,

    Thank you so much. Your words sounds great and feeling proud.

    Regards,
    Nirav Lalan
    DNS Gold Member
    "Failure is the path of least persistence"


Sign In to post your comments