Delving Deeper into Atlas Client Controls - Selection Lists
(Page 4 of 4 )
HTML selection lists (<select>...</select>) can come in different forms: a drop-down list where the user has to click to see all list elements, or a selection list where some of the elements are already visible. Both types of lists
Figure 4-5. Atlas has checked the checkbox
are covered by Atlas with the Sys.UI.Selectclass. Unlike using JavaScript to work with a<select>element, the ability to set the individual values of the list’s elements is not provided by the Atlas classes.
If the data for the list exists in the form of a .NETDataTableobject, data binding is a possibility. Chapter 9 explains this approach.
But we can demonstrate theget_selectedValue()method, which determines thevalue attribute of the currently selected item in the list.
When sending the form to the server via HTTP GET or POST, it is not essential to set thevalueattribute, because the caption of the element (the text between<option>and</option>) is passed forvalue. However, a list item with novalueproperty is empty in JavaScript. Therefore, you should always set thevalueproperty for all list elements.
Since event handling isn’t covered until later in this chapter, in Example 4-6, thechange event of the list is not captured, and instead the state of the list is analyzed every second. This is done using thesetInterval()JavaScript function. This polling technique is used only for the sake of the example here; Chapter 5 will cover a much better way to keep two elements in sync, namely through the use of data binding.
function pageLoad() {
window.setInterval(
function() {
//access the list and output its selected value
},
1000);
}
Example 4-6 shows how to use Atlas to check for a current selection and display the selection value in a<span>element (Sys.UI.Label).
Example 4-6. Using an Atlas Select control
ControlSelect.aspx
<%@ Page Language="C#" %>
<!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>Atlas</title>
<script language="JavaScript" type="text/javascript">
var label;
var select;
function pageLoad() {
label = new Sys.UI.Label($("Label1"));
select = new Sys.UI.Select($("Select1"));
// Poll every second to determine whether a value has been selected.
window.setInterval(
function() {
label.set_text(select.get_selectedValue());
},
1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server">
</atlas:ScriptManager>
<div>
<select id="Select1" size="3">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select><br />
Selected value: <label id="Label1"></label>
</div>
</form>
</body>
</html>
Figure 4-6 shows the result.
Figure 4-6. The selected value is written to the Label control
Usingget_selectedValue()may be convenient, but only for regular selection lists. If you are using<select multiple="multiple">, you only get thevalueof the first list element that is selected, not of all selected elements. To check all selected elements, you would need to use Java-Script code to loop through all the items individually, as shown in the following snippet:
var op = document.forms[0].elements["Select1"].
options;
for (var i=0; i < op.length; i++) {
if (op[i].selected) {
//element is selected
} else {
//element is not selected
}
}
Please check back next week for the conclusion to this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Check it out today at your favorite bookstore. Buy this book now.
|
|
