Asp.net Ajax编程参考

     本文是Asp.net Ajax 编程备忘录----细数28个服务器端控件的续篇，继续把Ajax Control Toolkit使用时的细节展示出来。首先我将28个控件简单分了一下类：


        下面一一道来：
 1.Accordion
      观点: (1) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')这里找到的是BehaviorID！！
                       ctl00_ContentPlaceHolder1_MyAccordion是控件的ClientID后面拼上_AccordionExtender就是BehaviorID
                (2)通过BehaviorID找到的Behavior是所有Behavior的引用，behavior.set_FadeTransitions（）的方式实现具
                    体某一个Behavior的访问修改 实现参见该控件源代码： AccordionBehavior.js
                (3)其实这里BehaviorID的设计很不好，既然BehaviorID是一个服务器端控件的共性，为什么不封装抽象一下呢

<script language="javascript" type="text/javascript">
            function toggleFade() {
                var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                if (behavior) {        
                    behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
                }
            }
            function changeAutoSize() {
                var behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');
                var ctrl = $get('autosize');    //这里找的是下拉列表控件,不是Behavior
                if (behavior) {
                    var size = 'None';   // 这里顺便看看怎么使用Select
                    switch (ctrl.selectedIndex) {
                        case 0 :
                            behavior.get_element().style.height = 'auto';
                            size = AjaxControlToolkit.AutoSize.None;
                            break;
                        case 1 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Fill;
                            break;
                        case 2 :
                            behavior.get_element().style.height = '400px';
                            size = AjaxControlToolkit.AutoSize.Limit;
                            break;
                    }
                    behavior.set_AutoSize(size);
                }
                if (document.focus) {
                    document.focus();
                }
            }
        </script>

 2. AlwaysVisibleControl 
      观点: 这个控件比较简单，但是控制显示位置的代码还是很有用的 看看：

  <asp:DropDownList ID="ddlPosition" runat="server" 
                    AutoPostBack="true" OnSelectedIndexChanged="OnChange">
                    <asp:ListItem Text="Default" Selected="true"  Value="None" />
                    <asp:ListItem Text="Top Left" Value="TL" />
                    <asp:ListItem Text="Top Center" Value="TC" />
                    <asp:ListItem Text="Top Right"  Value="TR" />
                    <asp:ListItem Text="Middle Left" Value="ML" />
                    <asp:ListItem Text="Middle Center" Value="MC" />
                    <asp:ListItem Text="Middle Right"  Value="MR" />
                    <asp:ListItem Text="Bottom Left" Value="BL" />
                    <asp:ListItem Text="Bottom Center" Value="BC" />
                    <asp:ListItem Text="Bottom Right" Value="BR" />
                </asp:DropDownList>
    
                 /// <summary>
                 /// Update properties of the extender
                 /// </summary>
                 protected void OnChange(object sender, EventArgs e)
                 {
                     if (string.IsNullOrEmpty(ddlPosition.SelectedValue) || ddlPosition.SelectedValue.Length != 2)
                     {
                         avce.Enabled = false;
                         return;
                     }
             
                     avce.Enabled = true;
                     switch (ddlPosition.SelectedValue[0])
                     {
                         case 'T' :
                             avce.VerticalSide = VerticalSide.Top;
                             break;
                         case 'M' :
                             avce.VerticalSide = VerticalSide.Middle;
                             break;
                         case 'B' :
                             avce.VerticalSide = VerticalSide.Bottom;
                             break;
                         default:
                             avce.Enabled = false;
                             return;
                     }
             
                     switch (ddlPosition.SelectedValue[1])
                     {
                         case 'L':
                             avce.HorizontalSide = HorizontalSide.Left;
                             break;
                         case 'C':
                             avce.HorizontalSide = HorizontalSide.Center;
                             break;
                         case 'R':
                             avce.HorizontalSide = HorizontalSide.Right;
                             break;
                         default:
                             avce.Enabled = false;
                             return;
                     }
                 }

