Home / AJAX

HOW TO Instantiate Controls using jQuery

Modified on 2010/01/22 19:18 by Stephen Walther Categorized as Uncategorized
jQuery developers can take advantage of the ASP.NET Ajax Library without changing their style fo programming. All ASP.NET Ajax controls are exposed as jQuery plug-ins automatically.

For example, the following page uses a jQuery selector to retrieve an input element. A Watermark is attached to the input element by calling the watermark() method from the jQuery selector.

<!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> <title>ASP.NET Ajax Controls using jQuery</title>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript">

Sys.require(Sys.components.watermark, function () {

$("#input1").watermark("Enter some text");

}); </script> </head> <body>

<input id="input1" />

</body> </html>

When using Visual Studio/Visual Web Developer, you get full Intellisense when using the ASP.NET Ajax Library with jQuery. In the following figure, notice that the Watermark() control appears in Intellisense just like any other jQuery plug-in.

  Name Size
- jQueryIntellisense.png 17.92 KB