I am seeing developers still not using asp.net Ajax built-in methods inside their client script. They have a Script Manager reference. But still using convention java script methods. If you have Script Manager reference should use asp.net AJAX methods. Problem may be most of them may not aware of how easy to handle many conventional java script functionalities using built-in AJAX methods. I am here tried to cover possible important methods under asp.net AJAX which are commonly using and I never used any complex example to describe it. This one a simple filtering application fully depend on client side. Below is the HTML part you can reuse.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<script language="javascript" type="text/javascript">
//Declare two blank arrays using '[]'
var g_Emloyee = [];
var g_Salary = [];
//Using builtin pageLoad function
function pageLoad() {
createTables();
}
function createTables() {
//Creating emloyee table and data using builtin Array object
var employee = new Array("1", "Jaish Mathews", "S1");
//Using Array.add for adding item to secific Array obect
Array.add(g_Emloyee, employee);
employee = new Array("2", "Vijay", "S2");
Array.add(g_Emloyee, employee);
employee = new Array("3", "Yadhu", "S1");
Array.add(g_Emloyee, employee);
employee = new Array("4", "Rami", "S2");
Array.add(g_Emloyee, employee);
employee = new Array("5", "Vulise", "S3");
Array.add(g_Emloyee, employee);
employee = new Array("6", "Satish", "S2");
Array.add(g_Emloyee, employee);
//creating salary table and data.
var salary = new Array("S1", "5000");
Array.add(g_Salary, salary);
var salary = new Array("S2", "3000");
Array.add(g_Salary, salary);
var salary = new Array("S3", "2500");
Array.add(g_Salary, salary);
loadEmloyees();
loadSalary();
}
//Filling emloyee select list
function loadEmloyees() {
var employeeSelect = $get("Emloyees");
//Using builtin $addHandler for attaching client side event to an element
$addHandler(employeeSelect, "change", onEmployeeChange);
var showEmployeesButton = $get("ShowEmployeesButton");
//Below used builtin $addHandler and also made possible to pass args to the handler using
//function(){} block
$addHandler(showEmployeesButton, "click", function() { onShowEmloyeeClick(false) });
var showEmployeesCountButton = $get("ShowEmployeesCountButton");
$addHandler(showEmployeesCountButton, "click", function() { onShowEmloyeeClick(true) });
var employeeCount = g_Emloyee.length;
var employeeOption
for (var i = 0; i < employeeCount; i++) {
employeeOption = document.createElement("option");
employeeOption.text = g_Emloyee[i][1];
employeeOption.value = g_Emloyee[i][0];
employeeSelect.options.add(employeeOption)
}
}
//Filling salary list
function loadSalary() {
var salarySelect = $get("Salary");
var salaryCount = g_Salary.length;
var salaryOption;
for (var i = 0; i < salaryCount; i++) {
salaryOption = document.createElement("option");
salaryOption.text = g_Salary[i][1];
salaryOption.value = g_Salary[i][0];
salarySelect.options.add(salaryOption)
}
}
//Handler for employee select
function onEmployeeChange() {
var salarySelect = $get("Salary");
var employeeSelect = $get("Emloyees");
var employeeCount = g_Emloyee.length;
for (var i = 0; i < employeeCount; i++) {
//Using builtin Array.contain method to check the existance of an item in an Array object
if (Array.contains(g_Emloyee[i], employeeSelect.value)) {
salarySelect.value = g_Emloyee[i][2];
}
}
}
//Handler for show employee click
function onShowEmloyeeClick(showCount) {
var salarySelect = $get("Salary");
var employeeSelect = $get("Emloyees");
//Defining an builtin StringBilder object
var selectedSalaryEmloyees = new Sys.StringBuilder();
var selectedSalaryEmloyeesArray = new Array();
var employeeCount = g_Emloyee.length;
for (var i = 0; i < employeeCount; i++) {
if (Array.contains(g_Emloyee[i], salarySelect.value)) {
if (showCount) {
Array.add(selectedSalaryEmloyeesArray, g_Emloyee[i]);
}
else {
//Using builtin StringBuilder.appendLine for string manuulation
selectedSalaryEmloyees.appendLine(g_Emloyee[i][1]);
}
}
}
if (showCount) {
var sum = 0;
//Using builtin Array.forEach, to perform a secific operation on each array items.
//For this specific case, looping through items and finding total count
Array.forEach(selectedSalaryEmloyeesArray, function() { sum += 1; });
alert(sum);
}
else {
alert(selectedSalaryEmloyees.toString());
}
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
Emloyees:
<select id="Emloyees">
</select>
</div>
<div>
Salary:
<select id="Salary">
</select>
<input type="button" value="Show Emloyees With Selected Salary" id="ShowEmployeesButton" />
<input type="button" value="Show Emloyees With Selected Salary[Count]" id="ShowEmployeesCountButton" />
</div>
</form>
</body>
</html>