Click here to Skip to main content
15,896,118 members
Articles / Web Development / HTML

Magic AJAX: Applying AJAX to your existing Web Pages

Rate me:
Please Sign up or sign in to vote.
4.82/5 (72 votes)
28 May 2007MIT12 min read 982.8K   2.7K   251  
How to apply AJAX technologies to your web pages without replacing ASP.NET controls and/or writing JavaScript code.
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

	protected void btnClearAll_Click(object sender, EventArgs e)
	{
		this.AspTextBox.Text = null;
		this.HtmlTextBox.Value = null;
		this.AspMultilineTextBox.Text = null;
		this.AspPasswordTextBox.Text = null;
		this.HtmlTextArea.Value = null;
		this.AspCheckBox.Checked = false;
		this.AspRadioButton.Checked = false;
		this.AspDropDownList.SelectedIndex = -1;
		this.AspListBox.SelectedIndex = -1;
		this.AspMultipleListBox.SelectedIndex = -1;
		this.AspCheckBoxList.SelectedIndex = -1;
		this.AspRadioButtonList.SelectedIndex = -1;
	}

	protected void btnSetAll_Click(object sender, EventArgs e)
	{
		this.AspTextBox.Text = "hello world";
		this.HtmlTextBox.Value = "hello world";
		this.AspMultilineTextBox.Text = "hello world";
		//this.AspPasswordTextBox.Text = "secret"; //note:setting of password fields not possible
		this.HtmlTextArea.Value = "hello world";
		this.AspCheckBox.Checked = true;
		this.AspRadioButton.Checked = true;
		this.AspDropDownList.SelectedIndex = 2;
		this.AspListBox.SelectedIndex = 2;
		this.AspMultipleListBox.SelectedIndex = -1;
		this.AspMultipleListBox.Items[1].Selected = true;
		this.AspMultipleListBox.Items[2].Selected = true;
		this.AspCheckBoxList.SelectedIndex = -1;
		this.AspCheckBoxList.Items[1].Selected = true;
		this.AspCheckBoxList.Items[2].Selected = true;
		this.AspRadioButtonList.SelectedIndex = 2;
	}
	
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
			<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
			<asp:Button ID="btnClearAll" runat="server" Text="Clear all" OnClick="btnClearAll_Click" />&nbsp;
			<asp:Button ID="btnSetAll" runat="server" Text="Set all" OnClick="btnSetAll_Click" />&nbsp;
			<asp:Button runat="server" Text="Callback" />
			<br />
			<table>
				<tr>
					<td>asp:textbox</td>
					<td><asp:TextBox ID="AspTextBox" runat="server" /></td>
				</tr>
				<tr>
					<td>html:textbox</td>
					<td><input id="HtmlTextBox" runat="server" /></td>
				</tr>
				<tr>
					<td>asp:textbox(multiline)</td>
					<td><asp:TextBox ID="AspMultilineTextBox" TextMode="MultiLine" runat="server" /></td>
				</tr>
				<tr>
					<td>asp:textbox(password)</td>
					<td><asp:TextBox ID="AspPasswordTextBox" TextMode="Password" runat="server" /></td>
				</tr>
				<tr>
					<td>html:textarea</td>
					<td><textarea cols="20" rows="2" id="HtmlTextArea" runat="server"></textarea></td>
				</tr>
				<tr>
					<td>asp:checkbox</td>
					<td><asp:CheckBox ID="AspCheckBox" runat="server" /></td>
				</tr>
				<tr>
					<td>asp:radiobutton</td>
					<td><asp:RadioButton ID="AspRadioButton" runat="server" /></td>
				</tr>
				<tr>
					<td>asp:dropdownlist</td>
					<td><asp:DropDownList ID="AspDropDownList" runat="server"><asp:ListItem Value="1" /><asp:ListItem Value="2" /><asp:ListItem Value="3" /></asp:DropDownList></td>
				</tr>
				<tr>
					<td>asp:listbox</td>
					<td><asp:ListBox ID="AspListBox" runat="server"><asp:ListItem Value="1" /><asp:ListItem Value="2" /><asp:ListItem Value="3" /></asp:ListBox></td>
				</tr>
				<tr>
					<td>asp:listbox(multiple)</td>
					<td><asp:ListBox SelectionMode="Multiple" ID="AspMultipleListBox" runat="server"><asp:ListItem Value="1" /><asp:ListItem Value="2" /><asp:ListItem Value="3" /></asp:ListBox></td>
				</tr>
				<tr>
					<td>asp:checkboxlist</td>
					<td><asp:CheckBoxList ID="AspCheckBoxList" runat="server"><asp:ListItem Value="1" /><asp:ListItem Value="2" /><asp:ListItem Value="3" /></asp:CheckBoxList></td>
				</tr>
				<tr>
					<td>asp:radiobuttonlist</td>
					<td><asp:RadioButtonList ID="AspRadioButtonList" runat="server"><asp:ListItem Value="1" /><asp:ListItem Value="2" /><asp:ListItem Value="3" /></asp:RadioButtonList></td>
				</tr>
			</table>
			</ajax:ajaxpanel>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Web Developer
Greece Greece
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions