📄 default.aspx
字号:
<%@ Page language="c#" AutoEventWireup="false" Inherits="AJAXDemo.Examples.HtmlControls._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax.NET - HtmlControl Example</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form id="Form1" method="post" runat="server"></form>
<div class="content">
<h1>HtmlControls Examples</h1>
<h2>HtmlSelect and selected items</h2>
<p>The following example will submit a HtmlSelect control to the server. You can select multiple options using SHIFT or CTRL. If you click on <i>Submit</i> you will get a message box which gives you the item values that are selected through an Ajax.NET method.</p>
<div id="test1"><select multiple="multiple" size="2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select></div>
<p>Click <a href="javascript:doTest1();void(0);">Submit</a></p>
<h2>HtmlSelect parent-child updates</h2>
<p>In most web sites you'll find dropdown lists that have some parent-child dependencies. With Ajax.NET you can simply return an HTML control to be placed into a placeholder:</p>
<div><select size="3" onchange="doTest2(this);">
<option value="mercedes">Mercedes-Benz</option>
<option value="citroen">Citroen</option>
<option value="vw">Volkswagen (VW)</option>
</select>
<div id="test2"><i>Please select from the left list first!</i></div></div>
<h2>HtmlSelect passing to the server and back</h2>
<p>The next example will send the HtmlSelect control to the server, append one element and go back to the client. Notice that the selection you have done will still be there.</p>
<div id="test3"><select size="4" multiple="multiple">
<option value="1">My first element</option>
<option value="2">My second element</option>
<option value="3">My third element</option>
</select></div>
<p>Click <a href="javascript:doTest3();void(0);">here</a> to append one new element at the server-side code.</p>
</div>
<p class="footer">Last updated: November 2, 2005 by <a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">Michael Schwarz</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
<script type="text/javascript" defer="defer">
function doTest1() {
AJAXDemo.Examples.HtmlControls.Demo.GetSelectedValues(document.getElementById("test1").innerHTML, doTest1_callback);
}
function doTest1_callback(res) {
alert(res.value);
res = null;
}
function doTest2(e) {
AJAXDemo.Examples.HtmlControls.Demo.GetChildSelect(e.options[e.selectedIndex].value, doTest2_callback);
}
function doTest2_callback(res) {
document.getElementById("test2").innerHTML = res.value;
res = null;
}
function doTest3() {
var e = document.getElementById("test3");
AJAXDemo.Examples.HtmlControls.Demo.AppendItemOnSelect(e.innerHTML, doTest3_callback);
e = null;
}
function doTest3_callback(res) {
var e = document.getElementById("test3");
e.innerHTML = res.value;
e = null;
}
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -