|
Step 1: Call JavaScript function
on MouseOver
Define an area that the user can
mouse over to see the popup data. When the user moves a mouse over, the
MyCustomFunction JavaScript function is called. This function takes two
arguments. The first argument is the Id of the record being
retrieved. The second argument is the reserved word 'event' that
specifies the location of the mouse.
You can use a code generation tag
to specify a field value within the table row. Make sure to specify the
database field corresponding to the Field Value code generation tags on the
Page Properties dialog box.
<a
OnMouseOut='detailRolloverPopupClose();'
OnMouseOver='MyCustomFunction(<GEN:FieldValue NAME="MyRecordID"/>,
event);'>
<GEN:FieldValue NAME="MyRecordName"/>
</a>
Step 2: Define two JavaScript functions
Define two JavaScript functions within the script
tags in the HTML page. The first function is called by the MouseOver
event. It will save the current mouse position and then call the
server-side method declared in your page class. The second function is
the call-back function called by the server-side method.
There are slight differences between .NET
Framework 1.1 (using AjaxPro.dll) and .NET Framework 2.0 (using Microsoft
ASP.NET Ajax Library) as shown below.
For .NET Framework 1.1
<script
type ="text/javascript">
function MyCustomFunction(MyRecordID, event)
{
// Save the mouse position for later use by
detailRolloverPopup
SaveMousePosition(event);
// Invoke the AJAX method defined in the code-behind of the
page
// Replace MYAPP with your application's name and MYPAGE
with the corresponding Page class's name.
// Also, specify the callback function - MyCallBack (defined
below)
MYAPP.UI.MYPAGE.GetRecordDescription(MyRecordID,
MyCallBack);
}
function MyCallBack(result)
{
// The detailRollOverPopup() displays the content returned
from the AJAX call in a popup window
// It accepts three parameters:
// - aTitle, string to be displayed in the title bar of the
popup window.
// - aContent, string containing HTML to be displayed in the
body of the popup.
// - aPersist, boolean indicating whether the popup should
remain visible even on mouseout.
detailRolloverPopup('Window Title', result.value, false);
}
</script>
For .NET Framework 2.0
<script
type ="text/javascript">
function MyCustomFunction(MyRecordID, event)
{
// Save the mouse position for later use by
detailRolloverPopup
SaveMousePosition(event);
// Invoke the
WebMethod defined in the code-behind of the page through the PageMethods
command
// Also, specify the callback function -
MyCallBack (defined below)
PageMethods.GetRecordDescription(MyRecordID,
MyCallBack);
}
function MyCallBack(result)
{
// The detailRollOverPopup() displays the content returned
from the AJAX call in a popup window
// It accepts three parameters:
// - aTitle, string to be displayed in the title bar of the
popup window.
// - aContent, string containing HTML to be displayed in the
body of the popup.
// - aPersist, boolean indicating whether the popup should
remain visible even on mouseout.
detailRolloverPopup('Window Title', result, false);
}
</script>
Step 3: Add ScriptManager reference to page (only for .NET Framework
2.0)
If the Ajax features (large text pop-up, image pop-up or smooth
panel update) are not enabled in the Application Wizard Options dialog, then
add the <asp:ScriptManager> element in the HTML page. The tag must
be within the <form> tag to enable the page for Microsoft ASP.NET Ajax
Library. This tag enables Ajax client scripts to be downloaded when the
web page is requested.
<asp:ScriptManager
ID="scriptManager1" runat="server"
EnablePartialRendering="True"
EnablePageMethods="True"
/>
Step 4: Use this wizard to add customized code.
Step 5: Build and run the
application
|
