While jQuery is becoming more and more popular by .Net web developers the transition from your smashing plugin to an actual server control isn’t always that straightforward.

DJ is a OpenSource framework intended to take care of this task. It comes with all of the existing jQuery UI controls already on board and a framework that allows you to easily make your own server control from an existing jQuery plug-in.

So let’s try it out. We start by downloading the files and referencing them to the solution.

First of let’s use the including jQuery UI Datepicker control. Notice the Intellisense on the properties, that just makes a hole lot easier to get it up and running.

Below is the result with a nice theme added. 
    
We’ll continue in that declarative manner and make use of the JQueryPlugin control. It requires us to reference our plug-in script file, specify the plug-in name, and add options to set it up properly. The target selector may be added as a regular jQuery string selector, or our server control id/ids.

Here’s the result, viewing that neat zoom plugin.

While this is great and get’s us up and running in no time it’s a lot cleaner and reusable to make a new web control out of it using the same framework. Let’s take a look at that also.

We create a new class that inherits from WebControl and attribute that with a JQuery attribute. Here we specify the resource files to out plug-in.

[JQuery(Assembly = "jQueryPlugins", Name = "jqzoom",
ScriptResources = new string[] { "Scripts.jqzoom.js" },
ScriptResourceBaseName="jQueryPlugins.")]
public class jQZoom : WebControl
{

Our properties can be converted into jQuery options using the JQueryOption attribute.

[JQueryOption(Name = "zoomWidth")]
public int ZoomWidth
{
get;
set;
}

We override OnPreRender and register the control using that built in scriptmanager.

protected override void OnPreRender(EventArgs e)
{
DNA.UI.ClientScriptManager.RegisterJQueryControl(this);
base.OnPreRender(e);
}
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.A;
}
}
public override void RenderBeginTag(HtmlTextWriter writer)
{
//<a href="largeimageurl"><img src="smalimageurl"/></a>
writer.AddAttribute("href", this.LargeImageUrl);
base.RenderBeginTag(writer);
}     
protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
{
writer.AddAttribute("src", this.SmalImageUrl);
writer.RenderBeginTag(HtmlTextWriterTag.Img);
writer.RenderEndTag();          
base.RenderContents(writer);
}

Conclusion

DJ is a promising framework for making use of your jQuery plugins in a ASP.NET. Just using the included controls takes you far and you may easily extend those by creating your own as described above.

Read more

http://www.dotnetage.com/

http://dj.codeplex.com/