The scribles of my thoughts

My previous post talks about how to create server-control shown in the Toolbox and click-and-drag enabled, and also about creating a server-control shown in toolbox with own icon but what if you want to automatically add/inject javascript? This post will talk about exactly that.

There's two approach for this:

1. to dump the JavaScript code directly into the page
2. to put the JavaScript code into a file and link that file

Although the first approach is straight forward, I personally prefers the 2nd approach as it's more efficient and allow the browser to cache the code, hence reduce the bandwidth usage and time to download.

Now, let's assume that we have a JavaScript file called Funky.js with the following code in it:

function TestFunction(ctrl) {
 alert("Test");
}

First of all, we need to add Funky.js into the project, and afterwards your Solution Explorer will look like the following:

Then, just like with adding the BMP as custom icon in creating a server-control shown in toolbox with own icon, we will have to set its Build Action property into Embedded Resource like the following image:

Afterwards, we have to modified the code, from:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdvSolutions.MyControlLibrary
{
 [ToolboxData(@"<{0}:LogoControl runat=""server"" CompanyName="" "" LogoUrl="" "" />")]
 public class LogoControl : WebControl
 {
  public LogoControl() { }
  public String CompanyName { get; set; }
  public String LogoUrl { get; set; }
  protected override void Render(HtmlTextWriter writer)
  {
   writer.RenderBeginTag("div");
   writer.Write("<img src=\"{0}\" /><br />", this.LogoUrl);
   writer.Write(this.CompanyName + "<br />");
   writer.RenderEndTag();
  }
 }
}

into the following:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AdvSolutions.MyControlLibrary
{
 [ToolboxData(@"<{0}:LogoControl runat=""server"" CompanyName="" "" LogoUrl="" "" />")]
 public class LogoControl : WebControl
 {
  public LogoControl() { }
  public String CompanyName { get; set; }
  public String LogoUrl { get; set; }
  protected override void OnPreRender(EventArgs e)
  {
   Page.ClientScript.RegisterClientScriptInclude("LogoUrl", Page.ClientScript.GetWebResourceUrl(this.GetType(),_
"AdvSolutions.MyControlLibrary.Funky.js"));
   base.OnPreRender(e);
  }
  protected override void Render(HtmlTextWriter writer)
  {
   writer.AddAttribute("onclick", "TestFunction(this);");
   writer.RenderBeginTag("div");
   writer.Write("<img src=\"{0}\" /><br />", this.LogoUrl);
   writer.Write(this.CompanyName + "<br />");
   writer.RenderEndTag();
  }
 }
}

You'll see that we have to override OnPreRender as well, otherwise, it will be too late for us to tell ASP.NET that we want to link Funky.js.

Now, many tutorial stops here. However, I found that you have to perform another crucial step. Which is to add the following code:

[assembly: WebResource("AdvSolutions.MyControlLibrary.Funky.js", "text/javascript")]

at the end of your AssemblyInfo.cs file.

If you observe carefully, that line is composed from the Namespace and the filename. Now, if for instance you move Funky.js from the root folder of your project to a subfolder called Scripts for example, then you will have to change that line into:

[assembly: WebResource("AdvSolutions.MyControlLibrary.Scripts.Funky.js", "text/javascript")]

and we also have to modified the line in the OnPreRender from AdvSolutions.MyControlLibrary.Funky.js into AdvSolutions.MyControlLibrary.Scripts.Funky.js.

When you use this control, whenever you click on the logo the javascript will pops out a message. I know that the functionality is trivial, but I believe this will teach you the fundamentals to do more exciting things.

Have fun.