DotNet World: HoverMenu Gridview

How to use HoverMenu Extender for Gridview in Asp.net Ajax || To save and Retrieve the image from database.

Here is the example of HoverMenu Extender used in the Asp.net. Hovermenu is an asp.net Ajax extender that can be attached to any asp.net webControl, and will associate that control with a popup panel to display the content.

To implement this concept you need to follow the below steps.

Step1 :

First you need to design a table in Sql Database to to save the records in database.

Step2:

Create a new Asp.net website in Visual Studio and write the following html code in the design part of the Default.aspx page.

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

</head>

<body>

<div>

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

<div>

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

</div>
<div>

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

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

</div>
<div>

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

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

</div>

<div>

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

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

</div>
<div>

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

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

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

Step3:
The purpose of handler.ashx page is to retrieve the image from database and display in the Gridview.
Now open the new Handler.ashx page and write the following source code.

Handler.ashx Page :

using System;

using System.Web;

using System.Data;

using System.Data.SqlClient;

public class ImageHandler : IHttpHandler

{

SqlConnection con = new SqlConnection("Data Source=sridhar;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;

}

Step4:
Now open the Default.aspx.cs page and write the following source code

Default.aspx.cs Page :

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=sridhar;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();

}

Step5:
Now build the Solution and Debug it for the output.

Output Page :

DotNet World

Wednesday, 4 April 2012

HoverMenu Gridview

How to use HoverMenu Extender for Gridview in Asp.net Ajax || To save and Retrieve the image from database.

No comments:

Post a Comment

CRUD operations using AngularJS in Asp.Net MVC

Followers

Total Visitors