Asp.Net Article: Image Slider using Repeater From Database Asp.Net

Default.Aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>ImageName:-</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="31px" Width="274px"></asp:TextBox></td>
</tr>
<tr>
<td>Description:-</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Height="31px" Width="276px"></asp:TextBox></td>
</tr>
<tr>
<td>Photo:-</td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" Height="33px" Style="font-weight: 700; color: #00CC00; text-align: left;" Width="282px" /></td>
<td></td>
<td>
<asp:Button ID="Button1" runat="server" Text="Upload" Height="45px" Style="font-weight: 700; color: #CC0099" Width="91px" OnClick="Button1_Click" /></td>
</tr>

</table>
<asp:Label ID="Label1" runat="server" ></asp:Label>
<br />
<br />
<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" OnDeleteCommand="DataList1_DeleteCommand">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Height="200" Width="200" ImageUrl='<%# "ImagHand.aspx?id=" + Eval("id") %>' />
<br />
<asp:Label ID="Label2" runat="server" Text='<%#Eval("ImageName") %>'></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text='<%#Eval("ImageDescription") %>'></asp:Label>
<br />
<asp:LinkButton ID="LinkButton1" CommandName="Delete" CommandArgument='<%# Eval("id") %>' runat="server">Delete</asp:LinkButton>
<br />
<br />
</ItemTemplate>
</asp:DataList>

</div>
</form>
</body>
</html>

Default.aspx.cs

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;

using System.Configuration;

using System.IO;

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

{

string cs = ConfigurationManager.ConnectionStrings["news"].ConnectionString;

string id;

string FileName;

Stream str;

BinaryReader br;

Byte[] size;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

bindDatalist();

}

private void bindDatalist()

{

using (SqlConnection con = new SqlConnection(cs))

{

using (SqlCommand cmd = new SqlCommand())

{

cmd.CommandText = "Select * From NewsSlid";

cmd.Connection = con;

con.Open();

DataList1.DataSource = cmd.ExecuteReader();

DataList1.DataBind();

con.Close();//

}

protected void Button1_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);

string constr = ConfigurationManager.ConnectionStrings["news"].ConnectionString;

using (SqlConnection con = new SqlConnection(constr))

{

string query = "insert into NewsSlid values (@ImageName,@ImageDescription,@FileName, @FileType,@ImagePath)";

using (SqlCommand cmd = new SqlCommand(query))

{

cmd.Connection = con;

cmd.Parameters.AddWithValue("@ImageName", SqlDbType.VarChar).Value = TextBox1.Text;

cmd.Parameters.AddWithValue("@ImageDescription", SqlDbType.VarChar).Value = TextBox2.Text;

cmd.Parameters.AddWithValue("@FileName", FileName);

cmd.Parameters.AddWithValue("@FileType", "word/Application");

cmd.Parameters.AddWithValue("@ImagePath", size);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

Label1.Visible = true;

Label1.Text = "Data Uploaded";

Label1.ForeColor = System.Drawing.Color.Yellow;

Label1.Visible = true;

Label1.Text = "Please select image file jpg or gif only";

Label1.ForeColor = System.Drawing.Color.White;

}

Response.Redirect(Request.Url.AbsoluteUri);

}

protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)

{

if (e.CommandName == "Delete")

{

id = e.CommandArgument.ToString();

SqlConnection con = new SqlConnection(cs);

SqlCommand cmd = new SqlCommand("delete from NewsSlid where id='" + id + "'", con);

con.Open();

cmd.ExecuteNonQuery();

con.Close();

Response.Redirect("Default.aspx");

}

ImagHand.aspx.cs

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;

using System.Configuration;

using System.IO;

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

{

protected void Page_Load(object sender, EventArgs e)

{

string id = Request.QueryString["id"];

string cs = ConfigurationManager.ConnectionStrings["news"].ConnectionString;

string query = "select ImagePath from NewsSlid where id=@id";

SqlConnection con = new SqlConnection(cs);

SqlCommand cmd = new SqlCommand(query, con);

cmd.Parameters.Add("@id", SqlDbType.Int).Value = Convert.ToInt32(id);

con.Open();

SqlDataReader dr = cmd.ExecuteReader();

{

if (dr.Read())

{

byte[] imgdata = (byte[])dr["ImagePath"];

Response.BinaryWrite(imgdata);

con.Close();

}

Slider.aspx

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

<!DOCTYPE html>

$(document).ready(function () {

$('#photos').galleryView({

panel_width: 800,

panel_height: 350,

frame_width: 80,

frame_height: 80,

nav_theme: 'custom'

});

</script>

</head>

<body>

<div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:news %>"

SelectCommand="SELECT * FROM [NewsSlid]"></asp:SqlDataSource>

<br />

<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1">

<asp:Image ID="Image1" Width="800" Height="350" runat="server" ImageUrl='<%# "ImagHand.aspx?id=" + Eval("id") %>' />

<p>Description: <b><%# Eval("ImageDescription") %></b><br /> View full-size photo

<a href='<%# "ImagHand.aspx?id=" + Eval("id") %>' target="_blank">here</a>.</p>

</div>

</ItemTemplate>

</asp:Repeater>

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

<li><img width="80" height="80" src='<%# "ImagHand.aspx?id=" + Eval("id") %>'

alt='<%#Eval("ImageDescription") %>' title='<%# Eval("ImageName") %>' /></li>

</ItemTemplate>

</asp:Repeater>

</ul>

</div>

</form>

</body>

</html>

Asp.Net Article

Friday, 27 February 2015

Image Slider using Repeater From Database Asp.Net

No comments:

Post a Comment

Blog Archive