ajax客户端web程序
2008-02-13 14:49
92 查看
default.aspx代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pk._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">
<title>Untitled Page</title>
<style type="text/css">
#buttonContainer div
...{
padding:3px;
margin:1px 4px;
width:80px;
border:1px solid #666;
font-weight:bold;
float:left;
cursor:pointer;
}
.clicked
...{
background-color:#aaa;
}
.hover
...{
background-color:#ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" >
<Scripts>
<asp:ScriptReference Path="Test.js" />
</Scripts>
</asp:ScriptManager>
<div id="buttonContainer">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Option 4</div>
<div>Option 5</div>
<br />
</div>
<br />
<hr style="color:Gray;" />
<div>
<strong>You've selected:</strong><span id="selectedOptions"></span>
</div>
</form>
</body>
</html>
Test.js代码如下:
var selectedOptions=new Array();
var txtBuilder=new Sys.StringBuilder();
//为该Dom元素添加事件处理函数
function createButton(elem)
...{
$addHandlers(
elem,
...{
mouseover:showHoverStyle,
mouseout:showDefaultStyle,
click:handleClick
}
);
}
//
function showHoverStyle()
...{
if(!Sys.UI.DomElement.containsCssClass(this,"clicked"))
...{
Sys.UI.DomElement.addCssClass(this,"hover");
}
}
//在mosu从某个选项上移开时
function showDefaultStyle()
...{
Sys.UI.DomElement.removeCssClass(this,"hover");
}
function handleClick()
...{
Sys.UI.DomElement.removeCssClass(this,"hover");
Sys.UI.DomElement.toggleCssClass(this,"clicked");
if(Sys.UI.DomElement.containsCssClass(this,"clicked"))
...{
if(!Array.contains(selectedOptions,this.innerHTML))
...{
Array.add(selectedOptions,this.innerHTML);
}
}
else
...{
Array.remove(selectedOptions,this.innerHTML);
}
//创建选项字符串
txtBuilder=null;
for(var index=0;index<selectedOptions.length;++index)
...{
txtBuilder.append(selectedOptions[index]);
}
//设置并显示到页面中
$get("selectedOptions").innerHTML=txtBuilder.toString(", ");
}
function pageLoad()
...{
var childNodes=$get("buttonContainer").childNodes;
var count=childNodes.length;
for(var index=0;index<count;++index)
...{
createButton(childNodes[index]);
}
}
//nogifyScript()方法是Sys.Application对象提供的一个重要功能,
//用来在该脚本资源成功加载至客户端浏览器后告知ASP.NET AJAX客户端运行时.
if(typeof(Sys)!=="undefined")
Sys.Application.notifyScriptLoaded();
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="pk._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">
<title>Untitled Page</title>
<style type="text/css">
#buttonContainer div
...{
padding:3px;
margin:1px 4px;
width:80px;
border:1px solid #666;
font-weight:bold;
float:left;
cursor:pointer;
}
.clicked
...{
background-color:#aaa;
}
.hover
...{
background-color:#ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" >
<Scripts>
<asp:ScriptReference Path="Test.js" />
</Scripts>
</asp:ScriptManager>
<div id="buttonContainer">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Option 4</div>
<div>Option 5</div>
<br />
</div>
<br />
<hr style="color:Gray;" />
<div>
<strong>You've selected:</strong><span id="selectedOptions"></span>
</div>
</form>
</body>
</html>
Test.js代码如下:
var selectedOptions=new Array();
var txtBuilder=new Sys.StringBuilder();
//为该Dom元素添加事件处理函数
function createButton(elem)
...{
$addHandlers(
elem,
...{
mouseover:showHoverStyle,
mouseout:showDefaultStyle,
click:handleClick
}
);
}
//
function showHoverStyle()
...{
if(!Sys.UI.DomElement.containsCssClass(this,"clicked"))
...{
Sys.UI.DomElement.addCssClass(this,"hover");
}
}
//在mosu从某个选项上移开时
function showDefaultStyle()
...{
Sys.UI.DomElement.removeCssClass(this,"hover");
}
function handleClick()
...{
Sys.UI.DomElement.removeCssClass(this,"hover");
Sys.UI.DomElement.toggleCssClass(this,"clicked");
if(Sys.UI.DomElement.containsCssClass(this,"clicked"))
...{
if(!Array.contains(selectedOptions,this.innerHTML))
...{
Array.add(selectedOptions,this.innerHTML);
}
}
else
...{
Array.remove(selectedOptions,this.innerHTML);
}
//创建选项字符串
txtBuilder=null;
for(var index=0;index<selectedOptions.length;++index)
...{
txtBuilder.append(selectedOptions[index]);
}
//设置并显示到页面中
$get("selectedOptions").innerHTML=txtBuilder.toString(", ");
}
function pageLoad()
...{
var childNodes=$get("buttonContainer").childNodes;
var count=childNodes.length;
for(var index=0;index<count;++index)
...{
createButton(childNodes[index]);
}
}
//nogifyScript()方法是Sys.Application对象提供的一个重要功能,
//用来在该脚本资源成功加载至客户端浏览器后告知ASP.NET AJAX客户端运行时.
if(typeof(Sys)!=="undefined")
Sys.Application.notifyScriptLoaded();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 新瓶旧酒ASP.NET AJAX(8) - 客户端脚本编程（Sys.Net命名空间下的WebRequestManager）
- 可以在mono下运行的一个ajax web小程序，使用PostgreSQL作为数据库（期待MonoDevelop 2.0)
- Web服务器文件传输程序客户端程序实现
- VS2008 Web开发笔记 - Ajax 客户端编程 (一)
- ASP.NET AJAX 中在客户端用 WebRequest 调用 Web Service
- AJAXEnabledWebApplication 在客户端JavaScript中异步调用服务器端Web Service
- 精品教程：创建基于 Ajax 的 IM 客户端（Web development | Ajax 资源中心）
- web客户端通过ajaxfileupload方式上传文件
- web调用客户端程序
- net控件中数据导到Excel的格式 首先，我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到客户端时，我们想让客户端程序（浏览器）以excel的格式读取它，所以把mime类型设为：application/vnd.ms-excel，当excel读取文件时会以每个cell的格式呈现数据，如果cell没有规定的格式，则excel会以默认的格式去呈现该cell的数据。这样就给我们提供了自定义数据格式的空间，当然我们必须使用excel支持的格式。下面就列出常用的一些格式： 1） 文本
- WEB SSH Ajaxterm客户端配置(1)
- 在web页中调用客户端程序的方法
- web如何全局捕获ajax异常并且显示到客户端页面
- 在本地我们调试运行AJAX.NET程序完全没有问题，但是一旦上传到服务器就会出现很多Web.config文件异常
- 由 TIdTCPServer 提供客户端安装程序 WEB 下载的实现方法
- 关于web客户端ocx程序安装的问题
- 用Web页面执行客户端程序
- 关于web客户端ocx程序安装的问题
- web调用客户端程序
- WEB SSH Ajaxterm客户端配置(2)