Bryan Sampica

Recently, I was given the opportunity to speak at an up-coming INETA meeting (Cedar Rapids, IA branch.  http://www.crineta.org).  I have been doing a lot of Ajax Script service things lately, and really wanted to get the lead out and try my hand at an entire example. 

Ok, I've started migrating content over from my personal blog to this one - and I'm seeing an issue...it's cutting my code off on the right hand side.  I'm not quite sure why this is happening but I'm guessing it's the <pre> tag I use to encapsulate code.

I'll get it worked out in the next few days, so that future code is not cut off.

As a temporary solution you can copy and paste the code from the code blocks directly into your environment, or into notepad or something similar, and it does get it all.

Bryan Sampica ( Freakyuno )

I typically track stats to my blog using a free site called StatCounter ( http://www.statcounter.com ) which is a remarkable tool if you can run just a little JavaScript in a master page on your site.  I've noticed over the past several weeks that consistently a keyword in my searches keeps coming up on top!  See below:

Returning single bits of data is nice, as seen in the previous examples.  Doing it async is even better - but what we really want to do is make this useful for business, and in business we use objects.  In this example I'll demonstrate how to use serialization methods, to return an object (serialized to an array) to our calling JavaScript proxy - and then bind that to area's of our page.  The goal of course being to do something useful in a business application, giving the user a nice Ajaxian style experience, and gathering / displaying the information we need at the appropriate time.

Depending on your design, it may or may not work to have your atlas progress rendering inline with your other content.  This is actually kind of a pain.  My situation included a gridview being rendered that may require the user to scroll, clicking a paging link at the bottom.   Clicking this link triggers the update progress template at the TOP of the page - But does almost nothing to inform the user who has now scrolled down and doesn't see it.

We need a way to inform the user that an Ajax panel is getting data from the server, and is actually doing anything.  Surprisingly enough, the "page flash" that we all hated in a standard browser application, did serve as instant user feedback - where as Ajax update panes leave the web page drooling and blinking at the user.  In some cases they may not even be aware that data has changed or updated. 

Solution:

Enter JavaScript - yea I know what you're saying.  Your application is managed, and you don't want to clutter it up with JavaScript.  Believe me, you are preaching to the choir here, but it's pretty painless. 

Concept:  We are going to declare a DIV inside the progress template.  We are then going to set the div inside the panel to a CSS class that positions it absolutely.  Then with a little JavaScript we are going to keep it on the mouse cursor, so that when it appears - it's in a position that will give feedback to the user. 

Ok - so lets get started eh?

For this example, I'm going to return a DateTime string, and set it to the label in my page.  I'm going to do this in some code that forces a delay so we can see the update Progress template work. 

Go ahead and get your page setup like this to get us started. 

You can get some free Ajax Update type animated GIFS from this site. I went ahead and grabbed the Roller.gif for this example.

http://mentalized.net/activity-indicators/

<div>    
    <asp:ScriptManager ID="ScriptManager1" runat="server" />    
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">        
        <ProgressTemplate>            
            <div id="updateDiv" style="position: absolute">                
                <img src="roller.gif" />            
            </div>        
        </ProgressTemplate>    
    </asp:UpdateProgress>    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">        
        <ContentTemplate>            
            <asp:Label ID="lblDateTime" runat="server" Text="" /><br />            
            <asp:Button ID="btnUpdate" runat="server" Text="Update" />        
        </ContentTemplate>    
    </asp:UpdatePanel>
</div>

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnUpdate.Click    
    'THREAD SLEEP should never be used in production applications    
    System.Threading.Thread.Sleep(4000)    
    lblDateTime.Text = System.DateTime.Now
End Sub

Again, nothing special here.  We simply created a button click event that updates our labels value.  The progress template we setup will kick in as soon as that thread sleep starts ticking.

Go ahead and test your project at this point.  Not very useful to say the least if your page scrolls at all.  Enter JavaScript (our superhero).

JavaScript:

Ok, I wont overly explain this JavaScript.  Usually my requirement is not to understand it, just that it works.  This goes between the Head tags of your page.

<script type="text/javascript" language="javascript">       

var IE = document.all?true:false      
 // If NS -- that is, !IE -- then set up for mouse capture       
if (!IE) document.captureEvents(Event.MOUSEMOVE)       
// Set-up to use getMouseXY function onMouseMove       
document.onmousemove = getMouseXY;       
// Temporary variables to hold mouse x-y pos.s       
var tempX = 0       
var tempY = 0       
// Main function to retrieve mouse x-y pos.s       
function getMouseXY(e) {           
if (IE) { 
// grab the x-y pos.s if browser is IE               
tempX = event.clientX + document.body.scrollLeft              
tempY = event.clientY + document.body.scrollTop           
} 
else 
{  
// grab the x-y pos.s if browser is NS               
tempX = e.pageX              
 tempY = e.pageY      
 }   
// catch possible negative values in NS4 
if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0}   
// show the position values in the form named Show 
// in the text fields named MouseX and MouseY 
var divToMove = document.getElementById("updateDiv") 
divToMove.style.left = tempX 
divToMove.style.top = tempY return true  
 
</script>

And Wa-lah!  Go ahead and render your page and click the button.  You're progress now stays on your mouse, and gives the user instant feedback that something is going on.  In a follow-up we'll examine two different methods of accomplishing this, that also could be useful. 

Happy Coding.

Bryan Sampica - ASP.NET MVP.

I have to say, that sometimes I really feel the infancy of the Ajax controls.  I love them, don't get me wrong, but some of this stuff seems like it should have been thought of.  Needless to say, recently I found myself needing to use Service Methods for a project, and on several occasions when data was being pumped in from my webservice to my proxy I was left thinking - what's it doing?  The solution of course was easy, since Service Methods run on a JavaScript backbone already there wasn't much work to do at all.  On to the code!