3.Animation
     观点:今天多说几句
             (1)Sys.UI.DomElement.getLocation(b) 取得控件位置的函数，常用！！！
             (2)动画分为两种：Animation Action 后者的强大让我很兴奋
             (3)<Sequence>  </Sequence> 顺序执行的动画脚本
             (4)<Parallel>  <Parallel >  并发执行的动画脚本
             (5)【Action】 <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" />
                  控制目标元素外观样式，属性--值的格式修改，一个元素可以应用多个StyleAction
             (6)【Action】<EnableAction AnimationTarget="ctl00_ContentPlaceHolder1_btnInfo" Enabled="true" />
                 控件是否可用使用的方式跟上面是一样的，当前控件可省略AnimationTarget
             (7)【Action】 <ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_btnInfo'), $get('flyout'));" />
                   执行一段脚本的Action          
             (8) 【Action】 <HideAction />隐藏目标的控件
             (9) 【Action】<OpacityAction AnimationTarget="info" Opacity="0" /> 设置透明度的Action
             (10)【Animation】 <FadeIn AnimationTarget="info" Duration=".2"/>       <FadeOut /> 淡入淡出   
             (11)【Animation】<Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                  控制目标元素的大小但是注意：If scaleFont is true, the size of the font will also scale with the element.
                   If center is true, then the element's center will not move as it is scaled. It is important to note that the
                   target must be positioned (i.e. absolutely) so that settings its top/left properties will change its location
                   in order for center to have an effect.
             (12) 【Animation】    <Pulse Duration=".1" /> 脉搏跳动效果         
             (13) 【Animation】 <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />  
                     颜色渐变效果，设置起始结束颜色就可以
             (14)  【Animation】 <Resize Width="260" Height="280" />改变元素的大小Action
 
  4.CascadingDropDown
      观点：上回还是忽略了一个细节Category！这个可以从两方面来讲：
             (1)它是什么：官方说法The name of the category this DropDownList represents
                  其实打开~/App_Data/CarsService.xml你就发现这是Xml的元素标签
             (2)从这个角度我们就解决了为什么联动，即联动的本质；同时也明白了
                调用Service的参数约定
               
  5.CollapsiblePanel
    观点：(1)可以自动展开 自动收缩Autoexpand="true" AutoCollapse="true"但是这两个本身是互斥的不能同时为True
                  同时也旧不要设置    Collapsed="True"了 没有意义
              (2) TextLabelID="Label1"这个属性有什么深意\高级的操作么？我没有发现
  6.ConfirmButton
       有一个细节：要扩展的LinkButton Button 以及ConfirmButtonExtender都要放在updatepanel里面
       如果是放在外面，点击“确定”或者“取消”之后还是会导致页面刷新！
 
     
7.DragPanel
   观点：panel6包含panel7（标题） panel8（内容）扩展的对象是panel6

代码示意
  <asp:Panel ID="Panel6" runat="server" Width="100%">
                <asp:Panel BorderStyle="Solid" BorderWidth="2px" BorderColor="black" ID="Panel7" runat="server" Width="100%" Height="20px">
                    <div class="dragMe">Drag Me</div>
                </asp:Panel>
                <asp:Panel BorderStyle="Solid" BackColor="#0B3D73" ForeColor="whitesmoke" BorderWidth="2px" BorderColor="black" ID="Panel8" runat="server" Width="100%" Height="250px" Style="overflow: scroll;">
                    <div>
                        <p>This panel will reset its position on a postback or page refresh.</p>
                        <hr />
                        <p><%= GetContentFillerText()%></p>
                    </div>
                </asp:Panel>
            </asp:Panel>
             <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"  TargetControlID="Panel6" DragHandleID="Panel7" >

8.DropDown
   观点：在IE浏览器中下拉列表总是在最前面的，严重影响页面效果
   细节： (1)示例中是对一个Label进行的扩展，我试着扩展TextBox效果更好！
               官方的说法：DropDown is an ASP.NET AJAX extender that can be attached to almost any ASP.NET control.
              (2)我们还有一个收获就是下面的代码,有不少小技巧

代码示意：
  <asp:UpdatePanel id="Update" runat="server">
            <ContentTemplate>
                <asp:Label id="lblSelection" runat="server" Style="padding: 5px;" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option2" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdateAnimation" runat="server" TargetControlID="Update" BehaviorID="Highlight">
            <Animations>
                <OnUpdated>
                    <Sequence>
                        <ScriptAction Script="$find('Highlight')._onUpdated._animation._animations[1].set_target($get('ctl00_ContentPlaceHolder1_lblSelection'));" />
                        <Color Duration=".5" StartValue="#FFFF90" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />
                    </Sequence>
                </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

