ajax客户端web程序

最新推荐文章于 2025-12-05 11:24:16 发布

原创最新推荐文章于 2025-12-05 11:24:16 发布 · 742 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #web #div #server #asp #border

本文介绍了一个使用ASP.NET AJAX实现的示例项目，其中包括利用客户端脚本进行DOM元素样式更改及事件处理。通过此示例，读者可以了解如何将服务器端技术和客户端JavaScript结合，创建响应式的Web应用程序。

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">

<title>Untitled Page</title>

#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>

<asp:ScriptManager ID="sm" runat="server" >

<asp:ScriptReference Path="Test.js" />

</Scripts>

</asp:ScriptManager>

<div>Option 1</div>

<div>Option 2</div>

<div>Option 3</div>

<div>Option 4</div>

<div>Option 5</div>

<br />

</div>

<br />

<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();