Click here to Skip to main content
15,867,568 members
Articles / Web Development / XHTML

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

Rate me:
Please Sign up or sign in to vote.
4.50/5 (27 votes)
9 Jun 2009GPL33 min read 219.5K   2.6K   115   18
Write jQuery plugin WebControl for ASP.NET just in few miniutes!
DJ_Src

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.
    JavaScript
    $(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!
    HTML
    <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:

C#
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

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Architect DotNetAge
China China
In 1999, I started programming using Delphi, VB, VJ.From 2002 I started with .NET using C#.Since 2005 when i had became an EIP product manager I was focus on EIP and CMS technique. In 2008 i established dotnetage.com and started to shared my ideas and projects online. I believe "No shared no grow"

www.dotnetage.com

Comments and Discussions

 
GeneralMy vote of 5 Pin
clearsky774928-Dec-12 22:21
clearsky774928-Dec-12 22:21 
General[My vote of 2] Missing graphics Pin
Donsw13-Jun-10 6:32
Donsw13-Jun-10 6:32 
Generalnot working Pin
Yves4-May-10 10:22
Yves4-May-10 10:22 
GeneralRe: not working Pin
Wind022-Feb-11 11:54
Wind022-Feb-11 11:54 
Generaldamn i needed and i need this.. my vote of 5 Pin
Yves4-May-10 9:39
Yves4-May-10 9:39 
GeneralWebsite not working Pin
wmjordan23-Mar-10 17:45
professionalwmjordan23-Mar-10 17:45 
Generalabout validation issue Pin
omkar mhaiskar29-Dec-09 17:43
omkar mhaiskar29-Dec-09 17:43 
GeneralSo Cool!哥们 好样的! Pin
王皓4-Aug-09 20:00
王皓4-Aug-09 20:00 
Generalso cool idea Pin
lovelydinasour00128-Jul-09 4:51
professionallovelydinasour00128-Jul-09 4:51 
GeneralGood Job~! Pin
Watson Jason21-Jun-09 22:07
Watson Jason21-Jun-09 22:07 
QuestionHow i will this work in .NET 2.0 ? Pin
ulhas.deshmukh18-Jun-09 19:30
ulhas.deshmukh18-Jun-09 19:30 
GeneralVery useful Pin
simonor15-Jun-09 23:02
simonor15-Jun-09 23:02 
QuestionHow can we update the library Pin
wmjordan31-May-09 21:56
professionalwmjordan31-May-09 21:56 
AnswerRe: How can we update the library Pin
Ray_Liang1-Jun-09 21:34
Ray_Liang1-Jun-09 21:34 
GeneralI was looking for this Pin
Arun Krishnakumar22-May-09 12:14
Arun Krishnakumar22-May-09 12:14 
GeneralI really didnt knew about this.. Pin
Mubi | www.mrmubi.com17-May-09 1:36
professionalMubi | www.mrmubi.com17-May-09 1:36 
General5 from me. Pin
gstolarov16-May-09 14:32
gstolarov16-May-09 14:32 
GeneralRe: 5 from me. Pin
biopsy5-Oct-09 16:29
biopsy5-Oct-09 16:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.