Thursday, September 24, 2009

Reading CheckBoxes and Radio Buttons


Input tags with the type attribute checkbox can be grouped like radio buttons
so that several checkboxes have the same name. However, any number of checkboxes
can be selected by the user. Working with checkboxes in JavaScript is similar
to but not exactly the same as working with radio buttons. Here is a short example
that demonstrates getting values from checkboxes and radio buttons in the same
form:

MUSIC SURVEY





GETTING ALL THE VALUES

A series of checkboxes with the same name are reflected as an array of checkbox
objects. In this example each check box input tag is named Music
but has a different value. Since there are identically named input tags of the
same type, an array of checkbox objects named Music is created.
When the button in this form is pressed, it passes a reference to the form to
a function named, in this case, showBoxes(frm). The function loops
through the checkbox array within the form. To access the check box array from
the form reference it is only necessary to append the name of the checkboxes
to the form reference:
frm.Music
For example to access the number of elements in the array:
frm.Music.length
or if the variable i contains the index of one of the elements,
here is how you would check to see if that element had been checked:
if (frm.Music[i].checked)
or get that element's value:
frm.Music[i].value
Since many values may be checked, this example gathers the values from each by appending each value
on to the end of a string. Since the string is eventually displayed in an alert dialog each value is
separated by a "\n", or new line character. In this case the string is named messagemessage = message + frm.Music[i].value + "\n"

Here is the complete page:
<HTML>
<HEAD>
<TITLE>JavaScript - Reading Checkboxes and Radio Buttons</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showBoxes(frm){
var message = "Your chose:\n\n"

//For each checkbox see if it has been checked, record the value.
for (i = 0; i < frm.Music.length; i++)
if (frm.Music[i].checked){
message = message + frm.Music[i].value + "\n"
}

//For each radio button if it is checked get the value and break.
for (var i = 0; i < frm.Performer.length; i++){
if (frm.Performer[i].checked){
message = message + "\n" + frm.Performer[i].value
break
}
}
alert(message)
}

//NOTE THE onClick="" empty event handlers in the checkbox and radio input fields below
//are there to fix a bug in Netscape 2.0X. Placing an onClick handler in imput fields fixes
//a bug where input objects inside tables are reflected more than once.

//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff">
<FORM NAME="boxes">
<HR size=1 noshade>
<h2>Music Survey </h2>
<TABLE BORDER="1" CellSpacing="0" CellPadding="6">
<TR>
<TD align="right">I enjoy:</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Classical" onClick="" CHECKED>Classical</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Chamber" onClick="">Chamber</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Jazz" onClick="" CHECKED>Jazz</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Rock" onClick="">Rock</TD>
<TD><INPUT TYPE="Checkbox" NAME="Music" VALUE="Punk" onClick="">Punk</TD>
</TR>
<TR>
<TD><div align="right">Favourite Performer:</div></TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Aitken" onClick="">Aitken</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Coltrane" onClick="" CHECKED>Coltrane</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Julliard" onClick="">Julliard</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Kronos" onClick="">Kronos</TD>
<TD><INPUT TYPE="radio" NAME="Performer" VALUE="Waits" onClick="">Waits</TD>
</TR>
</TABLE>
<P>
<INPUT TYPE="Button" VALUE="Tell Us What You Like!" onClick="showBoxes(this.form)">
</P>
</FORM>
</BODY>
</HTML>


ASP NET AJAX Coding for Refresh Date Time without Refresh

Introduction AJAX
AJAX stands for Asynchronous JavaScript And XML.
AJAX is a new technique to develop a interative web page and responsible to exchange data with the behind server without reload the web page.
AJAX increase the speed and usability of the web application.
AJAX is based on JavaScript and XMLHttpRequest.

ASP.NET AJAX combines the power of ASP.NET on the server with the richness of client-side AJAX execution. Asp.net AJAX is a free framework for quickly develop a more interative and usability web page that work almost across all browsers - IE, Firefox and etc.
To download asp.net ajax library click here
Sample asp.net ajax below show you a simple coding for asp.net ajax to refresh date time without reload the page

Result - After compile the code, Both date time is same.

Result - After user click the refresh button, is only update the date time in <asp:update panel>

.aspx - asp net Front Page
<body>
<form id="form1" runat="server">
Outside of update panel <br />
<asp:Label ID="noAjaxtimetxt" Text="" runat="server"></asp:Label>
<br /><br />
<table bgcolor="yellow"><tr><td>

Inside update panel
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:Label ID="Ajaxtimetxt" Text="" runat="server" />
<asp:Button ID="btn" Text="refresh" runat="server" />

</ContentTemplate>
</asp:UpdatePanel>

</td></tr></table>
</form>
</body>

.vb - asp net Code Behind Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
noAjaxtimetxt.Text = Date.Now()
Ajaxtimetxt.Text = Date.Now()
End Sub

META http-equiv Auto Refresh every 10 second

Meta Object
It represents an HTML element.
It is a element provides meta-information about a HTML document (descriptions and keywords for search engines and refresh rates).

Meta Object have 4 properties:
content - set or get a value (any text)
httpEquiv - Connect to http header (content-type, expires,refresh,set-cookie)
name - name of attribute (author,description,keywords,generator,etc)
scheme - format for the attribute value

Example below show you the using of http-equiv,content and name
Below example will show automatic refresh the page every 10 seconds.
Http-equiv="refresh" will do the refresh action and content=10 is telling
http-equiv to do the refresf after every 10 seconds.

If you need to test it, you just copy and paste to ur file and run it.

<head>
<meta http-equiv="refresh" content="10" />
<meta content='programmingschools,Javascript, asp net programming,' name='keywords' /> </head>
<script type="text/javascript">
now = new Date();
hour = now.getHours();
min = now.getMinutes();
sec = now.getSeconds();
document.write(hour + ":" + min + ":" + sec );
</script>
<body>
</body>

Tuesday, September 15, 2009

Adding Meta Tags to the Head in ASP.NET 2.0

// Render:
HtmlMeta meta = new HtmlMeta();
meta.Name = "keywords";
meta.Content = "Some words listed here";
this.Header.Controls.Add(meta);

// Render:
meta = new HtmlMeta();
meta.Name = "robots";
meta.Content = "noindex";
this.Header.Controls.Add(meta);

// Render:
meta = new HtmlMeta();
meta.Name = "date";
meta.Content = DateTime.Now.ToString("yyyy-MM-dd");

meta.Scheme = "YYYY-MM-DD";