Onething you should remember that, if you use any Ajax toolkit controls in your web page then you must add ScriptManager tag.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Create a Web Form named as " HoverMenuExtender .aspx".
Copy and paste the
following code in your HoverMenuExtender .aspx section.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 36%;
}.style3
{
width: 43px;
}.style4
{
width: 805px;
}
</style>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<table class="style1">
<tr>
<td class="style4">
<asp:Label ID="lblID" runat="server" Text="Product_ID"></asp:Label>
</td>
<td class="style3">
<asp:TextBox ID="txtID" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">
<asp:Label ID="lblName" runat="server" Text="Product_Name"></asp:Label>
</td>
<td class="style3">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">
<asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>
</td>
<td class="style3">
<asp:TextBox ID="txtAmount" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td class="style4">
<asp:Label ID="lblPicture" runat="server" Text="Picture"></asp:Label>
</td>
<td class="style3">
<asp:FileUpload ID="FupPicture" runat="server" />
</td>
</tr>
<tr>
<td class="style4">
</td>
<td class="style3">
<asp:Button ID="btnSave" runat="server" Text="Save"onclick="btnSave_Click" />
</td>
</tr>
</table>
<div></div>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText = "Product_ID" DataField="Product_ID" />
<asp:BoundField HeaderText = "Product_Name" DataField="Product_Name" />
<asp:BoundField HeaderText = "Amount" DataField="Amount" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("Picture") %>' Height="50px" Width="50px"/>
<asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
PopupControlID="popupImage"
TargetControlID="Image1"
OffsetX="10" OffsetY="5"
PopupPosition="Right"
PopDelay="100" HoverDelay="100">
</asp:HoverMenuExtender>
<asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7"
BorderStyle="Solid" BorderWidth="7px" Height="300"Width="400">
<asp:Image runat="server" ID="mainImage"
ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("Picture") %>' />
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" ForeColor="White" Font-Bold="True"></HeaderStyle>
<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>
</div>
</form>
</body>
</html>
For this showing image add one handler class file to your solution give the name as imagehandler.ashx.
Write the following code in imagehandler.ashx
using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
public class ImageHandler : IHttpHandler
{
SqlConnection con = new SqlConnection("Data Source=naresh;Initial Catalog=student;User ID=sa;Password=123");
public void ProcessRequest (HttpContext context)
{
string imageid = context.Request.QueryString["ImID"];
con.Open();
SqlCommand command = new SqlCommand("select Picture from Product_Table ",con);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
context.Response.BinaryWrite((Byte[])dr[0]);
con.Close();
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
Then Write the following code in your HoverMenuExtender .aspx.cs file
using System;
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;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("Data Source=naresh; Initial Catalog=student;User ID=sa;Password=123");
protected void Page_Load(object sender, EventArgs e)
{
{
if (!IsPostBack)
{
BindGridData();
}
}
}
protected void btnSave_Click(object sender, EventArgs e)
{
if (FupPicture.HasFile)
{
int length = FupPicture.PostedFile.ContentLength;
byte[] imgbyte = new byte[length];
HttpPostedFile img = FupPicture.PostedFile;
img.InputStream.Read(imgbyte, 0, length);
string proID = txtID.Text;
string proName=txtName.Text;
string PAmount = txtAmount.Text;
con.Open();
SqlCommand cmd = new SqlCommand("INSERT INTO Product_Table (Product_ID,Product_Name,Amount,Picture) VALUES (@Product_ID,@Product_Name,@Amount,@Picture)", con);
cmd.Parameters.Add("@Product_ID", SqlDbType.BigInt).Value = proID;
cmd.Parameters.Add("@Product_Name", SqlDbType.VarChar,250).Value = proName;
cmd.Parameters.Add("@Amount", SqlDbType.BigInt).Value = PAmount;
cmd.Parameters.Add("@Picture", SqlDbType.Image).Value = imgbyte;
int count = cmd.ExecuteNonQuery();
con.Close();
if (count == 1)
{
BindGridData();
string msg = "<script>alert('Inserted Successfully');</script>";
ScriptManager.RegisterStartupScript(this, typeof(Control), "alertmsg", msg, false);
}
}
}
private void BindGridData()
{
con.Open();
SqlCommand command = new SqlCommand("SELECT * from Product_Table", con);
SqlDataAdapter da = new SqlDataAdapter(command);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
GridView1.Attributes.Add("bordercolor", "black");
con.Close();
}
}
Run your application and see the output like below:
Demo
i pramod
ReplyDeleteits good
www.codefordotnet.com
i ratna
ReplyDeleteits good
codefordotnet.com