Post
Ask Question

Write jQuery plugin WebControl for ASP.NET just in Few Minutes

DJ_Src

Updates 

   2009/6/8 The DJ v1.1.15 is release. 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 happend...   

Background

 We has some 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 ect. we must learn more about "Options". i can't remember all the options of them so i must check out the document very time i using them becuse the VS.NET could not support all of jquery plugin or ui Intellisense it is a very terrible thing for me an i feel it wasting my time! for example when i using datepicker,i must know more then 39 options! that is a nightmare! so that i could using the 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 remeber any more....
  • 3.When i using some widget in deifferen page i must copy and paste the html code or rewrite by hand! tabs and accordion is offen to use. they are html code is so more to write!Using this code in server page it make make 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 to many files.if combine in one that it will be so large!).
  • 5.When the ui interact with server i only can using Callback or WebService event thought just post a ver to server!

So how i can "write less do more" ?! I write many 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 can be convert the options to Control Property
  • The contorl can embedded the jquery script resource and reference by itself.
  • This type of control must write in very simply way so that can be "write less do more"
  • When handling server events the control can be implement the INamingContainer,IPostbackEventHandler,IPostbackDataHandler
  • I can write the client event scripts in control property directly.

so the server control's code just like this:

using System;
using System.Web.UI;
using DNA.UI; //step1:Import the DNA JQuery UI Framework 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! just four steps i write the lightbox Server Control! so i write all widgets of jquery.ui in "DJ" so that you can use theme to build your asp.net application quick 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 see more live demo of "DJ" you can visit my websitehttp://www.dotnetage.com and i put the lastest version source code on CodePlex

 Resources

Live Demo:in v1.1.15 the Live Demo site is updates.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 impove the DJ or anything about the DJ.
API References:The DJ library 's API References. 


Similar Articles