9.DropShadow
   观点： 我们的美工说这个很简单就可以实现
  
10.DynamicPopulate
   观点：   (1)我们非常欣慰的一点就是BehaviorID="dp1"还记得开篇时的说法么，终于出现了
                (2)PopulateTriggerControlID 触发器绑定的控件 单击时触发 容易忽略掉！
                (3)CustomScript 怎么用呢？？This script must evaluate to a string value. ??
                (4)这里是与别处不同的，直接使用了Behavior,Behavior包含了两要素：对谁扩展+ 扩展了什么功能

代码示意：
<asp:Panel ID="Panel1" runat="server" CssClass="dynamicPopulate_Normal">
        </asp:Panel>  //要扩展的panel
<ajaxToolkit:DynamicPopulateExtender ID="dp" BehaviorID="dp1" runat="server" 
          ClearContentsDuringUpdate="true" 
          PopulateTriggerControlID="Label1"
          TargetControlID="Panel1"
          ServiceMethod="GetHtml" 
          UpdatingCssClass="dynamicPopulate_Updating">
    </ajaxToolkit:DynamicPopulateExtender>
    <script runat="server">

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string GetHtml(string contextKey) {
        // a little pause to mimic a latent call.
        //
        System.Threading.Thread.Sleep(250);

        string value = "";
        if (contextKey == "U") {
            value = DateTime.UtcNow.ToString();
        } else {
            value = String.Format("{0:" + contextKey + "}", DateTime.Now);
        }

        return String.Format("<span style='font-family:courier new;font-weight:bold;'>{0}</span>", value);
    }

</script>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script  type="text/javascript">

    function updateDateKey(value) {

        var behavior = $find('dp1'); //这样使用BehaviorID可是方便多了
        if (behavior) {
            behavior.populate(value);// 内部实现调用了Service
        }

    }

    Sys.Application.add_load(function(){updateDateKey('G');});  //页面加载时要执行的脚本！

</script>

11.FilteredTextBox
   观点：我还是没有解决可以输入中文的问题，看实现的代码中有一部分是排除对一些特殊键扫描码
            限制的代码，是否是个切入点呢？解决中……

特殊键排除代码：
<   var scanCode;
                        if (evt.rawEvent.keyIdentifier) {
            
            // Safari
            // Note (Garbin): used the underlying rawEvent insted of the DomEvent instance.
            if (evt.rawEvent.ctrlKey || evt.rawEvent.altKey || evt.rawEvent.metaKey) {
                return;
            }
            
            if (evt.rawEvent.keyIdentifier.substring(0,2) != "U+") {
                return;
            }
            
            scanCode = evt.rawEvent.charCode; 
            
            if (scanCode == 63272 /* Delete */) {
                return;
            }
        }  
        else {
            scanCode = evt.charCode;
        }  
            
        if (scanCode && scanCode >= 0x20 /* space */) {                
            var c = String.fromCharCode(scanCode);                        
            
            if(!this._processKey(c)) {
                evt.preventDefault();
            }
        }
    }
    

12.HoverMenu
   观点： HttpUtility.HtmlEncode()使用 HttpUtility.HtmlEncode 将危险的符号转换为它们的 HTML 表示形式。

代码示意：
                 <asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>'></asp:Label></td>
                  <asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description"))) %>'></asp:Label></td>
                 <asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority") %>'></asp:Label>
                
13.ModalPopup
   观点：Opera浏览器中不正常，只有一部分区域是灰掉的

14.MutuallyExlcusiveCheckBox
   观点：写了一个Checkbox联动的JS如下

<input type="checkbox" name="checkA" onpropertychange="for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked}">a
<br>
<span id="A">
<input type="checkbox" name="A1">
<input type="checkbox" name="A2">
<input type="checkbox" name="A3">
</span>

15.NoBot
   观点： 简单解释什么意思,你点击一个按钮需要一秒钟的时间，而这一秒钟的时间你不可能再做其他的操作
          比如再点一次；这样旧区分出了人和机器。避免机器人自动点击 注册 暴力破解之类的事情
     
16.NumericUpDown
   观点：上下按钮是可以自定义美化的，不需要美化 TargetButtonDownID=" " TargetButtonUpID=" "

