Asp.Net: April 2013

Wednesday, 24 April 2013

how to resize image without losing image quality or how to reduce image file size without losing quality using asp.net c#

how to resize image without losing image quality or how to reduce image file size without losing quality using asp.net c#

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>Uploaded Image</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btnsave" runat="server" Text="Upload" onclick="btnsave_Click" />
</div>
<div>
<asp:DataList ID="dtlist" runat="server" RepeatColumns="3" CellPadding="5">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server" />
<br />
<asp:HyperLink ID="HyperLink1" Text='<%# Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/Images/{0}") %>' runat="server"/>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</div>
</form>
</body>
</html>

Aspx.cs

using System;
using System.Collections;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindDataList();
}
}
protected void BindDataList()
{
DirectoryInfo dir = new DirectoryInfo(MapPath("Images"));
FileInfo[] files = dir.GetFiles();
ArrayList listItems = new ArrayList();
foreach (FileInfo info in files)
{
listItems.Add(info);
}
dtlist.DataSource = listItems;
dtlist.DataBind();

}
protected void btnsave_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileupload1.PostedFile.FileName);
string targetPath = Server.MapPath("Images/" + filename);
Stream strm = fileupload1.PostedFile.InputStream;
var targetFile = targetPath;
GenerateThumbnails(0.5, strm, targetFile);
BindDataList();
}
private void GenerateThumbnails(double scaleFactor, Stream sourcePath, string targetPath)
{
using (var image = Image.FromStream(sourcePath))
{
var newWidth = (int)(image.Width * scaleFactor);
var newHeight = (int)(image.Height * scaleFactor);
var thumbnailImg = new Bitmap(newWidth, newHeight);
var thumbGraph = Graphics.FromImage(thumbnailImg);
thumbGraph.CompositingQuality = CompositingQuality.HighQuality;
thumbGraph.SmoothingMode = SmoothingMode.HighQuality;
thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;
var imageRectangle = new Rectangle(0, 0, newWidth, newHeight);
thumbGraph.DrawImage(image, imageRectangle);
thumbnailImg.Save(targetPath, image.RawFormat);
}
}
}

Demo:

how to resize image without losing image quality or how to reduce image file size without losing quality using asp.net c#

Download Demo:

how to save images into folder and images path in database and display images from folder in gridview based on images path in database using asp.net c#

how to save images into folder and images path in database and display images from folder in gridview based on images path in database using asp.net c#

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Save Images </title>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileuploadimages" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div>
<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false" DataSourceID="sqldataImages" CssClass="Gridview" HeaderStyle-BackColor="#61A6F8" >
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Image Name" />
<asp:ImageField HeaderText="Image" DataImageUrlField="Path" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sqldataImages" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"
SelectCommand="select * from FileInformation" >
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

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;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
fileuploadimages.SaveAs(Server.MapPath("Images/"+filename));
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("Insert into FileInformation(Name,Path) values(@ImageName,@ImagePath)", con);
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@ImagePath", "Images/" + filename);
cmd.ExecuteNonQuery();
con.Close();
Response.Redirect("~/Default.aspx");
}
}

Demo:

how to save images into folder and images path in database and display images from folder in gridview based on images path in database using asp.net c#

Download Demo:

How to save/upload files in folder and download files from folder in asp.net

How to save/upload files in folder and download files from folder in asp.net

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Save and Download Files from file system</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }

</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileUpload1" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
</div>
<div>
<asp:GridView ID="gvDetails" CssClass="Gridview" runat="server" AutoGenerateColumns="false" DataKeyNames="Path">
<HeaderStyle BackColor="#df5015" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="Path">
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" runat="server" Text="Download" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

.Aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
private SqlConnection con = new SqlConnection("Data Source=SURANI-PC\\SA;Initial Catalog=demo;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridviewData();
}
}
private void BindGridviewData()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from FileInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
gvDetails.DataSource = ds;
gvDetails.DataBind();
}
protected void btnUpload_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileUpload1.PostedFile.FileName);
fileUpload1.SaveAs(Server.MapPath("Files/"+filename));
con.Open();
SqlCommand cmd = new SqlCommand("insert into FileInformation(Name,Path) values(@Name,@Path)", con);
cmd.Parameters.AddWithValue("@Name",filename );
cmd.Parameters.AddWithValue("@Path", "Files/"+filename );
cmd.ExecuteNonQuery();
con.Close();
BindGridviewData();
}
protected void lnkDownload_Click(object sender, EventArgs e)
{
LinkButton lnkbtn = sender as LinkButton;
GridViewRow gvrow = lnkbtn.NamingContainer as GridViewRow;
string filePath = gvDetails.DataKeys[gvrow.RowIndex].Value.ToString();
Response.ContentType = "image/jpg";
Response.AddHeader("Content-Disposition", "attachment;filename=\"" + filePath + "\"");
Response.TransmitFile(Server.MapPath(filePath));
Response.End();
}
}

Demo:

How to save/upload files in folder and download files from folder in asp.net

Download Demo:

How to Upload Files to Database in Asp.net Download Files From Database in SQL Server

How to Upload Files to Database in Asp.net Download Files From Database in SQL Server

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1">
<title>Upload Word Files to Database and Download files from database in asp.net
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileUpload1" runat="server" /><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />
</div>
<div>
<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="FileName" />
<asp:TemplateField HeaderText="FilePath">
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" runat="server" Text="Download" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>

.Aspx.cs File

using System;
using System.Data.SqlClient;
using System.IO;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
string strCon = "Data Source=SURANI-PC\\SA;Initial Catalog=demo;Integrated Security=True";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
private void BindGridviewData()
{
using (SqlConnection con=new SqlConnection(strCon))
{
using (SqlCommand cmd=new SqlCommand())
{
cmd.CommandText = "select * from FileInformation";
cmd.Connection = con;
con.Open();
gvDetails.DataSource = cmd.ExecuteReader();
gvDetails.DataBind();
con.Close();
}
}
}
// Save files to Folder and files path in database
protected void btnUpload_Click(object sender, EventArgs e)
{
string filename = Path.GetFileName(fileUpload1.PostedFile.FileName);
Stream str = fileUpload1.PostedFile.InputStream;
BinaryReader br = new BinaryReader(str);
Byte[] size = br.ReadBytes((int) str.Length);
using (SqlConnection con=new SqlConnection(strCon))
{
using (SqlCommand cmd=new SqlCommand())
{
cmd.CommandText = "insert into FileInformation(Name,Type,data) values(@Name,@Type,@Data)";
cmd.Parameters.AddWithValue("@Name", filename);
cmd.Parameters.AddWithValue("@Type", "application/word");
cmd.Parameters.AddWithValue("@Data", size);
cmd.Connection =con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
BindGridviewData();
}
}
}
protected void lnkDownload_Click(object sender, EventArgs e)
{
LinkButton lnkbtn = sender as LinkButton;
GridViewRow gvrow = lnkbtn.NamingContainer as GridViewRow;
int fileid = Convert.ToInt32(gvDetails.DataKeys[gvrow.RowIndex].Value.ToString());
using (SqlConnection con=new SqlConnection(strCon))
{
using (SqlCommand cmd=new SqlCommand())
{
cmd.CommandText = "select Name, Type, data from FileInformation where Id=@Id";
cmd.Parameters.AddWithValue("@id", fileid);
cmd.Connection = con;
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if(dr.Read())
{
Response.ContentType = dr["Type"].ToString();
Response.AddHeader("Content-Disposition", "attachment;filename=\"" +dr["Name"] + "\"");
Response.BinaryWrite((byte[])dr["data"]);
Response.End();
}
}
}
}
}

VB File

