Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 9 Jun 2009
Rate this:
Please Sign up or sign in to vote.
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.
    $(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

License

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

Share

About the Author

Ray_Liang
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
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberclearsky774928-Dec-12 22:21 
General[My vote of 2] Missing graphics PinmemberDonsw13-Jun-10 6:32 
Generalnot working PinmemberYves4-May-10 10:22 
GeneralRe: not working PinmemberWind022-Feb-11 11:54 
Generaldamn i needed and i need this.. my vote of 5 PinmemberYves4-May-10 9:39 
GeneralWebsite not working Pinmemberwmjordan23-Mar-10 17:45 
Generalabout validation issue Pinmemberomkar mhaiskar29-Dec-09 17:43 
GeneralSo Cool!哥们 好样的! Pinmember王皓4-Aug-09 20:00 
Generalso cool idea Pinmemberlovelydinasour00128-Jul-09 4:51 
GeneralGood Job~! Pinmemberdefineconst21-Jun-09 22:07 
QuestionHow i will this work in .NET 2.0 ? Pinmemberulhas.deshmukh18-Jun-09 19:30 
GeneralVery useful Pinmembersimonor15-Jun-09 23:02 
QuestionHow can we update the library Pinmemberwmjordan31-May-09 21:56 
AnswerRe: How can we update the library PinmemberRay_Liang1-Jun-09 21:34 
GeneralI was looking for this PinmemberMember 155217922-May-09 12:14 
GeneralI really didnt knew about this.. PinmemberMubi | www.mubshir.com17-May-09 1:36 
General5 from me. Pinmembergstolarov16-May-09 14:32 
GeneralRe: 5 from me. Pinmemberbiopsy5-Oct-09 16:29 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 9 Jun 2009
Article Copyright 2009 by Ray_Liang
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid