I looked long and hard to find the answer to the abouve question. The answer
is out there if you can find it, but it took me in excess of 3 hours to get to the
answer of the above question. I also wanted to be able to determine the time
of the client computer rather than the servers time.
<%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
CodeFile
="JavaScriptUpdateWithMasterAndContentPage.aspx.cs"
Inherits
="JavaScriptUpdateWithMasterAndContentPage"
Title
="JavaScript
Update With Master And Content Page"
%>
<
asp
:
Content
ID
="Content1"
ContentPlaceHolderID
="ContentPlaceHolder1"
runat
="Server">
<
script
language
="javascript"
type
="text/javascript">
// Get users current time
function
getTime()
{
// Get client computers date and time
var
today=
new
Date();
var
h = today.getHours();
var
m = checkTime( today.getMinutes()
);
var
s = checkTime( today.getSeconds()
);
// Update content of HTML div, ASP:TextBox and asp:Label
document.getElementById(
"div1"
).innerText
= h+
":"
+m+
":"
+s;
document.getElementById(
"<%=TextBox1.ClientID
%>"
).value = h+
":"
+m+
":"
+s;
document.getElementById(
"<%=Label1.ClientID
%>"
).innerText = h+
":"
+m+
":"
+s;
document.getElementById(
"<%=HiddenField1.ClientID
%>"
).innerText = h+
":"
+m+
":"
+s;
return
false
;
}
// Ensure that minutes and seconds are
2 digits in length
function
checkTime(i)
{
if
(i<10) {i=
"0"
+
i}
return
i; }
</
script
>
<
div
id
="div1">
HTML
div text here (text prior to a button press)
</
div
>
<
asp
:
TextBox
ID
="TextBox1"
runat
="server"
Width
="326px">
asp:TextBox
text here (text prior to a button press)
</
asp
:
TextBox
><
br
/>
<
asp
:
Label
ID
="Label1"
runat
="server"
Text
="asp:Label
text here (text prior to a button press)"
Width
="326px"></
asp
:
Label
><
br
/>
<
asp
:
HiddenField
ID
="HiddenField1"
runat
="server"
/>
<
br
/>
<
asp
:
Button
ID
="Button1"
runat
="server"
Text
="ASP
Button"
OnClientClick
="getTime()"
/>
<
input
id
="Button2"
type
="button"
value
="HTML
button"
onclick
="getTime()"
/>
</
asp
:
Content
>
The clever bits are in bold and "Red" or
"BurlyWood".
The
(
"<%=TextBox1.ClientID
%>
works out the internal name of
the control as its used by the page when view at source.
Getting the JavaScript to update the hidden
field allows us to update the label on post back, see code behind below.
I deliberately have not made the HTML control div1 part of the
"asp runat server" to demonstate the difference in the control style,
but it could be and there for the getElementById("div1") would
need to be changed to getElementById("<%=div2.ClientID
%>").
The other clever bit is to use a hidden field to allow the post
back to pick up this value and re-apply to the required text,
this currently is just the Label1, but could also be the div1
when runat="server" is applied.
Heres the code behind for the update when the asp:Button1 is
clicked, is just accepting that a post back that has been raised and using the hidden
field to apply the text back to the label (Label1).
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public
partial
class
JavaScriptUpdateWithMasterAndContentPage :
System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
Label1.Text = HiddenField1.Value;
}
}
}
And just for completeness (because I personally hate examples
that cannot be run,
I've included a simple master page that relates to the above
code):
<%
@
Master
Language
="C#"
AutoEventWireup
="true"
CodeFile
="MasterPage.master.cs"
Inherits
="MasterPage"
%>
<!
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">
<
head
runat
="server">
<
title
>
ajax.jtbarton.com
AJAX, JavaScript and Master / Content Pages
</
title
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server">
<
div
>
<
strong
>
Welcome
to John T Barton's AJAX test page
</
strong
><
br
/>
<
asp
:
ContentPlaceHolder
ID
="ContentPlaceHolder1"
runat
="server">
</
asp
:
ContentPlaceHolder
>
</
div
>
</
form
>
</
body
>
</
html
>
There is no code
behind for this master page file, I was keeping the sample simple.
Thats really how
simple it is when you finally work out the solution.
I must reference the following link which some
of the above code is based on:
http://www.coveryourasp.net/Technical/ClientsideIDs
I'm thinking of writing a follow up article
to show how these controls can be updated via an AJAX UpdatePanel and Timer, but unless
I
get some feedback about this article I will
not bother, the decision is yours.