ASP.NET AJAX 中的自动完成控件、日历控件的应用

终于从VBA中解放出来了，银行的确比较有钱，我在那里一周没事做都不让我回公司。回来之后暂时没有项目，了解一下AJAX吧。

要在页面中使用AJAX控件，在新建网站的时候要选择Ajax－enable　WebSite模板，ｗｅｂ配置文件内容比较复杂。试了两个小Demo，在这里温习一下。
每个页面中有且只有一个的scriptmanager控件，一个文本框控件，一个AutoComplete控件，一个Calendar控件，这里为了简单两个控件的TargetControl都是同一个文本框。
当然别忘了页面开始的那句话：

<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " ajaxToolkit "   %>

< asp:scriptmanager ID = " Scriptmanager1 "  runat = " server " ></ asp:scriptmanager >
< asp:TextBox ID = " SearchText "   Width = " 150px "  runat = " server "   />
< input type  = " button "  id  = " show "   />
                        
< ajaxToolkit:CalendarExtender TargetControlID  = " SearchText "  CssClass = " MyCalendar "  
      runat  = " server "   PopupButtonID = " show "  ID  = " Calendar "  Animated = " true "  
      Format = " yyyy-MM-dd "  Enabled = " true " ></ ajaxToolkit:CalendarExtender >
      
< ajaxToolkit:AutoCompleteExtender runat = " server "  ID = " AutoCompleteSearch "
         MinimumPrefixLength = " 1 "  TargetControlID = " SearchText "
         ServicePath = " AutoCompleteService.asmx "
         ServiceMethod ="GetSearchTerms"></ajaxToolkit:AutoCompleteExtender>

首先来试试日历控件。TargetControlID就是日历控件要显示在哪个控件的下方，这里是SearchText文本框，Format是日期的格式。这里需要注意的是PopupButtonID,如果不设置这个属性，日历控件就在TargetControl获得焦点的时候显示，选择日期后也不会消失，而必须在TargetControl失去焦点的时候才消失，设置PopupButtonID属性，当点击这个Button的时候日历控件在TargetControl下方显示，选择日期后就消失，或者点击按钮消失。         

下面是日历控件的CSS，目前就知道这些：

.MyCalendar .ajax__calendar_container 
{
     border : 1px solid #646464 ; background-color : #C0AB80 ;  color :  #FC2628 ;  background-image : url(../Images/large62230.jpg) ;
}
     .MyCalendar .ajax__calendar_other .ajax__calendar_day,
     .MyCalendar .ajax__calendar_other .ajax__calendar_year 
      {
          color :  black ;
      }
 .MyCalendar .ajax__calendar_hover .ajax__calendar_day,
 .MyCalendar .ajax__calendar_hover .ajax__calendar_month,
 .MyCalendar .ajax__calendar_hover .ajax__calendar_year
   {     color : #6E52DB ;  font-size : medium ; }
  .MyCalendar .ajax__calendar_active .ajax__calendar_day,
  .MyCalendar .ajax__calendar_active .ajax__calendar_month,
  .MyCalendar .ajax__calendar_active .ajax__calendar_year 
   {     color :  black ;   font-weight : bold ; }

 

然后来试试自动完成控件。MinimumPrefixLength是确定在多长的时候开始搜索相似数据，ServicePath="AutoCompleteService.asmx" 这里是调用的Webservice文件，ServiceMethod="GetSearchTerms"就是要调用的方法名了。下面是这个简单的Webservice的内容，任意一个返回数组的WebMethod应该都行：

    [WebService(Namespace  =   " http://tempuri.org/ " )]
    [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
    [ScriptService]
     public   class  AutoCompleteService : System.Web.Services.WebService
    {
        [WebMethod]
        [ScriptMethod]
         public   string [] GetSearchTerms( string  prefixText,  int  count)
        {
            SqlConnection cn  =   new  SqlConnection(ConfigurationManager.ConnectionStrings[ " CurrentSqlConnectionString_Management " ].ToString());
            SqlCommand cmd  =   new  SqlCommand(
                 " SELECT DISTINCT TOP(@nrows) Name FROM [User] WHERE Name like @term " , cn);
            cmd.Parameters.AddWithValue( " nrows " , count);
            cmd.Parameters.AddWithValue( " term " , prefixText  +   " % " );
            List < string >  suggestions  =   new  List < string > ();
            cn.Open();
             using  (SqlDataReader dr  =  cmd.ExecuteReader(CommandBehavior.CloseConnection))
            {
                 while  (dr.Read())
                    suggestions.Add(dr[ 0 ].ToString());
            }
             return  suggestions.ToArray();
        }
    }

 

转载于:https://www.cnblogs.com/Jinspet/archive/2009/03/23/1419924.html