Imports System.Data.SqlClient
Imports System.IO
Imports System.Web.UI.WebControls
Partial Class VBCode
Inherits System.Web.UI.Page
Private strCon As String = "Data Source=SURANI-PC\SA;Initial Catalog=demo;Integrated Security=True"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGridviewData()
End If
End Sub
Private Sub BindGridviewData()
Using con As New SqlConnection(strCon)
Using cmd As New SqlCommand()
cmd.CommandText = "select * from FileInformation"
cmd.Connection = con
con.Open()
gvDetails.DataSource = cmd.ExecuteReader()
gvDetails.DataBind()
con.Close()
End Using
End Using
End Sub
Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim filename As String = Path.GetFileName(fileUpload1.PostedFile.FileName)
Dim str As Stream = fileUpload1.PostedFile.InputStream
Dim br As New BinaryReader(str)
Dim size As [Byte]() = br.ReadBytes(CInt(str.Length))
Using con As New SqlConnection(strCon)
Using cmd As New SqlCommand()
cmd.CommandText = "insert into FileInformation(Name,Type,Data) values(@Name,@Type,@Data)"
cmd.Parameters.AddWithValue("@Name", filename)
cmd.Parameters.AddWithValue("@Type", "application/word")
cmd.Parameters.AddWithValue("@Data", size)
cmd.Connection = con
con.Open()
cmd.ExecuteNonQuery()
con.Close()
BindGridviewData()
End Using
End Using
End Sub
Protected Sub lnkDownload_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim lnkbtn As LinkButton = TryCast(sender, LinkButton)
Dim gvrow As GridViewRow = TryCast(lnkbtn.NamingContainer, GridViewRow)
Dim fileid As Integer = Convert.ToInt32(gvDetails.DataKeys(gvrow.RowIndex).Value.ToString())
Using con As New SqlConnection(strCon)
Using cmd As New SqlCommand()
cmd.CommandText = "select Name, Type, data from FileInformation where Id=@Id"
cmd.Parameters.AddWithValue("@id", fileid)
cmd.Connection = con
con.Open()
Dim dr As SqlDataReader = cmd.ExecuteReader()
If dr.Read() Then
Response.ContentType = dr("Type").ToString()
Response.AddHeader("Content-Disposition", "attachment;filename=""" & Convert.ToString(dr("Name")) & """")
Response.BinaryWrite(DirectCast(dr("data"), Byte()))
Response.[End]()
End If
End Using
End Using
End Sub
End Class

Demo:

How to Upload Files to Database in Asp.net Download Files From Database in SQL Server

Download Demo:

How To Use JQuery Datepicker Example or jQuery Calendar Example with asp.net textbox c#

JQuery Datepicker Example or jQuery Calendar Example with asp.net textbox c#

Program:

.Aspx File:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!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>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker();
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>

<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>

.Aspx.cs File

using System;
using System.Collections;
using System.Configuration;
using System.Data;
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;
using System.Xml.Linq;

public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Live Demo:

JQuery Datepicker Example or jQuery Calendar Example with asp.net textbox c#

Download Code:

How to Show multiple months in datepicker calendar control using jQuery in c#

How to Show multiple months in datepicker calendar control using jQuery in c#

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarControlWithMultipleMonths.aspx.cs" Inherits="CalendarControlWithMultipleMonths" %>

<!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>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type = "text/javascript">
$(function() {
$("#txtDate").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>

.Aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
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;
using System.Xml.Linq;

public partial class CalendarControlWithMultipleMonths : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Demo:

How to Show multiple months in datepicker calendar control using jQuery in c#

Download Code:

How to Ajax ModalPopUpExtender Example to edit the gridview row values in c# and VB asp.net

How to Ajax ModalPopUpExtender Example to edit the gridview row values in c# and VB asp.net

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Untitled Page</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
z-index: 10000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:GridView runat="server" ID="gvdetails" DataKeyNames="ID" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25" onclick="imgbtn_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Designation" HeaderText="Designation" />
</Columns>
</asp:GridView>
<asp:Label ID="lblresult" runat="server"/>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px" style="display:none">
<table width="100%" style="border:Solid 3px #D55500; width:100%; height:100%" cellpadding="0" cellspacing="0">
<tr style="background-color:#D55500">
<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">User Details</td>
</tr>
<tr>
<td align="right" style=" width:45%">
ID:
</td>
<td>
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
Name:
</td>
<td>
<asp:Label ID="lblusername" runat="server"></asp:Label>
</td>
</tr>
<tr>
<tr>
<td align="right">
Designation:
</td>
<td>
<asp:TextBox ID="txtDesg" runat="server"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" onclick="btnUpdate_Click"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>

.Aspx.cs

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
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;
using System.Xml.Linq;
using AjaxControlToolkit;

// Made By Sizar Surani

public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindGridData();
}
}
protected void BindGridData()
{
con.Open();
SqlCommand cmd = new SqlCommand("Select * from Table_1", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
gvdetails.DataSource = dt;
gvdetails.DataBind();
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
con.Open();
SqlCommand cmd = new SqlCommand("update Table_1 set Name=@Name,Designation=@Designation where ID=@ID", con);
cmd.Parameters.AddWithValue("@Name", lblusername.Text);
cmd.Parameters.AddWithValue("@Designation", txtDesg.Text);
cmd.Parameters.AddWithValue("@ID", Convert.ToInt32(lblID.Text));
cmd.ExecuteNonQuery();
con.Close();
lblresult.Text = lblusername.Text + " Details Updated Successfully";
lblresult.ForeColor = Color.Green;
BindGridData();
}
protected void imgbtn_Click(object sender, ImageClickEventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString();
lblusername.Text = gvrow.Cells[1].Text;
txtDesg.Text = gvrow.Cells[2].Text;
this.ModalPopupExtender1.Show();
}
}

Demo:

How to Ajax ModalPopUpExtender Example to edit the gridview row values in c# and VB asp.net

Download:

How to Put confirmation box with yes/no button options using modal popup in c# and VB Asp.net

How to Put confirmation box with yes/no button options using modal popup in c# Asp.net

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
z-index: 10000;
}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }

</style>
<script language="javascript" type="text/javascript">
function closepopup() {
$find('ModalPopupExtender1').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview"
DataKeyNames="ID" AutoGenerateColumns="false">
<HeaderStyle BackColor="#df5015" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Designation" HeaderText="Designation" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" onclick="btnDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblresult" runat="server"/>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnNo" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">
<table width="100%" style="border:Solid 2px #D46900; width:100%; height:100%" cellpadding="0" cellspacing="0">
<tr style="background-image:url(Images/header.gif)">
<td style=" height:10%; color:White; font-weight:bold;padding:3px; font-size:larger; font-family:Calibri" align="Left">Confirm Box</td>
<td style=" color:White; font-weight:bold;padding:3px; font-size:larger" align="Right">
<a href = "javascript:void(0)" onclick = "closepopup()"><img src="Images/Close.gif" style="border :0px" align="right"/></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" style="padding:5px; font-family:Calibri">
<asp:Label ID="lblUser" runat="server"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
</td>
<td align="right" style="padding-right:15px">
<asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg"/>
<asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

.Aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("Data Source=SURANI-PC\\SA;Initial Catalog=demo;Integrated Security=True");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindUserDetails();
}
}
protected void BindUserDetails()
{
//connection open
con.Open();
//sql command to execute query from database
SqlCommand cmd = new SqlCommand("Select * from Table_1", con);
cmd.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
//Binding data to gridview
gvDetails.DataSource = ds;
gvDetails.DataBind();
con.Close();
}
protected void btnYes_Click(object sender, ImageClickEventArgs e)
{
//getting ID of particular row
int ID = Convert.ToInt32(Session["ID"]);
con.Open();
SqlCommand cmd = new SqlCommand("delete from Table_1 where ID=" + ID, con);
int result = cmd.ExecuteNonQuery();
con.Close();
if (result == 1)
{
lblresult.Text = Session["Name"] + " Details deleted successfully";
lblresult.ForeColor = Color.Green;
BindUserDetails();
}
}
protected void btnDelete_Click(object sender, ImageClickEventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
Session["ID"] = gvDetails.DataKeys[gvrow.RowIndex].Value.ToString();
Session["Name"] = gvrow.Cells[0].Text;
lblUser.Text = "Are you sure you want to delete " + Session["Name"] + " Details?";
ModalPopupExtender1.Show();
}
}

VB Code:

Imports System.Data
Imports System.Data.SqlClient
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Class VBCode
Inherits System.Web.UI.Page
Private con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then
BindUserDetails()
End If
End Sub
Protected Sub BindUserDetails()
'connection open
con.Open()
'sql command to execute query from database
Dim cmd As New SqlCommand("Select * from UserDetails", con)
cmd.ExecuteNonQuery()
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
'Binding data to gridview
gvDetails.DataSource = ds
gvDetails.DataBind()
con.Close()
End Sub
Protected Sub btnYes_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
'getting userid of particular row
Dim userid As Integer = Convert.ToInt32(Session("UserId"))
con.Open()
Dim cmd As New SqlCommand("delete from UserDetails where UserId=" & userid, con)
Dim result As Integer = cmd.ExecuteNonQuery()
con.Close()
If result = 1 Then
lblresult.Text = Convert.ToString(Session("UserName")) & " Details deleted successfully"
lblresult.ForeColor = Color.Green
BindUserDetails()
End If
End Sub
Protected Sub btnDelete_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
Dim btndetails As ImageButton = TryCast(sender, ImageButton)
Dim gvrow As GridViewRow = DirectCast(btndetails.NamingContainer, GridViewRow)
Session("UserId") = gvDetails.DataKeys(gvrow.RowIndex).Value.ToString()
Session("UserName") = gvrow.Cells(0).Text
lblUser.Text = "Are you sure you want to delete " & Convert.ToString(Session("UserName")) & " Details?"
ModalPopupExtender1.Show()
End Sub
End Class

Demo:

How to Put confirmation box with yes/no button options using modal popup in c# and VB Asp.net

Download:

How to use JQuery Custom Styles for Radio button, checkbox, dropdownlist and textbox in asp.net c#

How to use JQuery Custom Styles for Radio button, checkbox, dropdownlist and textbox in asp.net c#

Program:

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

<!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" xml:lang="en" lang="en">
<head>
<title>Demo</title>
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script>
<script language="javascript" type="text/javascript">
$(function() {
$('form').jqTransform({ imgPath: 'jqtransformplugin/img/' });
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
form{clear:both;}
</style>
</head>
<body>
<form id="Form1" runat="server" >
<table align="center">
<h2>Billing Information</h2>
<tr>
<td colspan="2">
<div style="border: 1px solid #CCCCCC; padding: 10px;">
<table>
<tr class="rowElem">
<td>First Name:</td>
<td><asp:TextBox ID="txtfname" runat="server"/></td>
</tr>
<tr class="rowElem">
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname" runat="server"/></td>
</tr>
<tr class="rowElem">
<td>Gender:</td>
<td>
<asp:RadioButtonList ID="rdbGender" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0" Text="Male"></asp:ListItem>
<asp:ListItem Value="1" Text="Female"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr class="rowElem">
<td>Languages:</td>
<td>
<asp:CheckBoxList ID="chklang" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0">Telugu</asp:ListItem>
<asp:ListItem Value="1">English</asp:ListItem>
<asp:ListItem Value="2">Hindi</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr class="rowElem">
<td>Email:</td>
<td><asp:TextBox ID="txtemail" runat="server" />
</td>
</tr>
<tr class="rowElem">
<td valign="top">Address:</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td>
</tr>
<tr class="rowElem">
<td>State:</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" >
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AL">Alabama </asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AZ">Arizona</asp:ListItem>
<asp:ListItem value="AR">Arkansas</asp:ListItem>
<asp:ListItem value="CA">California</asp:ListItem>
<asp:ListItem value="CO">Colorado</asp:ListItem>
<asp:ListItem value="CT">Connecticut</asp:ListItem>
<asp:ListItem value="DE">Delaware</asp:ListItem>
<asp:ListItem value="FL">Florida</asp:ListItem>
<asp:ListItem value="GA">Georgia</asp:ListItem>
<asp:ListItem value="HI">Hawaii</asp:ListItem>
<asp:ListItem value="ID">Idaho</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr class="rowElem">
<td>Zip:</td>
<td>
<asp:TextBox ID="txtZip" runat="server" />
</td>
</tr>
<tr class="rowElem">
<td>Credit Card Type:</td>
<td>
<asp:DropDownList ID="ddlCardType" runat="server" Width="180px" >
<asp:ListItem Value="">Choose Credit Card</asp:ListItem>
<asp:ListItem value="amex">American Express</asp:ListItem>
<asp:ListItem value="discover">Discover</asp:ListItem>
<asp:ListItem value="mastercard">MasterCard</asp:ListItem>
<asp:ListItem value="visa">Visa</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr class="rowElem">
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Aspx.cs

using System;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Demo:

How to use JQuery Custom Styles for Radio button, checkbox, dropdownlist and textbox in asp.net c#

Download Code:

how to install Ajax Control Toolkit in Visual Studio

how to install Ajax Control Toolkit in Visual Studio

If we want to use Ajax features in our application just follow the below steps to download and start using the Ajax Control Toolkit with Visual Studio:

1) First step is to download the latest version of the Ajax Control Toolkit from CodePlex whichever suits to your visual studio. If you are using Visual Studio 2008 then you should pick the version of the Ajax Control Toolkit for .NET 3.5. If you are using Visual Studio 2010 then you can use either the .NET 4 or .NET 3.5 versions of the Ajax Control Toolkit.

2) After download the required version of Ajax toolkit open the downloaded file and extract all the files.

3) After that open Visual Studio and create a new ASP.NET Web Forms project or website. Open Default.aspx page in the project or website.

4) Now open Toolbox in visual studio and create a new Toolbox tab by right-clicking the Toolbox and selecting Add Tab. Name the new tab Ajax Control Toolkit.

5) Right-click beneath the new tab and select the menu option Choose Items. Click the Browse button and browse to the folder where you extracted the Ajax Control Toolkit. Pick the AjaxControlToolkit.dll and click the OK button to close the Choose Toolbox Items dialog. After that if we check Toolbox under Ajax Toolkit tab we are able to see the controls like this.

Tuesday, 23 April 2013

How To Open Simple jQuery Modal POPUP Window Example in c# .Net

How To Open Simple jQuery Modal POPUP Window Example in c# .Net

Program :

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquery.aspx.cs" Inherits="jquery" %>

<!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>jquery damo</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function () {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Hi Myself Sizar Surani.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<div id='container' align="center">
<h2>
<a href='' class='click'><b>Click Here.....</b></a> </h2><br/>
</div>
</form>
</body>
</html>

.Aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class jquery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
}

Demo:

How To Open Simple jQuery Modal POPUP Window Example in c# .Net

How To Open YouTube Video in Modal POPUP Window Example using jQuery in c# .Net

How To Open YouTube Video in Modal POPUP Window Example using jQuery in c# .Net

Program :

.Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquery.aspx.cs" Inherits="jquery" %>

<!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>jquery damo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

/* video settings come here */
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '600',
videoId: 'OTXfyf6BqOs',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function () {
var overlay = jQuery('<div id="overlay"></div>');
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function () {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
-moz-opacity:0.7;
-khtml-opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;

}
.content p{
clear: both;
color: #555555;
font-size: 13px;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<div id='player'></div>
<p><a href='' class='close'>Close</a></p>
</div>
</div>
<div id='container' align="center">
<a href='' class='click'><b>Click Here to See Popup! </b></a> <br/>
</div>
</form>
</body>
</html>

.Aspx.cs File

Demo:

How To Open YouTube Video in Modal POPUP Window Example using jQuery in c# .Net

How to Show jQuery Modal POPUP Window on Page Load with Example in c#

How to Show jQuery Modal POPUP Window on Page Load with Example in c#

Program:

.Aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquery.aspx.cs" Inherits="jquery" %>

<!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>jquery damo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
color: #555555;
text-align: justify;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function () {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class='popup'>
<div class='cnt223'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Hi my Self sizar Surani.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
</form>
</body>
</html>

.Aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class jquery : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

Demo:

How to Show jQuery Modal POPUP Window on Page Load with Example in c#

insert images into database and how to retrieve and bind images to gridview using asp.net save and retrieve images from database using c# asp.net

insert images into database and how to retrieve and bind images to gridview using asp.net save and retrieve images from database using c# asp.net

Program:

.aspx file

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Inserting images into databse and displaying images with gridview</title>

<style type="text/css">

.Gridview

{

font-family:Verdana;

font-size:10pt;

font-weight:normal;

color:black;

width:500px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<table>

<tr>

<td>

Image Name:

</td>

<td>

<asp:TextBox ID="txtImageName" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

Upload Image:

</td>

<td>

<asp:FileUpload ID="fileuploadImage" runat="server" />

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="btnUpload" runat="server" Text="Upload" onclick="btnUpload_Click" />

</td>

</tr>

</table>

</div>

<div>

<asp:GridView ID="gvImages" CssClass="Gridview" runat="server" AutoGenerateColumns="False"

HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white">

<Columns>

<asp:BoundField HeaderText = "Image Name" DataField="imagename" />

<asp:TemplateField HeaderText="Image">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID=

"+ Eval("ImageID") %>' Height="150px" Width="150px"/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

.aspx.cs

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class addtocart : System.Web.UI.Page
{
string strcon = ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fileuploadImage.HasFile)
{
int length = fileuploadImage.PostedFile.ContentLength;
byte[] imgbyte = new byte[length];
HttpPostedFile img = fileuploadImage.PostedFile;
img.InputStream.Read(imgbyte, 0, length);
string imagename = txtImageName.Text;
SqlConnection connection = new SqlConnection(strcon);
connection.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO Image (ImageName,Image) VALUES (@imagename,@imagedata)", connection);
cmd.Parameters.Add("@imagename", SqlDbType.VarChar, 50).Value = imagename;
cmd.Parameters.Add("@imagedata", SqlDbType.Image).Value = imgbyte;
int count = cmd.ExecuteNonQuery();
connection.Close();
if (count == 1)
{
BindGridData();
txtImageName.Text = string.Empty;
ScriptManager.RegisterStartupScript(this, this.GetType(), "alertmessage",

"javascript:alert('" + imagename + " image inserted successfully')", true);
}
}
}
private void BindGridData()
{
SqlConnection connection = new SqlConnection(strcon);
SqlCommand command = new SqlCommand("SELECT imagename,ImageID from [Image]",

connection);
SqlDataAdapter daimages = new SqlDataAdapter(command);
DataTable dt = new DataTable();
daimages.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind();
gvImages.Attributes.Add("bordercolor", "black");
}

Now we need to add HTTPHandler file to our project to retrieve images from database because we save our images in binary format getting the binary format of data from database it’s easy but displaying is very difficult that’s why we will use HTTPHandler to solve this problem.

Right Click on your project add new HTTPHandler.ashx file and give name as ImageHandler.ashx and write the following code in page request method like this

HTTPHandler.ashx

string strcon = ConfigurationManager.AppSettings["ConnectionString"].ToString();public void ProcessRequest(HttpContext context)

{

string imageid = context.Request.QueryString["ImID"];

SqlConnection connection = new SqlConnection(strcon);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID=" + imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

context.Response.BinaryWrite((Byte[])dr[0]);

connection.Close();

context.Response.End();

}

web.config:

<connectionStrings>
<add name="dbconnection" connectionString="Data Source=SureshDasari;Integrated Security=true;
Initial Catalog=MySampleDB"/>
</connectionStrings>

Demo:

insert images into database and how to retrieve and bind images to gridview using asp.net save and retrieve images from database using asp.net

Pages

Wednesday, 24 April 2013

Tuesday, 23 April 2013