代码示意：
        <asp:Image ID="img1" runat="server" ImageUrl="~/images/down.gif"  AlternateText="Down" Width="20" Height="15"/>
                      <asp:Image ID="img2" runat="server" ImageUrl="~/images/up.gif"  AlternateText="Up" Width="20" Height="15"/>
                       <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender4" runat="server"
                    TargetControlID="TextBox4" Width="80" TargetButtonDownID="img1"
                    TargetButtonUpID="img2" RefValues="" ServiceDownMethod="" ServiceUpMethod="" />

17.PagingBulletedList
   观点： 我用这个做了一个管理超链接的页面，效果不错

代码示意：
 <ajaxToolkit:PagingBulletedListExtender ID="PagingBulletedListExtender1" BehaviorID="PagingBulletedListBehavior1" runat="server"
                    TargetControlID="BulletedList1"
                    ClientSort="true"
                    IndexSize="1"
                    Separator=" - "
                    SelectIndexCssClass="selectIndex"
                    UnselectIndexCssClass="unselectIndex" /> 

18.PasswordStrength
   观点：示例中Textbox1 Textbox3都没有添加TextMode="Password" 所以在界面上我们可以输入中文；
             而且输入中文很快就达到较高安全度，当然这没有什么用处

19.PopupControl
   观点：任何控件上都可以弹出任何内容，我认为跟HoverMenu在用户体验上没有太大的区别
 

20.Rating
   观点：使用的时候体验很糟糕，问题在哪里呢？鼠标跟随！鼠标移动等级也会变，而你真正要修改还要点击一下
   
21.ReorderList
   观点：这个控件是非常独立，并且还是适用于表现Buleted的数据，二维数据就无能为例了
            DataSourceID="ObjectDataSource1" 这是必须要有的！下面是它的Template框架：

  <ajaxToolkit:ReorderList ID="ReorderList1" PostBackOnReorder="false" runat="server" DataSourceID="ObjectDataSource1" CallbackCssStyle="callbackStyle"
        DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority">
        <ItemTemplate></ItemTemplate>
        <EditItemTemplate></EditItemTemplate>
        <ReorderTemplate></ReorderTemplate>
        <DragHandleTemplate> </DragHandleTemplate>
        <InsertItemTemplate> </InsertItemTemplate>
    </ajaxToolkit:ReorderList>

22.ResizableControl
   观点：看看飞鸽 I桌面这种应用实践，还真是没有见到用它的，用在什么地方呢？
             看来互联网要的就是创意！没有做不到只有想不到！ 
   

23.RoundedCorners
   观点：我们的美工告诉我这些是很简单的事情；园子里也在争论页面美化由谁来做的话题，其实有必要划这么清除么？
          比如我是开发人员我要做一个淡入淡出效果，我需要的参数完全可以让美工提供。我们还要翻颜色对照表，汗！
          而美工使用Ajax也是有难度，关键原则：成本最小化！
   
24.Slider
   观点：新浪论坛用来分页了，呵呵，还有的用来调“时间----------|----热度”，真是创意！

25.TextBoxWatermark
   观点：这是应用很广泛的一个，远远超出我的想象，这个提示效果很直接，不错；
  
  
26.UpdatePanelAnimation
   观点：应用还是时间较短的场合，时间长了这个动画就有点不合适了，毕竟这是一个完整的动作；时间长还是UpdateProgress比较好

27.ToggleButton
   观点：这里突破的是一个惯性：勾选CheckBox页面不会有太大的变化！而封装成按钮更符合人们的使用习惯；示例设计的不好
   没体现这一点

28.ValidatorCallout
   观点：Errormessage是一个开放的属性，我们可以进行丰富的扩展，大胆的想象，让显示出来的气泡更有意义

代码示意：
  <asp:RequiredFieldValidator runat="server" ID="PNReq" ControlToValidate="PhoneNumberTextBox" Display="None" ErrorMessage="<b>
  Required Field Missing</b><br />A phone number is required.<div style='margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;'>
  <b>Other Options:</b><br /><a href='javascript:alert(&quot;No phone number available in profile.&quot;);'>Extract from Profile</a></div>" />
  
   <ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="PNReqE" TargetControlID="PNReq" HighlightCssClass="highlight" Width="350px" />