On this example we demostrate th

On this example we demostrate the floowing functions

Array.Clone

Array.Parse.

Using CSS DOM to change elements attribute

Step: 1 Create a web-site ( http://manas6/aspnet.35/mm.AjaxDOMCSS1/Default.aspx )

Step: 2 Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true"%>

<!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 id="Head1" runat="server">
<title>mm.AjaxDOMCss1:also Array dequeue, enqueue</title>
<style type="text/css">
body { background-color:Gray; color:White }
#div1 { width:400px; height:250px; background-color:#FEFDDE;
color:Navy; padding-left:10px;
}
#display
{
width:300px; height:200px; background-color:#FEEDDE; color:Navy;
padding-left: 10px;
}
.GreenMe
{
width:100px; height:30px; background-color:Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button4" runat="server" Text="Page-Reload" onclick="Button4_Click" />
<asp:Button ID="Button5" runat="server" Text="Clear-Deck"
onclick="Button5_Click" Font-Size="Medium"
ForeColor="#FFFF99" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate><asp:Panel ID="Panel1" runat="server" Width="431px">
Keep these buttons within a panel to enforce click <br />events in the embedded
script. <br />
<asp:Button ID="Button1" runat="server" Text="Array-foreach" />
<asp:Button ID="Button2" runat="server" Text="Array-dequeue" />
<asp:Button ID="Button3" runat="server" Text="Array-enqueue" />
<asp:Button ID="Button6" runat="server" Text="Array-clear" />
<br />

</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="div1"> This will contain result: Must use Clear Deck button <br />to clear up the display, and use other
Buttons.<br />
<asp:Label ID="display" runat="server" Text="Label"></asp:Label>
</div>
<br />
</div>
<script type="text/javascript" >
$addHandler($get("Button1"), "click", start);
$addHandler($get("Button2"), "click", do_dequeue);
$addHandler($get("Button3"), "click", do_enqueue);
$addHandler($get("Button6"), "click", ArrayClear);
Sys.UI.DomElement.addCssClass($get("Button1"), "GreenMe");
Sys.UI.DomElement.addCssClass($get("Button2"), "GreenMe");
Sys.UI.DomElement.addCssClass($get("Button3"), "GreenMe");
Sys.UI.DomElement.addCssClass($get("Button6"), "GreenMe");
var _array = new Array();var result = "";
_array = Array("emp1@gmail.com", "emp2@gmail.com", "emp3@gmail.com", "emp4@gmail.com");
//("emp1@gmail.com', 'emp2@gmail.com', 'emp3@gmail.com', 'emp4@gmail.com");
_array[6] = "manager@gmail.com";

function process(element, index, array) {
// "this" is the context parameter, i.e. '|'.

result += "<br/>" + element + this + index + ',';

}
function start() {
clear();
//alert();
result = "";
Array.forEach(_array, process, '|');
$get("display").innerHTML += result;
Sys.UI.DomElement.addCssClass($get("Button5"), "GreenMe");
}
function do_dequeue() {
// alert("Do_dequeue");
clear();
$get("display").innerHTML += "<br/>Using dequeue";
Array.dequeue(_array);
Array.forEach(_array, process, '|');
//start();
$get("display").innerHTML += result;
Sys.UI.DomElement.addCssClass($get("Button5"), "GreenMe");
}
function do_enqueue() {
$get("display").innerHTML = "";
clear();
Array.enqueue(_array, "new_emp@gmail.com");
Array.forEach(_array, process, '|');
$get("display").innerHTML += "<br/>--- do_enqueue :---<br/>"+ result;
Sys.UI.DomElement.addCssClass($get("Button5"), "GreenMe");
}
function clear() {
result = "";
alert("clearing/reloading array ");
$get("display").innerHTML = "";
}
function ArrayClear()
{
alert();
var myClone= Array.clone(_array);
//
$get("display").innerHTML += "<br/>--- clone :---<br/>" + myClone;
Array.clear(_array);
Array.clear(myClone);
Array.forEach(myClone, process, '|');
$get("display").innerHTML += "<br/>---Cleared clone :---<br/>" + myClone;
$get("display").innerHTML += "<br/>--- cleared _array :---<br/>" + _array;
Sys.UI.DomElement.addCssClass($get("Button5"), "GreenMe");

}
window.onload = function() {
_array; result;
// the above will reload an array using page reload of asp,net
}
</script>
</form>
</body>
</html>

Step: 3 Runtime Views

A) First time Load: Make sure that Celar-Desk Button's background is Gray

B) Testing Array For-Each

Note Clear-Desk's background is turned green. If you try to click any button, make sure that you change Clear-Deck turns to Gary.

C) Testing Array dequeue method: First Click on Clear-Desk (this will Green Background now). The method dequeue will remove one item from the top (FIFO) like (POP).

D) Testing enqueue : Frist click on Clear-Deck button and then click on Array-enqueue button, note one

E) Testing Array Clear and Clone:

_array[6] = "manager@gmail.com";

Since array starts with 0, emp4@gmail.com is indexed at 3; the empty spacers are filled with commas.