I’ve read about jQuery in this great post Five recommendations for starting a startup with ASP.NET and wanted to play with it and see
how easy it is to call a WebMethod from
sQuery. I Started by reading some of the great Tutorials and downloaded the code from here.
I Created a test web project, copied the jQuery file to it and added a WebMethod that waits a random time and return true/false randomly:
public partial class _Default : System.Web.UI.Page { ... public class MethodReturnedValue { public int Time { get; set; } public bool Success { get; set; } } [WebMethod(true)] public static MethodReturnedValue SomeMethod() { MethodReturnedValue retVal = new MethodReturnedValue(); retVal.Time = random.Next(5000); Thread.Sleep(retVal.Time); if (random.Next() % 2 == 0) { retVal.Success = true; ; } else { retVal.Success = false; } return retVal; } }
Than, I added few html elements:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="SM1" EnablePageMethods="true" runat="server" />
<div>
<a id="execute_page_method" href="http://jquery.com/">Click!</a>
<img id="ajax_loading_image" src="ajax-loader.gif" alt="Ajax Loader" />
<label id="message" >hello</label>
</div>
</form>
</body>
and style
<style type="text/css"> a { float:left; width:30px;} img {float:left; width:30px; margin-left:10px; } label { float:left; margin-left:10px; } </style>
I want to activate the web method when clicking the anchor, than display a ajax loading image which I downloaded from here, and when the call returns change the color of the body and display a message according to the values in the result. This is the javascript code:
<script src="jquery-1.2.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ // Initialization $("#ajax_loading_image").hide(); // mousemove event $().mousemove(function(e){ window.status = e.pageX +', '+ e.pageY; }); // hook up the click event $("#execute_page_method").click(function(){ $("#message").text("I'm working...") ; $("#ajax_loading_image").show("fast"); $("#execute_page_method").hide("fast"); // Call some page method... PageMethods.SomeMethod(function(result, userContext, methodName){ $("#ajax_loading_image").hide("slow"); $("#execute_page_method").show("slow"); if( result.Success == true ) { $("body").css("background","Green"); } else { $("body").css("background","Red"); } $("#message").text( "This took me " + result.Time + " milliseconds... " ); }); return false ; }); }); </script>
As you can see, I hook up the click event of execute_page_method element, call the page method and handle the callback with anonymous function.
I Like jQuery since it makes the code very readable, and although i used only the very basic of it, It has many great features that will save you lots of work…
Copyright © 2008
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)