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