Aspdotnet.Sunil Kumar: January 2015

------------------------------------------Create Table For Image--------------------------------

CREATE TABLE news_info(

[imageid] [int] PRIMARY KEY IDENTITY(1,1) NOT NULL,

[Title] [varchar](100) NULL,

[name] [varchar](100) NULL,

[discription] [varchar](max) NULL,

[ImagePath] [varchar](max) NULL,

)

-----------------------image_list.aspx code-------------------------

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

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

function LoadDiv(url, lnk) {

var img = new Image();

var bcgDiv = document.getElementById("divBackground");

var imgDiv = document.getElementById("divImage");

var imgFull = document.getElementById("imgFull");

var imgLoader = document.getElementById("imgLoader");

var dl = document.getElementById("<%=DataList1.ClientID%>");

var imgs = dl.getElementsByTagName("img");

CurrentPage = GetImageIndex(lnk.parentNode) + 1;

imgLoader.style.display = "block";

img.onload = function () {

imgFull.src = img.src;

imgFull.style.display = "block";

imgLoader.style.display = "none";

};

img.src = url;

Prepare_Pager(imgs.length);

var width = document.body.clientWidth;

if (document.body.clientHeight > document.body.scrollHeight) {

bcgDiv.style.height = document.body.clientHeight + "px";

}

else {

bcgDiv.style.height = document.body.scrollHeight + "px";

}

imgDiv.style.left = (width - 650) / 2 + "px";

imgDiv.style.top = "20px";

bcgDiv.style.width = "100%";

bcgDiv.style.display = "block";

imgDiv.style.display = "block";

return false;

}

</script>

function HideDiv() {

var bcgDiv = document.getElementById("divBackground");

var imgDiv = document.getElementById("divImage");

var imgFull = document.getElementById("imgFull");

bcgDiv.style.display = "none";

imgDiv.style.display = "none";

imgFull.style.display = "none";

}

</script>

var CurrentPage = 1;

