ASP.NET AjaxControlToolkit-Framework4.0 配置實用(簡單介紹CalendarExtender日期控件)

1：下載：AjaxControlToolkit

Ajax Control Toolkit .NET 4

Ajax Control Toolkit .NET 4.5

Ajax Control Toolkit .NET 3.5

AjaxControlToolkitDifferentNETFramework   鏈接：http://pan.baidu.com/s/1ntITBNN  密碼：pcor

AjaxControlToolKit_CalendarWithCss           鏈接：http://pan.baidu.com/s/1jGhfYTK 密碼：o9ga

ASP.NET AJAX Control Toolkit 幫助文檔(英文) 鏈接 : http://www.ajaxtoolkit.net/

ASP.NET AJAX Control Toolkit Calendar幫助文檔(英文) 鏈接：http://www.ajaxtoolkit.net/Calendar/Calendar.aspx

ASP.NET Ajax                                            鏈接：http://www.asp.net/ajax

ASP.NET AJAX Control Toolkit                     鏈接：http://ajaxcontroltoolkit.codeplex.com/

AJAX Control Toolkit Release Notes - January 2013 Release

Version 7.0123

January 2013 release of the AJAX Control Toolkit.

• AJAX Control Toolkit .NET 4.5 – AJAX Control Toolkit for .NET 4.5 and sample site (Recommended).

• AJAX Control Toolkit .NET 4 – AJAX Control Toolkit for .NET 4 and sample site (Recommended).

• AJAX Control Toolkit .NET 3.5 – AJAX Control Toolkit for .NET 3.5 and sample site (Recommended).

Notes:
- Instructions for using the AJAX Control Toolkit with ASP.NET 4.5 can be found at http://stephenwalther.com/archive/2012/09/20/september-2012-release-of-the-ajax-control-toolkit.aspx
- The current version of the AJAX Control Toolkit is not compatible with ASP.NET 2.0. The latest version that is compatible with ASP.NET 2.0 can be found here: 20229.
- Pages using controls from AJAX Control Tookit .NET 3.5 must use the ToolkitScriptManager, rather than the ASP.NET ScriptManager.
- AJAX Control Tookit .NET 4 cannot be loaded in Visual Studio 2008. It requires Visual Studio 2010.
- When using the Ajax Control Toolkit with Visual Studio 2008, you must have Visual Studio Service Pack 1 installed.
- Instructions for contributing a bug report can be found at http://www.asp.net/ajaxlibrary/act_contribute_bug.ashx

Getting Started

Learn how to install the toolkit and add the toolkit to the Visual Studio/Visual Web Developer toolbox with the following videos and tutorials.

• Learn how to install the Ajax Control Toolkit at http://www.asp.net/ajaxlibrary/act.ashx
• Read answers to frequently asked questions at http://www.asp.net/ajaxlibrary/act_faq.ashx
• Learn how to use Ajax Control Toolkit controls at http://www.asp.net/ajaxlibrary/act_tutorials.ashx
• View the AJAX Control Toolkit live at http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

2：安裝

1、打開Visual Studio2010工具箱，【添加選項卡】，命名為AJAXContorlToolKit4.0（名稱自定義即可）

     

2、在此選項卡內右擊，選擇【選擇項】，在選擇窗口點擊【瀏覽】

3、找到AjaxControlToolkit.Binary.NET4文件夾中的AjaxControlToolkit.dll

 點擊【打開】，即可加載 AjaxControlToolkit.dll 文件

點擊【確定】后，會在工具箱AJAXControlToolkit4.0選項卡中出現全部控件

3：使用

１．使用CalendarExtender控件的頁面，必需包括Ajax Extensions控件ScriptManager；

２．CalendarExtender控件的屬性Format可定制日期顯示格式，默認值為＂d＂，顯示為＂1/25/2007＂．

      如果要定制日期格式為＂2007-01-25＂，應使用字符串＂yyyy-MM-dd＂，而不是＂yyyy-mm-dd＂；

３．如上圖所示，若想從TextBox控件中取到日期值，請保證TextBox控件的ReadOnly屬性的值為＂false＂，若設置為＂true＂，將無法從TextBox控件中取到值．

      [可以設置TextBox的屬性 Enabled="false"]

CalendarExtender 常用屬性

a. TargetControlID: 用來和Calendar交互的TextBox的ID。
  
b. CssClass: Calendar使用的Css樣式。在下面的calendar Theming部分再詳細說明。
  
c. Format: 時間的現實形式, 比如yyyy-MM-dd , MMMM-yyyyy-dd等等。可以直接在設計界面的format屬性設置日期格式。
  
d. PopupButtonID: 當點擊ID為這個ID的控件時彈出來calendar的對話框。
  
e. PopupPostion: 顯示日歷的方位,可以是TextBox的左下角,右下角,左上角,右上角。
  
f. SelectedDate: 指定日歷的初始化日期。

這里演示一下CalendarExtender
      步驟：
             1、拖放ScriptManager (ScriptManager標簽需要放在具有runat="server" 的標簽下)
             2、拖放TextBox
             3、拖放CalendarExtender
             4、設置CalendarExtender的屬性TargetControlID等於TextBox的ID

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
        </asp:CalendarExtender>

運行結果為：

3.1：Ajax CalendarExtender顯示中文(默認是英文的)，前提： 瀏覽器是中文瀏覽器

asp:ScriptManager這個Ajax控件后面添加屬性：EnableScriptGlobalization="True" EnableScriptLocalization="True" 。

ScriptManager屬性 : 為 Web 和應用程序服務管理 ASP.NET Ajax 腳本庫和腳本文件、局部頁面呈現以及客戶端代理類生成。

ScriptManager.EnableScriptGlobalization ：獲取或設置一個值，該值指示 ScriptManager 控件是否呈現支持分析和格式化區域性特定的信息的腳本

ScriptManager.EnableScriptLocalization   : 獲取或設置一個值，該值指示 ScriptManager 控件是否呈現腳本文件的本地化版本。

        <asp:ScriptManager ID="ScriptManager1" runat="server"  EnableScriptGlobalization="true" EnableScriptLocalization="true">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1">
        </asp:CalendarExtender>

運行結果為：

3.2：Ajax CalendarExtender 可以選擇時間為 大於或者等於今天 (今天之前都不能選擇)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebAjaxToolkitTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                CalendarExtender1.StartDate = DateTime.Now;
            }
        }
    }
}

運行結果為：

 

3.3：Ajax CalendarExtender 可以選擇日期為 當前月份，並且大於或者等於今天

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebAjaxToolkitTest
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                CalendarExtender1.StartDate = DateTime.Now;
                CalendarExtender1.EndDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month + 1, 1).AddDays(-1);
            }
        }
    }
}

運行結果為：

 

3.4：Ajax CalendarExtender 點擊Image圖片展開日期控件，選中日期賦值給TextBox

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"
            EnableScriptLocalization="true">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Image ID="Image1" ImageUrl="imageurl" runat="server" />
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
            PopupButtonID="Image1">
        </asp:CalendarExtender>

運行結果為：

此時點擊TextBox不會顯示日期控件，點擊Image圖片，顯示日期控件，選中日期控件賦值給TextBox