Creating a custom control in asp.net that has javascript properties and methods

As a starting point for creating custom controls, I would like to make a control that simply displays a number. If we imagine the .ascx file contains nothing except for a literal control, and the code behind sets that value to 1.

I then want to be able to do myControl.increment(); This will run some javascript that increases the value of the literal control.

I could inject a javascript into the page, such as pseudocode:

page_load
{

  scriptything.register("function increment(x) { $('#开发者_如何学CmyLiteral').increment(); });

}

or something, but that wouldn't be myControl.increment, that would just be increment(). More than one control on the page would screw it up.

Anyone know how I can achieve my goal of coupling the javascript with the custom control? Am I asking the impossible?

---

It is very possible.

I have a class CalledCustomControlLibrary.

it contains several folders which include images and scripts. You can include those types of items using [assemply: WebResource]

IE

[assembly: WebResource("CustomControlLibrary.LeftRight.local_img.leftArrow.jpg", "img/jpg")]
[assembly: WebResource("CustomControlLibrary.LeftRight.local_img.rightArrow.jpg", "img/jpg")]
[assembly: WebResource("CustomControlLibrary.LeftRight.local_js.leftright.js", "application/javascript")]
[assembly: WebResource("CustomControlLibrary.global_js.jquery-1.3.2.js", "application/javascript")]
[assembly: WebResource("CustomControlLibrary.global_js.mousehold.js", "application/javascript")]

Then in the onload event of the class you can register the client scripts like:

        string tsJQueryJS = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControlLibrary.global_js.jquery-1.3.2.js") ;
        string tsMousehold = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControlLibrary.global_js.mousehold.js");
        string tsLeftRightJS = Page.ClientScript.GetWebResourceUrl(this.GetType(), "CustomControlLibrary.LeftRight.local_js.leftright.js");

        if (!Page.ClientScript.IsClientScriptIncludeRegistered("JQuery" )) { Page.ClientScript.RegisterClientScriptInclude("JQuery", tsJQueryJS); }
        if (!Page.ClientScript.IsClientScriptIncludeRegistered("Mousehold")) { Page.ClientScript.RegisterClientScriptInclude("Mousehold", tsMousehold); }
        if (!Page.ClientScript.IsClientScriptIncludeRegistered("LefRightJS")) { Page.ClientScript.RegisterClientScriptInclude("LeftRightJS", tsLeftRightJS); }

The entire control is housed simply in the class. which inherits WebControl and IPOstBackDataHandler. This control in particular is for a control that has a left and right arrow button and increments or decrements the number value in the text box based on holding the buttons.

---

Yes, you want to look at JavaScript class development like this as one example (there are others): http://www.howtocreate.co.uk/tutorials/javascript/objects

You may really want to look at developing ASP.NET AJAX controls, which integrate server-side controls and AJAX capabilities. I developed a few and I have written a few articles on this subject:

• http://www.devproconnections.com/article/aspnet2/reuse-recycle-extend.aspx
• http://www.devproconnections.com/article/aspnet2/Building-a-Custom-AJAX-Control-with-the-Help-of-jQuery.aspx
  • http://www.devproconnections.com/article/aspnet2/ajax-abstraction.aspx

For JQuery, use this:

• Plugins: http://docs.jquery.com/Plugins/Authoring
• Widgets: http://docs.jquery.com/UI_Developer_Guide

HTH.