How to Upload image in GridView & Show Images with Popup effect in asp.net C#
I’m going to Show Gridview Images with Popup effect in asp.net C#.
1.First create:database table.then follow Default.aspx & Default.aspx.cs.
Default.aspx
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Gridview Images with Popup effect</title>
<styletype="text/css">
.Gridview
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
color: black;
}
.backgrnd
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.frontimg
{
display: none;
position: absolute;
top: 10%;
left: 20%;
width: 500px;
height: 279px;
padding: 0px;
border: 0pxsolid#a6c25c;
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
<scripttype="text/javascript">
function ShowImages() {
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block'
return false;
}
</script>
</head>
<body>
<formid="form1"runat="server">
<divalign="center">
<asp:FileUploadID="fileuploadimages"runat="server"/>
<br/>
<asp:ButtonID="btnSubmit"runat="server"Text="Submit"OnClick="btnSubmit_Click"/>
</div>
<divalign="center">
<asp:GridViewrunat="server"ID="gvImages"AutoGenerateColumns="false"CssClass="Gridview"
HeaderStyle-BackColor="#61A6F8">
<Columns>
<asp:BoundFieldDataField="ID"HeaderText="ID"/>
<asp:BoundFieldDataField="imageName"HeaderText="Image Name"/>
<asp:TemplateFieldHeaderText="Image">
<ItemTemplate>
<asp:ImageButtonID="imgbtn"runat="server"ImageUrl='<%#Eval("imagePath") %>'OnClick="imgbtn_Click"
Width="100"Height="100"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<divid="light"class="frontimg">
<tablecellpadding="0"cellspacing="0"border="0"style="background-color: #a6c25c;"
width="100%">
<tr>
<tdheight="16px">
<ahref="javascript:void(0)"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
<imgsrc="close.gif"style="border: 0px"width="13px"align="right"height="13px"/></a>
</td>
</tr>
<tr>
<tdstyle="padding-left: 16px; padding-right: 16px; padding-bottom: 16px">
<tablealign="center"border="0"cellpadding="0"cellspacing="0"style="background-color: #fff"
width="100%">
<tr>
<tdalign="center"colspan="2"class="">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<tdalign="center">
<asp:ImageID="imglightbox"runat="server"Height="200"Width="200"/>
</td>
</tr>
<tr>
<tdheight="10px">
</td>
</tr>
</table>
</td>
</tr>
</table>
<divalign="center"class=" headertext">
<asp:LabelID="txtlbl"runat="server"></asp:Label></div>
</div>
<divid="fade"class="backgrnd">
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
publicpartialclass_Default : System.Web.UI.Page
{
SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["stringConnection"].ToString());
SqlDataAdapter da;
SqlDataReader dr;
SqlCommand cmd;
DataTable dt = newDataTable();
protectedvoid Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
String qry = "select * from image_tbl";
con.Open();
da = newSqlDataAdapter(qry,con);
da.Fill(dt);
if(dt.Rows.Count>0)
{
gvImages.DataSource = dt;
gvImages.DataBind();
}
con.Close();
}
}
//uploading image in Gridview///
protectedvoid btnSubmit_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
fileuploadimages.SaveAs(Server.MapPath("~/Images/" + filename));
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlCommand cmd = newSqlCommand("Insert into image_tbl(imageName,imagePath) values(@ImageName,@ImagePath)", con);
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@ImagePath", "~/Images/" + filename);
cmd.ExecuteNonQuery();
con.Close();
Response.Redirect("Default.aspx");
}
//Show image in Popup window////
protectedvoid imgbtn_Click(object sender, EventArgs e)
{
ImageButton imgbtn = sender asImageButton;
GridViewRow gvrow = imgbtn.NamingContainer asGridViewRow;
ImageButton imgbtntxt =(ImageButton)gvrow.FindControl("imgbtn");
imglightbox.ImageUrl = imgbtn.ImageUrl;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "javascript:ShowImages();", true);
}
}
Screenshots:
Download Source Code : Click Here
written by- Chandana Das
No comments:
Post a Comment