Pages

Displaying a Simple Popup Calendar

March 05, 2013 Posted by Unknown at 20:07:00 |

In this tutorial, you learn how to display a popup calendar when someone moves focus to a TextBox. You can use the calendar to select a particular date.

We'll create the popup calendar by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an CalendarExtender

To learn how to install the Ajax Control Toolkit  see the Ajax control toolkit page


Step 1:
             
        Add a ToolkitScriptManager :

       Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.

  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  2. </asp:ToolkitScriptManager> 


Step 2:

 

Add a TextBox Control

The CalendarExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.

Next, change the ID of the TextBox control to txtStartDate. You can change the ID in the Properties window. The resulting source code looks like this:

  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  2. </asp:ToolkitScriptManager>  
  3.   
  4. <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox> 
 Step 3 :

Add a CalendarExtender

The next step is to apply a CalendarExtender control to the TextBox. Add the following CalendarExtender control to your page:

  1. <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  2. </asp:ToolkitScriptManager>  
  3.   
  4. <asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>  
  5.   
  6. <asp:CalendarExtender   
  7.     ID="CalendarExtender1"   
  8.     TargetControlID="txtStartDate"   
  9.     runat="server" /> 

0 comments

Asp.net ajax slideshow extender example

Posted by Unknown at 01:39:00 | Labels:

Introduction:

Here I will explain how to show images slideshow using Ajax Slideshowextender control from root folder in asp.net


SlideShow is an extender that targets image controls. You can provide it with buttons to hit previous, next and play. You can configure the slideshow to play automatically on render, allow it loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a Web service.

First add AjaxControlToolkit reference to your application and add 
let me give you the link from where you can easily download ajaxtoolkit and install it on ur visual studio. visit the link below for ajaxtoolkit 
visit this link for ajax library

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
To your aspx page and design your page likes this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="ajax" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AJAX Slidshow Extender Example</title>
<style type="text/css">
.button
{
border:solid 1px #c0c0c0;
background-color:#D55500;
color:#ffffff;
cursor:pointer; 
font-weight:bold; 
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="scriptmanager1" runat="server">
</ajax:ToolkitScriptManager>
<div>
<table style="border:Solid 3px #D55500; width:400px; height:400px" cellpadding="0" cellspacing="0">
<tr style="background-color:#D55500">
<td style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">
<asp:Label ID="lblTitle" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Image ID="imgslides" runat="server" Height="400px" Width="400px" />
</td>
</tr>
<tr>
<td align="center">
<asp:Label ID="lblimgdesc" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnPrevious" runat="server" Text="Prev" CssClass="button" />
<asp:Button ID="btnPlay" runat="server" Text="Play" CssClass="button" />
<asp:Button ID="btnNext" runat="server" Text="Next" CssClass="button" />
</td>
</tr>
</table>
<ajax:SlideShowExtender runat="server" AutoPlay="true" ImageTitleLabelID="lblTitle" ImageDescriptionLabelID="lblimgdesc" Loop="true"
NextButtonID="btnNext" PreviousButtonID="btnPrevious" PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop"
TargetControlID="imgslides" SlideShowServicePath="Slideshow.asmx" SlideShowServiceMethod="GetSlides"></ajax:SlideShowExtender>
</div>
</form>
</body>
</html>



If you observe above code I have define lot of properties to ajax:SlideShowExtender now I will explain each property


NextButtonID - ID of the button that will allow you to see the next picture.

PlayButtonID - ID of the button that will allow you to play/stop the slideshow.

PreviousButtonID - ID of the button that will allow you to see the previous picture.

PlayButtonText - The text to be shown in the play button to play the slideshow.

StopButtonText - The text to be shown in the play button to stop the slideshow.

PlayInterval - Interval in milliseconds between slide transitions in play mode.

ImageTitleLabelID - ID of Label displaying current picture's title.

ImageDescriptionLabelID - ID of Label describing current picture.

Loop - Setting this to true will allow you to view images in a round-robin fashion.

AutoPlay - Setting this to true will play the slideshow automatically on render.

SlideShowServicePath - Path to the webservice that the extender will pull the images from.

SlideShowServiceMethod - The webservice method that will be called to supply images

After that add one new Images folder to your application and add some images to that folder here we are going to display slideshow based on images available in Images folder.

After that add one new webservice page to your application and give name as Slideshow.asmx because here I used the same name in slideshowextender if you give different name change the path name of slideshowextender also.

Here we need to remember one point that is we need to write webmethods this format only and use exact parameters that should be same as whatever I mentioned in web method

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
……
……
}

In this web method we have a chance to change GetSlides method name only but return type and parametername should match

After that write the following code in webservice page 

/// <summary>
/// Summary description for Slideshow
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Slideshow : System.Web.Services.WebService {
public Slideshow () {
//Uncomment the following line if using designed components
//InitializeComponent();
}


[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/Images"));
AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[imagenames.Length];
for (int i = 0; i < imagenames.Length; i++)
{
string[] file = imagenames[i].Split('\\');
photos[i] = new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
}
return photos;
}
}




this was all about slideshow extender .
Yogesh Gautam 

 

2 comments

Subscribe to: Posts (Atom)