The video for today's lunch was about .NET RIA Services. A framework for building n-tier application with rich clients as Silverlight, AJAX or WPF. This was announced at MIX 09 and there are a couple of interesting webcasts about it. Enjoy!

http://videos.visitmix.com/MIX09/t41f

http://videos.visitmix.com/MIX09/T40F

Don't forget to also visit the blogs of Nikhilk and Brad as the write quite alot about this subject.

http://www.nikhilk.net/

http://blogs.msdn.com/brada/

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/

Client templating is basically used for displaying JSON data on the page using a predefined HTML template. This technique is included in the preview of ASP.NET AJAX 4.0 but there is already a bunch of existing templating engines avaliable and we are going to take alook at a plugin for jQuery called jTemplates_. jTemplates uses a basic syntax for displaying JSON data, creating for-loops and other logic in the template. This engine works wery well with the scriptproxy in ASP.NET AJAX and we are going to create a simple productlist to demonstrate this.

Lets start by creating the productservice, remember to attribute the serviceclass with the [ScriptService] tag to activate the AJAX proxy.

The servicemethod is pretty straightforward and returns a list of products, each including a title, description and image property.  The html in the aspx file doesn't contain that much, a container for the list to be rendered in and a loading text that will be replaced with the template content. 

It's time for the javascript part, and first of is defining the load method. This is put in the jQuery .ready() function which will execute when the DOM is fully loaded. 

  The LoadProducts makes an AJAX post to the GetProducts method in our sevice, if successfull we forward the returning JSON objects to our template engine. 

This will first set the template which is a standard .htm page including the jTemplate syntax and html. When it's set we execute the processTemplate method with the JSON objects passed in.



The template will return an unordered list with items, each with html for displaying the properties defined in our product object.



Finally the resulting list with some CSS added. jTemplates makes it wery easy to display your JSON data as html and at the same time gives us a clean separation of logic and presentation.