Sunday, July 01, 2007
JavaScript update with Master and Content Page

How do you update an asp.net controls via Java Script when working with Master and Content pages, to labels, textboxes and/or pure html controls?

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.

So here goes with what I have learnt, by example: (if your like me and want to see an example first then click this text)

<%@ Page Language="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()" />
    &nbsp; &nbsp;&nbsp;
  <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
{
    protected void 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.
 
Saturday, June 30, 2007 11:52:38 PM (GMT Standard Time, UTC+00:00)  #    Comments [0]  |