Background 

I've been using Script# for a pretty long time. I love it because it is much easier for me to write Ajax based javas-cript code in C# language without losing the powerful functionalities in Visual Studio 2008.   

jQuery becomes so popular in the past year, I decided to move the SpringSys web controls to jQuery base as well.  

Unfortunately, Script# library doesn't support jQuery till now. Why not writing my own jQuery wrapper classes for Script# project? Since I believe new release of Script# will support jQuery at later time, but I really can't wait.  

Introduction 

So, I wrote this set of classes to add jQuery support to my Script# project. It uses jQuery() syntax instead of the shortest $() syntax, because C# compiler doesn't allow $ sign as function name. 

This set of classes are implemented for jQuery_1.3.2 base on it's API reference, that means all the functions described in jQuery_1.3.2 API reference are supported by those classes.  

For more information about the jQuery API, please visit http://docs.jquery.com/Main_Page  

Download 

Source code: http://www.springsys.com/download/jQuery/jQuery_1_3_2.zip   

Sample with source code: http://www.springsys.com/download/jQuery/MyScript.zip 

Sample web project: http://www.springsys.com/download/jQuery/SampleSite.zip  

jQuery entry points 

As we know, jQuery() function is a global function in Java Script, so I have to use a static class JQueryCreator to define all the entry point functions for jQuery in C# code. Script# compiler will translate those static methods in static class into global functions.  

For example, JQueryCreator.jQuery("#btnClick") will be compiled to jQuery("#btnClick") in Java Script. 

You can find multiple jQuery entry point functions that accept variant type of parameters as described in jQuery API reference.   

jQuery instance functions 

All the jQuery instance functions are defined inside the JQuery class. They are organized in the exact same categories used by the jQuery API reference.  

For example: 

JQuery jq = JQueryCreator.jQuery("#mydiv");

jq.css("background-color", "#686868"); 

will be translated to 

var jq = jQuery("# mydiv");

jq.css('background-color', '#686868');  

jQuery ‘static’ functions 

In jQuery API, we can see some 'static' members that are not in jQuery object's instance, for example, jQuery.isFunction(), jQuery.browser etc. They are defined inside the jQuery class in the class set.   

jQuery Event 

jQuery has its owe event object definition, mostly base on the W3C event object, but also has some useful extensions, for example, PreventDefault(), StopPropagation() etc. This jQuery event is defined by the JQueryEvent class in the class set.  

Example

 

I wrote a behavior to associate jQuery operations with target element:
 
   1:  using System;
   2:  using Sys;
   3:  using System.DHTML;
   4:  using Sys.UI;
   5:   
   6:  namespace SpringSys.Sample
   7:  {
   8:      using SpringSys.JQuery132;
   9:   
  10:      public class MyBehavior : Behavior
  11:      {
  12:          private JQuery _jq;
  13:   
  14:          public MyBehavior(DOMElement element)
  15:              : base(element)
  16:          {
  17:              _jq = JQueryCreator.jQuery(element);
  18:              _jq.click(OnClick);
  19:          }
  20:   
  21:          private bool OnClick(JQueryEvent e)
  22:          {
  23:              Script.Alert(String.Format("You clicked me at position: \n\nOffsetX={0}, OffsetY={1}\nClientX={2}, ClientY={3}\nPageX={4}, PageY={5}", 
  24:                  e.OriginalEvent.OffsetX, 
  25:                  e.OriginalEvent.OffsetY,
  26:                  e.ClientX,
  27:                  e.ClientY,
  28:                  e.PageX,
  29:                  e.PageY));
  30:              return true;
  31:          }
  32:   
  33:          public void ChangeSize(int width, int height)
  34:          {
  35:              _jq.width(width);
  36:              _jq.height(height);
  37:          }
  38:   
  39:          public void Slide()
  40:          {
  41:              _jq.slideUp("slow");
  42:              _jq.slideDown("slow");
  43:          }
  44:   
  45:          public void Fade()
  46:          {
  47:              _jq.fadeOut("slow");
  48:              _jq.fadeIn("slow");
  49:          }
  50:   
  51:          public void DetectBrowser()
  52:          {
  53:              if (jQuery.browser.msie != null)
  54:                  Script.Alert("You're using MSIE. Version:" + jQuery.browser.version);
  55:   
  56:              if (jQuery.browser.safari != null)
  57:                  Script.Alert("You're using Safari. Version:" + jQuery.browser.version);
  58:   
  59:              if (jQuery.browser.opera != null)
  60:                  Script.Alert("You're using Opera. Version:" + jQuery.browser.version);
  61:   
  62:              if (jQuery.browser.mozilla != null)
  63:                  Script.Alert("You're using Mozilla. Version:" + jQuery.browser.version);
  64:          }
  65:      }
  66:  }
 
To use it:
   1:  <script type="text/javascript">
   2:      var myBehavior = null;
   3:      $(function() {
   4:          myBehavior = new SpringSys.Sample.MyBehavior($('#Panel1').get(0));
   5:      }
   6:  ) 
   7:  </script>      
   8:          
   9:          <input id="Button1" type="button" value="Change Size" onclick="myBehavior.changeSize(300, 200);" />
  10:          <input id="Button2" type="button" value="Slide" onclick="myBehavior.slide();" />
  11:          <input id="Button3" type="button" value="Fade" onclick="myBehavior.fade();" />
  12:          <input id="Button4" type="button" value="Detect Browser" onclick="myBehavior.detectBrowser();" />
  13:          <asp:Panel ID="Panel1" runat="server" Height="103px" Width="194px" style="border:solid 1px red;background-color:#686868;">Click me!</asp:Panel>

 

Comment? 

You are welcome to use or modify it in your own project. If you have any comment or suggestion, please write it here or email to jsi@springsys.com