Dynamic Nivo Slider Using ASP .net C# jQuery SQL Server

I have searched in google at least 2 hours to get a code to designed a dynamic slider but I have failed to fulfill my requirements. I have code like this to do this and want to share with you to save your valuable time. Just follow the steps…

Step-1: jQuery and Nivo Plug-ins:

jquery-2.0.3.min.js  and nivoSlider.js

Step-2: Database Table (MS SQL Server)

CREATE TABLE [dbo].[tblSlider](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Photo] [image] NULL,
[Name] [varchar](100) NULL,
[Description] [nvarchar](500) NULL,
[Type] [varchar](50) NULL,
CONSTRAINT [PK_tblSlider] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

Step-3: jQuery Code

<script type=”text/javascript” src=”jquery/jquery-2.0.3.min.js”></script>

<script type=”text/javascript” src=”jquery/nivoSlider.js”></script>
<script type=”text/javascript”>
$(window).load(function () {
$(‘#slider’).nivoSlider({
effect: ‘random’,
animSpeed: 500,
pauseTime: 8000
});
});
</script>

Step-4: HTML and ASP.net Code

<div class=”container-slider”>
<div id=”slider” class=”nivoSlider”>
<asp:Repeater ID=”Repeater” runat=”server”>
<ItemTemplate>
<asp:Image ID=”ImageUserId” Width=”780px” Height=”205px” runat=”server” ImageUrl='<%#”Slider.ashx?qsId=” + Eval(“Id”)  %>’ title='<%#Eval(“Description”)  %>’ />
</ItemTemplate>
</asp:Repeater>
</div>
</div>

Step-5: C# Code behind

try
{
String strqs = ” SELECT Id, Description  FROM tblSlider “;
DataTable dt = new DataTable();
dt = ClsCommon.GetAdhocResult(strqs).Tables[0];

Repeater.DataSource = dt;
Repeater.DataBind();
}
catch (Exception ex) { }

Step-6: Slider.ashx  Handler Code

try
{
string conString = ConfigurationManager.ConnectionStrings[“iict”].ConnectionString;
SqlConnection myConnection = new SqlConnection(conString);
myConnection.Open();
string sql = “SELECT Photo FROM tblSlider WHERE Id=@Id”;
SqlCommand cmd = new SqlCommand(sql, myConnection);

cmd.Parameters.Add(“@Id”, SqlDbType.Int).Value = context.Request.QueryString[“qsId”];
cmd.Prepare();
SqlDataReader dr = cmd.ExecuteReader();
dr.Read();
if (dr.HasRows)
context.Response.BinaryWrite((byte[])dr[“Photo”]);

dr.Close();
myConnection.Close();
}
catch (Exception ex) { }

That’s all… Thank you…

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s