Write jQuery Plugin WebControl for ASP.NET Just in Few Minutes!

• Download runtime - 193.97 KB
• Download source - 1.13 MB

Updates

2009/6/8 The DJ v1.1.15 is released. click here to get the new download.

Introduction

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. "write less do more" is a very good idea for our web developers. But when using it in ASP.NET something had happened...

Background

We had a challenge of using jQuery in ASP.NET as well.

1. We must learn about jQuery even though it's very simple.
2. When using jquery UI widgets, jquery plugins, effects, animations, etc., we must learn more about "Options". I can't remember all their options, so I must check out the document every time I use them because VS.NET could not support all of jquery plugins or UI Intellisense it is a very terrible thing for me and I feel it wastes my time! For example, when I using datepicker, I must know more than 39 options! That is a nightmare! So I could be using less code for my application.

   $(function() {
      $("#datepicker").datepicker(
                                  buttonText:'Close',
   	                      changeMonth:true,
   	                      changeYear:true,
   	                      gotoCurrent:true,
   	                      showOn:'click',
                                  onselect:function(){
                                  ///.....
                                  });
                                  });  

   over 5 options that i can't remember any more....

3. When I use some widgets in different pages, I must copy and paste the HTML code or rewrite by hand! Tabs and accordion are often used. Their HTML code is so much more to write! Using this code in the server page makes no sense!

   <div id="accordion">
   <h3>
       <a href="#">Section 1</a></h3>
   <div>
       Section 1 content here
   </div>
   <h3>
       <a href="#">Section 2</a></h3>
   <div>
       Section 2 content here
   </div>
   <h3>
       <a href="#">Section 3</a></h3>
   <div>
       Section 3 content here
   </div>
   </div>

4. I must add the script references in every page (jquery's library has too many files. If combined in one, it will be very large!)
5. When the UI interacts with server, I only can use Callback or WebService event through just posting a ver to server!

So how can I "write less do more" ?! I write a lot of code for using jQuery!

"Write less do more" at Server!

Against such a background, I build a lightweight framework for jQuery in ASP.NET named "DJ".

Design Goal

• Using Server Control to render the HTML element that using jQuery.
• I don't want to remember the "options" again! VS.NET can know all the properties of WebControl and it has "Intellisense" so this framework must be able to convert the options to Control Property.
• The control can embed the jquery script resource and reference by itself.
• This type of control must write in a very simply way so that can be "write less do more".
• When handling server events, the control can implement the INamingContainer, IPostbackEventHandler, IPostbackDataHandler.
• I can write the client event scripts in control property directly.

So the server control's code looks just like this:

using System;
using System.Web.UI;
using DNA.UI; //step1:Import the DNA.UI library

//step2: add the JQuery Attribute to your control class header
[JQuery(Assembly="jQuery",Name="lightbox",ScriptResources=new string[]
	{"plugin.lightbox.js"})]
public class LightBox:Control
{
    //step3: add the JQueryOption Attribute to the property header
    [JQueryOption(Name = "fixedNavigation")]
    public bool FixedNavigation { get; set; }

    protected override void OnPreRender(EventArgs e)
    {
       //step4: Register the jQuery Control
        DNA.UI.ClientScriptManager.RegisterJQueryControl(this);
        base.OnPreRender(e);
    }
}

It's great! In just four steps, I wrote the lightbox Server Control! So I wrote all widgets of jquery.ui in "DJ" so that you can use theme to build your ASP.NET application quickly or you can using this framework to write your own jquery Server Controls!

See the difference between using pure jquery client script and DJ WebControl:

If you want to see more live demo of "DJ", you can visit my website and I put the latest version source code on CodePlex.

Resources

• Live Demo: In v1.1.15, the Live Demo site is updated. Added more than 100 samples to show you how to using DJ in ASP.NET applications
• QuickStart WiKi: QuickStart for the DJ Starter
• Community: The Community for DJ, post your ideas to improve the DJ or anything about the DJ
• API References: The DJ library's API References