How to make web user control?

  • Thread starter Thread starter VB Programmer
  • Start date Start date
V

VB Programmer

I have a SIMPL HTML form that displays a javascript clock.

I want to take this component and put it in a web user control so that I can
reuse it easily.

The problem is I don't know what to do with some of the elements, like...
- <BODY ONLOAD="jsClock()"> **** no BODY in web user control
- <FORM... > **** is the form tag allowed?
- document.clockForm.NewYork.value (reference needs to be changed?)
- etc...

Any ideas? Here's the HTML form...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
document.clockForm.NewYork.value = temp
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>

<BODY ONLOAD="jsClock()">

<FORM NAME="clockForm"><strong>
<span style="color: blue">
New York</span> </strong>
<input id="NewYork" type="text" value="Loading..." style="font-weight: bold;
color: blue; width: 102px;" /><strong></strong>
</FORM>
</BODY>
</html>
 
Here's how I'd do it in .NET 2.0. Just create a user control called
clockl.ascx and use this as the code.

The key changes are that this puts the time in a label rather than an input
control on the form. You use ASP.NET to output the JavaScript and then start
it running.

When the user control is ready, just drop it on the form.

Let us know if this helps?

Ken


<%@ Control Language="VB" ClassName="clockl" %>

<script runat="server">

Protected Sub Page_Load _
(ByVal sender As Object, _
ByVal e As System.EventArgs)
Dim sb As New StringBuilder
sb.Append("function jsClock(){")
sb.Append("var time=new Date();")
sb.Append("var hour=time.getHours();")
sb.Append("var minute=time.getMinutes();")
sb.Append("var second=time.getSeconds();")
sb.Append("var temp='' + ((hour > 12)?hour - 12:hour);")
sb.Append("if(hour==0) temp = '12';")
sb.Append("if(temp.length==1) temp=' '+temp;")
sb.Append("temp+=((minute<10)?':0':':')+minute;")
sb.Append("temp +=((second<10)?':0':':')+second;")
sb.Append("temp +=(hour>=12)?' PM':' AM';")
sb.Append("document.getElementById('" & _
lblNewYork.ClientID & "').innerText=temp;")
sb.Append("id=setTimeout('jsClock()',1000);")
sb.Append("}" & Environment.NewLine)
If Not Page.ClientScript.IsClientScriptBlockRegistered _
("clockjs") Then
Page.ClientScript.RegisterClientScriptBlock _
(Me.GetType, "clockjs", sb.ToString, True)
End If
If Not Page.ClientScript.IsStartupScriptRegistered _
("starter") Then
Page.ClientScript.RegisterStartupScript _
(Me.GetType, "starter", "jsClock();", True)
End If

End Sub
</script>
<asp:label id="lblNewYork" runat="server" text=""></asp:label>
 
Remove <html>,<body>, <form> tags from content. It likes

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
//document.clockForm.NewYork.value = temp
document.getElementById('NewYork').value = temp;;
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>
<strong><span style="COLOR: blue">New York</span></strong><input
id="NewYork" type="text" value="Loading..."
style="FONT-WEIGHT: bold; WIDTH: 102px; COLOR: blue"><strong></strong>
<script>jsClock();</script>


HTH

Elton Wang
 
Perfect! Thanks y'all!


Elton W said:
Remove <html>,<body>, <form> tags from content. It likes

<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
if(hour==0) temp = "12"
if(temp.length==1) temp = " " + temp
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " PM" : " AM"
//document.clockForm.NewYork.value = temp
document.getElementById('NewYork').value = temp;;
id = setTimeout("jsClock()",1000)
}
//-->
</SCRIPT>
<strong><span style="COLOR: blue">New York</span></strong><input
id="NewYork" type="text" value="Loading..."
style="FONT-WEIGHT: bold; WIDTH: 102px; COLOR: blue"><strong></strong>
<script>jsClock();</script>


HTH

Elton Wang
Click to expand...
 
Back
Top