.Net Tutorial: Ajax HoverMenuExtender example with GridView in Asp.net || Save image into Database and retrieve from database and show in Gridview with Ajax HoverMenuExtender control

The following article is showing about Ajax HoverMenuExtender control with save image and showing image in Gridview :

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.

.style1

{

width: 36%;

}

.style3

{

width: 43px;

}

.style4

{

width: 805px;

}

</style>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

</div>

<tr>

<asp:Label ID="lblID" runat="server" Text="Product_ID"></asp:Label>

</td>

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

</td>

</tr>

<tr>

<asp:Label ID="lblName" runat="server" Text="Product_Name"></asp:Label>

</td>

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

</td>

</tr>

<tr>

<asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>

</td>

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

</td>

</tr>

<tr>

<asp:Label ID="lblPicture" runat="server" Text="Picture"></asp:Label>

</td>

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

</td>

</tr>

<tr>

 </td>

<asp:Button ID="btnSave" runat="server" Text="Save"onclick="btnSave_Click" />

</td>

</tr>

</table>

<div>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white" CellPadding="4"

ForeColor="#333333" GridLines="None">

<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">

<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>

</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:

.Net Tutorial

Pages

Ajax HoverMenuExtender example with GridView in Asp.net || Save image into Database and retrieve from database and show in Gridview with Ajax HoverMenuExtender control

0 comments:

Post a Comment

About Me