ajax客户端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 " >

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