Archive

Archive for August, 2011

JQuery DateTime Picker with Gridview

August 24, 2011 Leave a comment

Hi all,

try this example to JQuery DateTime Picker with Gridview

1) Go to thisPage and download JQuery Script

2) Create new Web Site and add new wen page

<link href="jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
 #ui-datepicker-div{ font-size: 80%; }
 /* css for timepicker */
 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
 .ui-timepicker-div dl{ text-align: left; }
 .ui-timepicker-div dl dt{ height: 25px; }
 .ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
 .ui-timepicker-div td { font-size: 90%; }
 </style>
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
 <script type="text/javascript">
  $(function(){
  $('.example1').datepicker({
changeMonth: true,
changeYear: true
});
  });
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
            AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
            ForeColor="#333333">
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                <asp:BoundField DataField="ShipName" HeaderText="ShipName"
                    SortExpression="ShipName" />
                <asp:BoundField DataField="ShipAddress" HeaderText="ShipAddress"
                    SortExpression="ShipAddress" />
                <asp:TemplateField HeaderText="OrderDate" SortExpression="OrderDate">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("OrderDate", "{0:MM/dd/yyyy}") %>' CssClass="example1" Width="70"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="RequiredDate" SortExpression="RequiredDate">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("RequiredDate", "{0:MM/dd/yyyy}") %>' CssClass="example1" Width="70"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT [ShipName], [ShipAddress], [OrderDate], [RequiredDate] FROM [Invoices]">
        </asp:SqlDataSource>

Hope this helps

Good Luck

Categories: ASP.Net, Jquery

JQuery Photo Gallery

August 17, 2011 Leave a comment

Hi all,

try this example to use JQuery to make Photo Gallery


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

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

<html

xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="http://sandbox.scriptiny.com/slideshow/style.css" />
</head>
<body>
<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul id="thumbs">
</HeaderTemplate>
<ItemTemplate>
<li value='<%#Eval("Value") %>'><img src='<%# Eval("ImagePath") %>' width="179" height="100" alt="" /></li>
</ItemTemplate>
<FooterTemplate>
</ul></FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image';
var imgdir = 'http://sandbox.scriptiny.com/slideshow/fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="http://sandbox.scriptiny.com/slideshow/slide.js"></script>
</body>
</html>

and in code behind :-


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var list = (new[] { new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/1.jpg", Value = "1" } }).ToList();
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/2.jpg", Value = "2" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/3.jpg", Value = "3" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/4.jpg", Value = "4" });
list.Add(new { ImagePath = "http://sandbox.scriptiny.com/slideshow/thumbs/5.jpg", Value = "5" });
Repeater1.DataSource = list;
Repeater1.DataBind();

}
}

hope this helps

Good Luck

Categories: ASP.Net, Jquery

Test Emails in ASP.NET without a Mail Server

August 12, 2011 Leave a comment

Hi all,

try this example to Test Emails in ASP.NET without a Mail Server

1) Open VS 2005 and create new web site

2) Add new Web.Config and add these lines

<system.net>
    <mailSettings>
      <smtp deliveryMethod="SpecifiedPickupDirectory">
        <specifiedPickupDirectory pickupDirectoryLocation="C:\Mails\"/>
      </smtp>
    </mailSettings>
  </system.net>

3) Add new asp Page and add button from ToolBox and in code behind add the following code :-


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Net.Mail;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        MailMessage message = new MailMessage("abc@somedomain.com", "abc@abcdefgh.com", "Newsletter", "This is a test mail");
 SmtpClient client = new SmtpClient("localhost");
 client.Send(message);
    }
}

Hope this helps you

Good Luck

Categories: ASP.Net

Use JQuery Fancy Thumbnail Hover Effect with Gridview with Image from Database

August 3, 2011 Leave a comment

Hi all,

try this example to use JQuery Fancy Thumbnail Hover Effect with Gridview with Image from Database

1) Open MS SQL Server and create new Database and create new Table which contains the following fields :-

– ID –> int – PK (Identity)

– Pic –> nvarchar(150)

2) Download jquery-latest.js

3) Open VS 2010 and create new Web Site and add new Web Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body {
 font: Arial, Helvetica, sans-serif normal 10px;
 margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
 height: 360px;
 width: 910px;
 margin: -180px 0 0 -450px;
 top: 50%; left: 50%;
 position: absolute;
}
ul.thumb {
 float: left;
 list-style: none;
 margin: 0; padding: 10px;
 width: 360px;
}
ul.thumb li {
 margin: 0; padding: 5px;
 float: left;
 position: relative;
 width: 110px;
 height: 110px;
}
ul.thumb li img {
 width: 100px; height: 100px;
 border: 1px solid #ddd;
 padding: 5px;
 background: #f0f0f0;
 position: absolute;
 left: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
 background:url(thumb_bg.png) no-repeat center center;
 border: none;
}
#main_view {
 float: left;
 padding: 9px 0;
 margin-left: -10px;
}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
  .animate({
   marginTop: '-110px',
   marginLeft: '-110px',
   top: '50%',
   left: '50%',
   width: '174px',
   height: '174px',
   padding: '20px'
  }, 200);
 
 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
  .animate({
   marginTop: '0',
   marginLeft: '0',
   top: '0',
   left: '0',
   width: '100px',
   height: '100px',
   padding: '5px'
  }, 400);
});

//Swap Image on Click
 $("ul.thumb li a").click(function() {
  
  var mainImage = $(this).attr("href"); //Find Image Name
  $("#main_view img").attr({ src: mainImage });
  return false;  
 });
 
});
</script>
</head>
<body>
    <form id="form1" runat="server">
     <div>
        <asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1"
            RepeatColumns="2" RepeatDirection="Horizontal">
            <ItemTemplate>
               <ul>
                <li><a href='<%# Eval("Pic", "{0}") %>'><img src='<%# Eval("Pic", "{0}") %>' alt="" /></a></li>
                </ul>
            </ItemTemplate>
        </asp:DataList>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Photo]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

Categories: ASP.Net, Javascript, Jquery