Let the ASP.NET ScriptManager render jQuery

using ASP.NET client library + jQuery is not much of a fun, it makes use of lesser jQuery core functionalities. But we sure want to use the ASP.NET to create our server-side HTML code and use jQuery to give the UI behavior.

I have a small class that abstracts the behavior and makes the ScriptManager to render out JavaScript code for jQuery. This really helps out in keeping jQuery code be jQuery itself,

   1: using System;
   2: using System.Collections.Generic;
   3: using System.Text;
   4: using System.Web.UI;
   5: using System.Web.Script.Serialization;
   6: 
   7: namespace jQuery.Plugins {
   8:     public class jQueryComponentDescriptor : ScriptDescriptor {
   9: 
  10:         private string _type;
  11:         private string _elementID;
  12:         private SortedList<string, object> _properties;
  13:         internal const string NullStringException = "Cannot have null string";
  14:         private JavaScriptSerializer _serializer;
  15: 
  16:         public jQueryComponentDescriptor(string type) {
  17:             this._type = type;
  18:             this._properties = new SortedList<string, object>();
  19:             this._serializer = new JavaScriptSerializer();
  20:         }
  21: 
  22:         public jQueryComponentDescriptor(string type, string elementID)
  23:             : this(type) {
  24:             this._elementID = elementID;
  25:         }
  26: 
  27:         public string ElementID {
  28:             get {
  29:                 return this._elementID;
  30:             }
  31:         }
  32: 
  33:         public void AddProperty(string propertyName, object value) {
  34:             if (string.IsNullOrEmpty(propertyName))
  35:                 throw new InvalidOperationException(NullStringException);
  36:             this._properties[propertyName] = value;
  37:         }
  38: 
  39:         protected override string GetScript() {
  40:             //return the jQuery script here
  41:             if (this._properties.Count > 0) {
  42:                 StringBuilder builder = new StringBuilder();
  43:                 builder.Append("$('#" + this.ElementID + "')");
  44:                 builder.Append("." + this._type);
  45:                 builder.Append("({");
  46:                 int i = 0;
  47:                 foreach (KeyValuePair<string, object> pair in this._properties) {
  48:                     i++;
  49:                     builder.Append(pair.Key);
  50:                     builder.Append(":");
  51:                     builder.Append(this._serializer.Serialize(pair.Value));
  52:                     if (i != this._properties.Count)
  53:                         builder.Append(",");
  54:                 }
  55:                 builder.Append("});");
  56:                 return builder.ToString();
  57:             }
  58:             return string.Empty;
  59:         }
  60: 
  61:     }
  62: }

 

Now use this code instead of the ScriptControlDescriptor / ScriptComponentDescriptor that we normally use with the IScriptControl implementation in our server-sided code,

   1: IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors() {
   2:     jQueryComponentDescriptor jDesc = new 
jQueryComponentDescriptor("somejQueryPlugin", this.ClientID);
   3:     jDesc.AddProperty("positiveTextColor"
this.PositiveTextColor);
   4:     jDesc.AddProperty("negativeTextColor"
this.NegativeTextColor);
   5:     yield return jDesc;
   6: }

 

That was pretty simple. Once you have this done, the ASP.NET ScriptManager would automatically create the load up script code as,

   1: Sys.Application.add_init(function() {
   2:     $('#something').somePlugin({negativeTextColor:"Red"
,positiveTextColor:"Blue"});
   3: });

 

I just started working on this and so there might be issues with the jQueryComponentDescriptor. Do let me know if you face any issues with different scenarios. In the next post I will make out a clear sample that uses both this functionality.

Hope this helps!!

-Fahad

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: