Any method marked as a Ajax.Method can be called by a javascript function. Here is a simple example that changes the innerHTML in a div when you change the selection on a dropdownlist. I change the innerHtml in a div to change what is displayed on the form. The choose a div because its innerHtml property is supported by both Firefox and IE.
The Pages HTML
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="AjaxForm.aspx.vb" Inherits="AjaxDatagridHelp.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript" type="text/javascript">
function ShowTip() {
My.Page.GetString(DoTipCallBack);
}
function DoTipCallBack(result) {
document.getElementById('MyDiv').innerHTML = My.Page.GetString().value;
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; LEFT: 64px; POSITION: absolute; TOP: 48px"
runat="server" Width="424px"></asp:DropDownList>
<div id="MyDiv" runat="server"></div>
</form>
</body>
</HTML>
The Code Behind File
Public Class WebForm1
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents DropDownList1 As System.Web.UI.WebControls.DropDownList
Protected WithEvents Button1 As System.Web.UI.WebControls.Button
Protected WithEvents MyDiv As System.Web.UI.HtmlControls.HtmlGenericControl
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Ajax.Manager.Register(Me, "My.Page", Ajax.Debug.Errors)
Me.DropDownList1.Attributes.Add("OnChange", "ShowTip();")
If Not Me.IsPostBack Then
Dim ComboboxTable As New DataTable
ComboboxTable.Columns.Add("Text")
ComboboxTable.Columns.Add("Id")
For x As Integer = 1 To 10
Dim dr As DataRow = ComboboxTable.NewRow
dr.Item("Text") = x.ToString
dr.Item("Id") = x.ToString
ComboboxTable.Rows.Add(dr)
Next
DropDownList1.DataSource = ComboboxTable
DropDownList1.DataTextField = "Text"
DropDownList1.DataValueField = "Id"
DropDownList1.DataBind()
End If
End Sub
< Ajax.Method() > _
Public Function GetString() As String
Dim strOut As New System.Text.StringBuilder
strOut.Append("<Head>")
strOut.Append("<Body>")
strOut.Append("<H1>")
strOut.Append(DropDownList1.SelectedItem.ToString)
strOut.Append("</ H1>")
strOut.Append("</ Body>")
strOut.Append("</ Head>")
Return strOut.ToString
End Function
End Class
</div></div></div> </body> </html>
Scripting callback is a new feature in an ASP.net 2.0 which allows you to pass a string from the code behind to the pages java script. For this to work you need to have your page implement the ICallBackEventHandler interface. When the call back event is fired pass the string to the GetCallbackResults function with session state. The function and event are seperate due to some threading issues.
Pages HTML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>Scripting Callback Test</title>
</head>
<script type="text/javascript">
function LookUpStock()
{
var lb = document.forms[0].ListBox1;
var product = lb.options[lb.selectedIndex].text
CallServer(product, "");
}
function ReceiveServerData(rValue)
{
Results.innerText = rValue;
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblTime" runat="server" Text="Time "></asp:Label><br />
<br />
<asp:ListBox ID="ListBox1" runat="server" Height="203px" Width="297px"></asp:ListBox>
<br />
<br />
<button onclick="LookUpStock()">
Selected Item</button>
<br />
<br />
Selected Item: <span id="Results"></span>
<br />
</div>
</form>
</body>
</html>
The code behind file
Partial Class _Default
Inherits System.Web.UI.Page
Implements ICallbackEventHandler
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim cbReference As String
cbReference = Page.ClientScript.GetCallbackEventReference(Me, _
"arg", "ReceiveServerData", "context")
Dim callbackScript As String = ""
callbackScript &= "function CallServer(arg, context) { " & _
cbReference & "} ;"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), _
"CallServer", callbackScript, True)
For x As Integer = 0 To 10
ListBox1.Items.Add(x.ToString)
Next
ListBox1.SelectedIndex = 0
lblTime.Text = "Time " & Now.ToLongTimeString
End Sub
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return Session("returnValue").ToString
End Function
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
Session("returnValue") = eventArgument
End Sub
End Class
The AjaxSlideShowExtender will automatically display a slide show in an image control.
The slide show extender calls a shared function to get a list of slides.
This tip shows hows to create slide of all the images in a folder.
The Pages HTML
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<div style="text-align: center">
<asp:Image ID="Image1" runat="server" Height="300" Style="border: 1px solid black;
width: auto" ImageUrl="images/ajax.jpg"
AlternateText="Ajax" />
<asp:Label runat="Server" ID="imageLabel1" /><br />
<br />
<asp:Button runat="Server" ID="prevButton" Text="Prev" Font-Size="Larger" />
<asp:Button runat="Server" ID="playButton" Text="Play" Font-Size="Larger" />
<asp:Button runat="Server" ID="nextButton" Text="Next" Font-Size="Larger" />
<ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server" TargetControlID="Image1"
SlideShowServiceMethod="GetPictures" AutoPlay="true" ImageDescriptionLabelID="imageLabel1"
NextButtonID="nextButton" PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="prevButton"
PlayButtonID="playButton" Loop="true" />
<asp:Label ID="lblError" runat="server" />
</div>
</div>
</form>
</body>
</html>
The Code Behind File
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
MyData.ImagePath = Server.MapPath("~/Images")
Dim strUrl As String = Request.Url.ToString
MyData.Url = strUrl.Substring(0, strUrl.LastIndexOf("/")) & "/Images/"
End Sub
<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetPictures() As AjaxControlToolkit.Slide()
Dim di As New DirectoryInfo(MyData.ImagePath)
Dim s(di.GetFiles.Length - 1) As AjaxControlToolkit.Slide
Dim x As Integer = 0
For Each fi As FileInfo In di.GetFiles()
s(x) = New AjaxControlToolkit.Slide(MyData.Url & fi.Name, "", Path.GetFileNameWithoutExtension(fi.Name))
x += 1
Next
Return s
End Function
End Class
Public Class MyData
Private Shared _Path As String
Private Shared _Url As String
Public Shared Property ImagePath() As String
Get
Return _Path
End Get
Set(ByVal value As String)
_Path = value
End Set
End Property
Public Shared Property Url() As String
Get
Return _Url
End Get
Set(ByVal value As String)
_Url = value
End Set
End Property
End Class