Click here to Skip to main content
13,549,285 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


13 bookmarked
Posted 14 Nov 2012
Licenced CPOL

VisualJS.NET custom control development

, 14 Nov 2012
Rate this:
Please Sign up or sign in to vote.
How to use custom JavaScript controls under VisualJS.NET.


In this article I would like to show you how to use custom JavaScript controls under VisualJS.NET. Here I'm going to make a custom control based on Spinner from jQueryUI. In order to make this article easier for the interested developers, I am going to use the sample project from VisualJS.NET’s download that is also available under my package. Since this project includes premade custom controls like Calendar, Color picker, Slider etc. It will help us to create our custom control. 


C#, JavaScript 

Creating a Custom Control in a few steps

Once we have WebControls project opened in Visual Studio we need to copy a few files to the appropriate folders such as: 

  1. css – put a file jquery-ui-1.9.0.custom.min.css from JQueryUI/Spinner/css 
  2. img – put all images from JQueryUI-Spinner/css/Images 
  3. js – put a file jquery-ui-1.9.0.custom.min.js from JQueryUI-Spinner/js 

Although using these folders is not mandatory, I would like to keep files in right folders. 

You can assume your custom control as the combination of render and actions required for the expected functionality and look. For this reason we need to make the premade JQUERY Spinner component talking to VisualJS.NET in the way we wanted. Thus, we need to create a definition of the spinner at least in two parts, the JavaScript part and .NET part. JavaScript part will be the spinner.js file and .NET part is in Component class file. 

JavaScript part

First of all, every custom control class inherit from VSJS_CBase in order to have base functionalities provided by VisualJS client side interface.

VSJS_Spinner.prototype = new VSJS_CBase(); 

VisualJS.NET renders objects when they are needed or visible. You can still communicate to controls like they are rendered but they will be rendered by real when their visibility makes sense. Based on this fact, we can consider the spinner object will be created after the base component is rendered and this can be checked from the internal event OnRenderCompleted.  

this.OnRenderCompleted = function () {
	stop: function (event,ui) {
    	this.OnChanged(this.Name, null);
    },start: 0

In order to transfer values between server side (.NET part) and JQueryUI-Spinner component, I had to declare methods and properties on JavaScript part. The following code shows how to declare properties and methods. Also, I wanted trigger OnChanged event when one of the PageUp or PageDown actions occur. 

VSJS_Spinner.prototype.Page = function (_page) { 
    if (this._Rendered) { 
        $(this.input).spinner({ page: _page }); 
VSJS_Spinner.prototype.PageUp = function () {
    if (this._Rendered) {

        this.OnChanged(this.Name, null);

.NET part 

To operate the properties and events on the server side, I added a new Component class. The Component class - Spinner is derived from VisuaJS.TextBox and is added into the Web folder. In order to integrate .Net part with the JavaScript part the constructor of the Spinner component has to call base constructor with the Spinner as control type name. VisualJS.NET searches client for VSJS_Spinner in order to create new instances of this control every time. 

public Spinner() : base("Spinner") 

These next few tips will allow us to properly configure and register the component Spinner. For this purpose, we use several methods and properties of the namespace VisualJS.Kernel. The JQueryUI Spinner needs JQuery so the following code shows how to enable jQuery support. (GlobalAsaxHelper file under VisualJS folder is the best location for the below call) 

VisualJS.Kernel.Settings.JQuerySupport = true; 

From the namespace VisualJS.Kernel there are methods to easily merge files such as js, css etc. I use it to merge JQueryUI Spinner files with mine. Please keep in mind that all the resource files (JS, CSS etc) must be marked as  “Embedded Resource” on Visual Studio -> File Properties Window -> Build Actions

//js files
ComponentRegister.Merge(new string[]{
"WebControls.spinner.js", "js", Encoding.UTF8);

//css files
ComponentRegister.Merge(new string[]{                    
"WebControls.spinner.css.jquery-ui-1.9.0.custom.min.css" },
"WebControls.spinner.css", "css", Encoding.UTF8);

Then I had to register the Spinner folder using RegisterFolder method. Besides, to show images needed, I replaced the path of images in a JQueryUI-Spinner CSS file. That’s all what we need to configure and register the component in .NET part.     

Assembly appAsm = Assembly.GetExecutingAssembly();
string CSS = ComponentRegister.GetText("WebControls.spinner.css", Encoding.UTF8);
string[] resNames = appAsm.GetManifestResourceNames();
foreach (string resName in resNames) 
    	string fileName = resName.Replace("WebControls.spinner.img.","");
    	CSS= CSS.Replace("images/" + fileName, 
            "[$$VisualJSResourceTarget$$]?name="+ resName + "&type=image");
ComponentRegister.SetText("WebControls.spinner.css",CSS, Encoding.UTF8);

this.ClientLoadCheck("WebControls.spinner.css", ClientSideDocuments.CSS);

On server side I used few methods and properties from JQuery-Spinner so let's see how to declare property and method on server side. We can transfer a value of the property using method SetProperty and to call method using SetMethod method. 

int page = 1;
public int Page
    	return page;
    	if (page != value) 
        	SetProperty("Page", value);
    	page = value;

public void PageUp()

Testing the Control

  1. Add to solution a new project choosing the ASP.NET Web Application template.
  2. Add Support 
  3. Add reference to the WebControls project.
  4. Add Form 
  5. Spinner is on the toolbox thus we can put it on the form.
  6. You can play a bit changing it’s property e.g. Page, using method PageUp or implementing TextChange event. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Poland Poland
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180515.1 | Last Updated 14 Nov 2012
Article Copyright 2012 by artur.ur
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid