源代码
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="AjaxExample.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit111" %>
<!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></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div class="demoarea">
<ajaxToolkit111:ToolkitScriptManager ID="s" runat="server">
</ajaxToolkit111:ToolkitScriptManager>
<ajaxToolkit111:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit111:AccordionPane ID="AccordionPane1" runat="server">
<Header>
静夜思（老李）</Header>
<Content>
窗前明月光
<p>
</p>
疑是地上霜
<p>
</p>
举头望明月
<p>
</p>
低头思故乡
</Content>
</ajaxToolkit111:AccordionPane>
<ajaxToolkit111:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="" class="accordionLink">卜算子</a></Header>
<Content>
驿外断桥边
<p>
</p>
寂寞开无主
<p>
</p>
已是黄昏独自愁
<p>
</p>
更著风和雨
<p>
</p>
无意苦争春
<p>
</p>
一任群芳妒
<p>
</p>
零落成泥碾作尘
<p>
</p>
只有香如故。
</Content>
</ajaxToolkit111:AccordionPane>
<ajaxToolkit111:AccordionPane ID="p3" runat="server">
<Header>
钗头凤——陆游
</Header>
<Content>
红酥手，黄藤酒，满城春色宫墙柳。东风恶，欢情薄，一杯愁绪，几年离索。错！错！错！ 春如旧，人空瘦，泪痕红悒鲛绡透。桃花落，闲池阁，山盟虽在，锦书难托。莫，莫，莫！
</Content>
</ajaxToolkit111:AccordionPane>
</Panes>
</ajaxToolkit111:Accordion>
<br />
淡入淡出效果
</div>
</form>
</body>
</html>
客户端代码（查看源文件）
View Code
<!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><title>
</title><link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head>
<body>
<form name="form1" method="post" action="WebForm2.aspx" id="form1">
<div>
<input type="hidden" name="s_HiddenField" id="s_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTY4ODMzMzcyD2QWAgIDD2QWAgIDD2QWBgIBD2QWBGYPDxYEHghDc3NDbGFzcwUPYWNjb3JkaW9uSGVhZGVyHgRfIVNCAgJkZAIBDw8WBB8ABRBhY2NvcmRpb25Db250ZW50HwECAhYCHgVzdHlsZQUOZGlzcGxheTpibG9jaztkAgIPZBYEZg8PFgQfAAUPYWNjb3JkaW9uSGVhZGVyHwECAmRkAgEPDxYEHwAFEGFjY29yZGlvbkNvbnRlbnQfAQICFgIfAgUNZGlzcGxheTpub25lO2QCAw9kFgRmDw8WBB8ABQ9hY2NvcmRpb25IZWFkZXIfAQICZGQCAQ8PFgQfAAUQYWNjb3JkaW9uQ29udGVudB8BAgIWAh8CBQ1kaXNwbGF5Om5vbmU7ZGQ2YELe57yaLcdD2ZqehM7tOxmJOQ==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=Lks_bXsd8y6xJuqvWKG0aQ2&t=633802945995006876" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=myf7fFSXsM1e7LDp80Yz_8DNj4T-rzHpPW30apU3pfV8D9G9eHDLeUvVWjXiTN120&t=11e661zh-CHS.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax 客户端框架未能加载。');
//]]>
</script>
<script src="/ScriptResource.axd?d=myf7fFSXsM1e7LDp80Yz_8DNj4T-rzHpPW30apU3pfW3tRwdGBdQPwnrLxrMYRK1J31aXyj0LjtR0HUZhTeatw2&t=11e661zh-CHS.js" type="text/javascript"></script>
<script src="/WebForm2.aspx?_TSM_HiddenField_=s_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d3.5.40412.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3azh-CN%3a1547e793-5b7e-48fe-8490-03a375b13a33%3af2c8e708%3ade1feab2%3a720a52bf%3af9cec9bc%3a7311d143" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgL1kMT7BwKA6Of6Bau5l69lZlRuNAD6ZZAWUP6EO68X" />
</div>
<div class="demoarea">
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('s', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<div id="MyAccordion">
<input type="hidden" name="MyAccordion_AccordionExtender_ClientState" id="MyAccordion_AccordionExtender_ClientState" value="0" /><div id="AccordionPane1_header" class="accordionHeader">
静夜思（老李）
</div><div id="AccordionPane1_content" class="accordionContent" style="display:block;">
窗前明月光
<p>
</p>
疑是地上霜
<p>
</p>
举头望明月
<p>
</p>
低头思故乡
</div><div id="AccordionPane2_header" class="accordionHeader">
<a href="" class="accordionLink">卜算子</a>
</div><div id="AccordionPane2_content" class="accordionContent" style="display:none;">
驿外断桥边
<p>
</p>
寂寞开无主
<p>
</p>
已是黄昏独自愁
<p>
</p>
更著风和雨
<p>
</p>
无意苦争春
<p>
</p>
一任群芳妒
<p>
</p>
零落成泥碾作尘
<p>
</p>
只有香如故。
</div><div id="p3_header" class="accordionHeader">
钗头凤——陆游
</div><div id="p3_content" class="accordionContent" style="display:none;">
红酥手，黄藤酒，满城春色宫墙柳。东风恶，欢情薄，一杯愁绪，几年离索。错！错！错！ 春如旧，人空瘦，泪痕红悒鲛绡透。桃花落，闲池阁，山盟虽在，锦书难托。莫，莫，莫！
</div>
</div>
<br />
淡入淡出效果
</div>
<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {$get("s_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.AccordionBehavior, {"ClientStateFieldID":"MyAccordion_AccordionExtender_ClientState","FramesPerSecond":40,"HeaderCssClass":"accordionHeader","id":"MyAccordion_AccordionExtender","requireOpenedPane":false,"suppressHeaderPostbacks":true}, null, null, $get("MyAccordion"));
});
//]]>
</script>
</form>
</body>
</html>
来分析下客户端的代码和以往的客户端HTML有什么不同的地方？
