Turn: http://www.codeproject.com/cs/miscctrl/htmlwincontrol.asp
- Download source files-7.5 KB
- Download Demo project-14.5 KB
Introduction
This article intends to show a very simple way to add any windows Form Control to any HTML page, whether it is an ASP. net web form or any other simple HTML page. it is useful because sometimes we need extra functionality in our web pages, which simple HTML controls do not always provide. it is being used for a long time now (ActiveX) and this is a way to do the same using. net. you coshould think of I T as a C # applet. this approach will need that. net Runtime is installed on the client machines, which may be an inconvenience compared to real ActiveX, but as with Java, why not download. net runtime?
Using the code
First of all we need (of course) our control, so we need to createUsercontrol
And build it in A. Net assembly. To avoid any complexity I usedDatetimepicker
, Extended it, and addedDate
Property that returns the short date format ofDatetime
Property of the control. Why this one? No reason, but there has been always the need for good date controls, and this one is very good.
Here's some of the Code:
.... namespace deacero. web. controls. datetime { Public class datetimepicker: system. windows. forms. datetimepicker {.... Public string Date { Get { return value. tow.datestring () ;}< SPAN class = "CS-keyword"> Public datetimepicker (): base () {initializecomponent ();}.... private void initializecomponent () { This . format = system. windows. forms. datetimepickerformat. short ;}.... |
Once we build (and prove) our control, we need to add it in the web page. To add an ActiveX control to an HTML page, we need to use the tag:
& Lt; Object ID = myid classid = myclassid & gt; |
WhereID
Attribute is the identifier of the control. To access the control from a javascript block (for example), this is the name we have to use.Classid
Attribute contains information of the file and class that contains the control. There's no need forCodebase
Attribute since the. NET runtime and explorer do the download process automatically.
Here's an example:
& Lt; Object ID = "datetimepicker" Height = "31" width = "177" classid = "bin/deacero. web. controls. datetime. DLL # deacero. web. controls. datetime. datetimepicker "viewastext & gt; & lt;/object & gt; |
Now let's have a look atClassid
Attribute.Bin/
Part is the relative path of the DLL file containing our control, in this caseDeacero. Web. Controls. datetime. dll. So in the example, the DLL is located insideBinDirectory which is in the same directory as the HTML page containing<Object>
Tag.
The next part,Deacero. Web. Controls. datetime. dll
, Is just the name of the file (assembly) containing the control. The last part (notice the # separator)Deacero. Web. Controls. datetime. datetimepicker
Is the full name of the class that implements the control, including the namespace.
That's all the code we need to add this control to the page. To access the control'sPublic
Methods and properties, we just need scripting say JavaScript, for example:
& Lt; script language = <SPAN class = "CPP-string"> "JavaScript" </span> & gt; <SPAN class = "CPP-keyword"> function </span> button1_onclick () {<SPAN class = "CPP-comment"> // If datetimepicker is outside a form </span> alert (datetimepicker. date); <SPAN class = "CPP-comment"> // If datetimepicker is inside a form (like in a ASP. net webform) </span> alert (form1.datetimepicker. date) ;}& lt;/script & gt; |
This woshould needOnclick
Event of some button control point to that function. Example:
& Lt; input id = "button1" type = "button" value = "button" name = "button1" onclick = "Return button#onclick ()" & gt; |
Points of interest
There are some considerations to take in count when doing this. First, all client machines must have installed the. NET runtime framework in order to run the control, otherwise it will not work.
Second, the page and the DLL must be hosted in a virtual directory in IIS, this will not work locally or in other Web servers (at least it is not proven to do so ). also, the folder where the DLL containing the control is located must haveReadPermissions.
And that is all we need to know. I have ded complete examples in the source & demo downloads. The source contains the control and the demo contains the HTML and web forms examples of use.
I hope someone finds this article useful.