Geeks With Blogs
Geekette Mai Blog

 

Description:

This customization utilizes the power of AJAX to make asynchronous calls to server-side methods. The server-side methods then call back a JavaScript function to display data in a popup window. The code customization for .NET Framework 2.0 uses the Microsoft Atlas library. For .NET Framework 1.1, the AJAXPro (available free) third-party DLL is used.

Procedure:

Step 1: Call JavaScript function on MouseOver

Define an area that the user can mouse over to see the popup data.  When the user mouses 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 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 Atlas) 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)

In the HTML page, include the <atlas:ScriptManager> element.  The tag must be within the <form> tag to enable the page for Microsoft Atlas.  This tag enables Atlas client scripts to be downloaded when the web page is requested.

<atlas:ScriptManager ID="scriptManager1" runat="server"/>

Step 4: Use this wizard to add customized code.

Step 5: Build and run the application

Applies To:

    This customization applies to pages with table controls.

Note:

    Please note that this code customization example for .NET Framework 2.0 makes use of the April Community Technology Preview (CTP) version of Microsoft Atlas DLL. 

Disclaimer:

Customizations included in this wizard are provided as a sample to demonstrate a feature, and may work only in specific situations. Geeketee Mai cannot assist in the resolution of problems which may occur as a result of customizing your application or modifying a customization to fit a particular purpose.

 

Posted on Friday, July 21, 2006 2:48 PM | Back to top


Comments on this post: Display Record's Description Through AJAX

# re: Display Record's Description Through AJAX
Requesting Gravatar...
I found your article very helpful...where do you go for research?
Left by Tom Kubus on Aug 14, 2006 1:56 PM

Your comment:
 (will show your gravatar)


Copyright © Mai Nguyen | Powered by: GeeksWithBlogs.net