VisualJS.NET custom control development

• Download spinner.zip - 8 MB

Introduction

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. 

Background

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 () {
    $(this.input).spinner({
	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.input).spinner("pageUp");

        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.jquery-ui-1.9.0.custom.min.js",
"WebControls.spinner.js.spinner.js"}, 
"WebControls.spinner.js", "js", Encoding.UTF8);

//css files
ComponentRegister.Merge(new string[]{                    
"WebControls.spinner.css.spinner.css",                   
"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();
            
ComponentRegister.RegisterFolder(appAsm,"WebControls.spinner");
string CSS = ComponentRegister.GetText("WebControls.spinner.css", Encoding.UTF8);
string[] resNames = appAsm.GetManifestResourceNames();
foreach (string resName in resNames) 
{            
    if(resName.StartsWith("WebControls.spinner.img"))
    {
    	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.js",ClientSideDocuments.Script);
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
{
	get
    {
    	return page;
    }
	set
    {
    	if (page != value) 
        	SetProperty("Page", value);
    	page = value;
    }
}

public void PageUp()
{
	SetMethod("PageUp",null);
} 

Testing the Control

1. Add to solution a new project choosing the ASP.NET Web Application template.
2. Add VisualJS.net Support 
3. Add reference to the WebControls project.
4. Add VisualJS.net 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.