function GetImageIndex(obj) {

while (obj.parentNode.tagName != "TD")

obj = obj.parentNode;

var td = obj.parentNode;

var tr = td.parentNode;

if (td.rowIndex % 2 == 0) {

return td.cellIndex + tr.rowIndex;

}

else {

return td.cellIndex + (tr.rowIndex * 2);

}

</script>

function Prepare_Pager(imgCount) {

var Previous = document.getElementById("Previous");

var Next = document.getElementById("Next");

var lblPrevious = document.getElementById("lblPrevious");

var lblNext = document.getElementById("lblNext");

if (CurrentPage < imgCount) {

lblNext.style.display = "none";

Next.style.display = "block";

}

else {

lblNext.style.display = "block";

Next.style.display = "none";

}

if (CurrentPage > 1) {

Previous.style.display = "block";

lblPrevious.style.display = "none";

}

else {

Previous.style.display = "none";

lblPrevious.style.display = "block";

}

</script>

function doPaging(lnk) {

var dl = document.getElementById("<%=DataList1.ClientID%>");

var imgs = dl.getElementsByTagName("img");

var imgLoader = document.getElementById("imgLoader");

var imgFull = document.getElementById("imgFull");

var img = new Image();

if (lnk.id == "Next") {

if (CurrentPage < imgs.length) {

CurrentPage++;

imgLoader.style.display = "block";

imgFull.style.display = "none";

img.onload = function () {

imgFull.src = imgs[CurrentPage - 1].src;

imgFull.style.display = "block";

imgLoader.style.display = "none";

};

}

else {

if (CurrentPage > 1) {

CurrentPage--;

imgLoader.style.display = "block";

imgLoader.style.display = "none";

img.onload = function () {

imgFull.src = imgs[CurrentPage - 1].src;

imgFull.style.display = "block";

imgLoader.style.display = "none";

};

}

Prepare_Pager(imgs.length);

img.src = imgs[CurrentPage - 1].src;

}

</script>

.modal

{

display: none;

position: absolute;

top: 0px;

left: 0px;

background-color:black;

z-index:100;

opacity: 0.8;

filter: alpha(opacity=60);

-moz-opacity:0.8;

min-height: 100%;

}

#divImage

{

display: none;

z-index: 1000;

position: fixed;

top: 0;

left: 0;

background-color:White;

height: 550px;

width: 610px;

padding: 3px;

border: solid 1px black;

}

.dlTable

{

border:double 1px #D9D9D9;

width:200px;

text-align:left;

}

</style>

</head>

<body>

<div>

<asp:DataList ID="DataList1" runat="server" RepeatColumns = "4" RepeatLayout = "Table" Width = "500px">

<br />

<tr>

<td>

<asp:Image ID="Image1" runat="server" ImageUrl = '<%# Eval("ImagePath")%>'

Width = "200px" Height = "200px" onclick = "LoadDiv(this.src, this)" style ="cursor:pointer" />

</td>

</tr>

</table>

<br />

</ItemTemplate>

</asp:DataList>

</div>

<tr>

<img id="imgLoader" runat="server" alt=""

src="images/loader.gif" />

<img id="imgFull" alt="" src=""

style="display: none;

height: 500px;width: 600px" />

</td>

</tr>

<tr>

<a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none">Previous</a>

<span id = "lblPrevious">Previous</span>

</td>

<input id="btnClose" type="button" value="close"

onclick="HideDiv()"/>

</td>

</td>

</tr>

</table>

</div><div id="divBackground" class="modal">

</div>

</form>

</body>

</html>

-----------------------image_list.aspx.cs code---------------------

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

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

{

//SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);

SqlConnection con = new SqlConnection("Data Source=UNIVITECH-PC2\\SQLEXPRESS;Initial Catalog=db;Integrated Security=True");

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindData();

}

protected void BindData()

{

con.Open();

SqlCommand cmd = new SqlCommand("select * from news_info ", con);

DataSet ds = new DataSet();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

DataList1.DataSource = ds;

DataList1.DataBind();

con.Close();

}

---------------RESULT--------------------------

-----------------------------------Click on Image--------------------------------------------

-----------------------------------------------------Create Table----------------------------------------------

CREATE TABLE [dbo].[news_headlines](

[ID] [int] primary key IDENTITY(1,1) NOT NULL,

[Username] [varchar](50) NULL,

[Heading] [varchar](max) NULL,

[Discription] [varchar](max) NULL,

[Posteddate] [datetime] NULL

)

----------News_Headlines.aspx-----------------

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

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

<title>Latest News Example</title>

</head>

<body>

<div>

<table>

<tr>

<td>Enter Name: </td>

</tr>

<tr>

<td>Enter HeadLines: </td>

</tr>

<tr>

<td valign="top">Enter Discription:</td>

</tr>

<tr>

</tr>

</table>

</div>

<div>

<asp:Repeater ID="RepDetails" runat="server">

<b>Latest News</b>

</td>

</tr>

</HeaderTemplate>

<td>

<tr>

Headlines:

<asp:Label ID="lblHeadlines" runat="server" Text='<%#Eval("Heading") %>' Font-Bold="true"/>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td >

<asp:Label ID="lblDiscription" runat="server" Text='<%#Eval("Discription") %>'/>

</td>

</tr>

<tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</ItemTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

</div>

</form>

</body>

</html>

----------News_Headlines.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.SqlClient;

using System.Data;

using System.Configuration;

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

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindData();

}

protected void BindData()

{

con.Open();

SqlCommand cmd = new SqlCommand("select * from News_headlines Order By PostedDate desc", con);

DataSet ds = new DataSet();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(ds);

RepDetails.DataSource = ds;

RepDetails.DataBind();

con.Close();

}

protected void btnSubmit_Click(object sender, EventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("insert into News_headlines (UserName,Heading,Discription,PostedDate) values(@userName,@Heading,@Discription,@postedDate)", con);

cmd.Parameters.AddWithValue("@userName", txtName.Text);

cmd.Parameters.AddWithValue("@Heading", txtHeadlines.Text);

cmd.Parameters.AddWithValue("@Discription", txtDiscription.Text);

cmd.Parameters.AddWithValue("@postedDate", DateTime.Now);

cmd.ExecuteNonQuery();

con.Close();

txtName.Text = string.Empty;

txtHeadlines.Text = string.Empty;

txtDiscription.Text = string.Empty;

BindData();

}

Aspdotnet.Sunil Kumar

Share Blog

Thursday, January 29, 2015

How to Use Image In Datalist with Slidshow Asp.net

------------------------------------------Create Table For Image--------------------------------

Wednesday, January 28, 2015

How to use Repeater In Asp.net

BLOG ARCHIVE