Franc Stratton's .NET (TM) Web Application, OOP, and SOA Architecture & Programming Site

A site devoted to ASP.NET (TM), SilverLight (TM) and Browser-Based WPF (TM) Applications, IIS Services, and OOP Architectures
Home     Architecture Overview     WF/WCF/WPF     Data Store     Standards     .NET Security     Resources     jQuery     Silverlight     Developer Tips     Blog     Site Map      
jQuery Basics for ASP.NET
jQuery Selectors
jQueryEvents
Event Handler Methods
jQuery Special Effects
jQuery Callbacks
jQuery Page Method
jQuery Data Method
Simple Dirty Flag
Advanced Dirty Flag
AJAX Call to Web Service
Simple Page Styling
jQuery used with ASP.NET - The Perfect Complementary Technology 

In the Fall of 2008 on his website, Scott Guthrie, Microsoft manager of the ASP.NET Development Team, announced that Visual Studio 2008 Service Pack 1 with ASP.NET MVC would include the jQuery open source library. He wrote:

 

“jQuery is a lightweight open source JavaScript library (only 15kb in size) that in a relatively short span of time has become one of the most popular libraries on the web."

 

"A big part of the appeal of jQuery is that it allows you to elegantly (and efficiently) find and manipulate HTML elements with minimum lines of code.  jQuery supports this via a nice "selector" API that allows developers to query for HTML elements, and then apply "commands" to them.  One of the characteristics of jQuery commands is that they can be "chained" together - so that the result of one command can feed into another.  jQuery also includes a built-in set of animation APIs that can be used as commands.  The combination allows you to do some really cool things with only a few keystrokes."

 

jQuery now is an integral part of VS 2010 when an ASP.NET project is created. The jQuery library is a great implementation of client-side JavaScript functions in a library of very easy-to-use JavaScript macros:

 

 

 

JQuery Introduction

 

jQuery allows the ASP.NET developer to:

 

  • Traverse the Document Object Model (DOM) tree with just a few lines of code to manipulate or check elements of the HTML or ASPX page.
  • Easily change the appearance of an HTML or ASPX page with the power of CSS 3.0 style properties.
  • Use the API to alter the contents of an HTML or ASPX page in short, concise jQuery code snippets.
  • Perform AJAX calls to server-side page methods to securely access database information through MVC classes or web/WCF services.
  • Interact with the user by binding events and properties to an HTML or ASPX page elements to produce powerful and elegant visual effects that also maintain state in the client with browser caching.
  • Create reuable jQuery plug-ins as custom extensions that can be shared across an entire application.

     

The core functionality of jQuery can be divided into 3 main areas useful to ASP.NET programmers:

1. DOM HTML or ASPX page query and manipulation with selectors and filters

2. Powerful, but easy special effects and animation

3. AJAX calls with functions for working with JSON

Downloading and Utilizing JQuery

 

Download jQuery from jQuery.com. Unzip the file and include it in your ASPX page with:

 

<script src="JavaScriptFiles/jquery-1.3.2.js" type="text/javascript"></script>

 

The folder above (JavaScriptFiles) is the location of the jQuery file. The 1.3.2 part of the jQuery js file was kept intact from the initial download to differentiate it from other versions that are sure to come.

 

The first useful jQuery function to learn is Document.Ready(). It makes sure that code is executed only when a page is fully loaded. We often place code blocks inside this Document.Ready() event. For example:

 

$(document).ready(function(){

$('#btnSubmit').click(function(event){

    alert("Saved.");

    });

});

 

The ('#btnSubmit') is the selector for the target element of the jQuery function with the ID of "#btnSubmit". If an ":input" selector had been used, then the selected elements would have been all DOM input HTML controls like textboxes. If the ".button" CSS class selector had been the target elements, then all components with that desinated class would have been selected.

 

The format $(selector) generally means that jQuery will manipulate what is called a wrapped set of elements. This wrapped set of elements is the most powerful feature of the jQuery library since so many controls can be manipulated at once.

 

  

Imbedding JQuery Code in an ASPX Page

 

The developer can start with the jQuery code under the page <Header> tag just as with JavaScript code with:

 

<script type="text/javascript">

    $(document).ready(function() {

        $('#submit').click(function() {

     ..........

</script>

 

This allows the developer to add debug stop points and step through the code. However, once the jQuery code has been tested, I recommended loading the code from the Client Script Manager:

 

//---------------------------------------------------------------------------

/// <summary>

/// Method Name: GenerateSlidePanelScript

/// Description: Loads javascript to Generate Slide Panel Script

/// </summary>

//---------------------------------------------------------------------------

public void GenerateSlidePanelScript()

{

 string jScript = string.Empty;

 jScript = "<script language='javascript'    type='text/javascript'>$(document).ready(function()" +

 "{ " +

 " $('.btn-slide').click(function(){ " +

 " $('#panel').slideToggle('slow'); " +

 " $(this).toggleClass('active'); return false; " +

 " });" +

"});" +

"</script>";

if (!ClientScript.IsClientScriptBlockRegistered("SlidePanelScript"))

{

 ClientScript.RegisterClientScriptBlock(this.GetType(),  "SlidePanelScript", jScript);

}

}