Ajax控件--FilteredTextBox,Calendar,ModalPopup-优快云博客

NO1.在atlas(ajax)中请不要使用Response.Write(),
请使用ClientScript.RegisterClientScriptBlock替换
使用如下：
ClientScript.RegisterClientScriptBlock(this.GetType(), "", "<script>alert('自己看着办!')</script>");

注意：RegisterStartupScript 方法是将 JavaScript 嵌入到 ASP.NET 页面的底部，恰好位于关闭元素 </form> 的前面。RegisterClientScriptBlock 方法是将 JavaScript 嵌入到页面中开启元素 <form> 的紧后面。

NO2.

FilteredTextBox控件是一个非常有用的控件，使用他能直接过滤一些字符。

例子：

一：只允许数字

<asp:TextBoxID="TextBox1"runat="server"/>

< ajaxToolkit:FilteredTextBoxExtender

ID="FilteredTextBoxExtender1"

runat ="server"

TargetControlID ="TextBox1"

FilterType ="Numbers"/>

二：只允许输入小字字母

<asp:TextBoxID="TextBox2"runat="server"/>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender2"
runat="server"
TargetControlID="TextBox2"
FilterType="LowercaseLetters"/>

三：只允许输入(+,-,*,/,=,.)和数字

<asp:TextBoxID="TextBox3"runat="server"/></td>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender3"
runat="server"
TargetControlID="TextBox3"
FilterType="Custom,Numbers"
ValidChars="+-=/*()."/>

四：不允许输入数字

<asp:TextBoxID="TextBox4"runat="server"/>
<ajaxToolkit:FilteredTextBoxExtender
ID="FilteredTextBoxExtender4"
runat="server"
TargetControlID="TextBox4"
FilterType="Custom"
FilterMode="InvalidChars"
InvalidChars="1234567890"/>

属性

说明

TargetControlID

需要过滤的控件的ID

FilterType

过滤的格式：有Numbers, LowercaseLetters, UppercaseLetters, and Custom四种格式

FilterMode

过滤模式：有ValidChars (默认) or InvalidChars两种。

ValidChars

合法的字符。当设置该值时，需要FilterType包含有Custom

InvalidChars

不合法的字符：当设置该值时，需要FilterType必须是Custom

NO3.asp.net Ajax--Calendar控件使用简介
Calendar控件是一个很简单的控件，主要用来在页面中提供日历的选择，其实现在已经有很多用javascript写的日历控件，但是Canlendar日历控件能够让我们更快速地来实现这种效果，只需要进行一些简单的设置即可。
重要属性
TargetControlID：用来显示选择日期的控件，改控件必需为TextBox
CssClass：设置日历的样式
Format：显示日期的格式，如yyMMdd,会显示071105
PopupButtonID：当日期是通过选定某个按钮弹出的时候，为改按钮的ID，一般为一个日历图片

示例1
1.打开visual studio2005，新建一个AjaxControlToolkit网站。
2.在网站根目录下添加一个窗体，命名为Calendar1.aspx。
3.切换到设计视图，在页面上添加ScriptManger，一个TextBox和一个CalendarEntender控件。
4.设置CalendarExtender控件的属性如下：

<cc1:CalendarExtenderTargetControlID="txtDate"runat="server"Format="yyMMdd"ID="calDate"CssClass="MyCalendar"/>

下面是样式代码，对应上面的CssClass，关于改样式的解释在后面讲到：

MyCalendar.ajax__calendar_container
{}{
border:1pxsolid#646464;
background-color:#faac38;

}
.MyCalendar.ajax__calendar_other.ajax__calendar_day,
.MyCalendar.ajax__calendar_other.ajax__calendar_year
{}{
color:#ffffff;
}
.MyCalendar.ajax__calendar_hover.ajax__calendar_day
{}{
color:red;
background-color:#e8e8e8;
}
.MyCalendar.ajax__calendar_active.ajax__calendar_day
{}{
color:blue;
font-weight:bolder;
background-color:#e8e8e8;
}

5.保存设计，F5运行，当文本框控件获得焦点时就会弹出日历控件，选择日期后所选日期会按照所设定的格式显示在文本框中，然后日历控件会自动隐藏。

示例2
这个例子是单击一个图片按钮后会弹出日历控件，这个在网站中也是经常用到的
1.在网站的根目录下新建一个web窗体，命名为Calendar2.aspx.
2.步骤和上面的一样，只是在页面中多了一个image控件，Calendar控件的设置如下：

<cc1:CalendarExtenderTargetControlID="txtDate"runat="server"Format="yyMMdd"ID="calDate"PopupButtonID="imgDate"CssClass="MyCalendar"/>

设置基本上和上一个示例一样，多了一个PopupButtonID，用来制定点击的图片
3.保存设计，按F5运行，当单击日历图片时会弹出日历控件，选择了日期，控件会隐藏，选择的日期会显示在文本框中。

注：属性Format用来控制日期显示的格式，但要注意代表月的M一定要大写，如：yyyy－MM－dd，yyyy/M/d,yyyy年MM月dd日
CssClass说明：
.ajax_calendar_container:日历控件的整体内容部分
.ajax_calendar_footer:日历控件的页脚部分
.ajax_calendar_header:日历控件的页眉部分
.ajax_calendar_activa .ajax_calendar_day:选中日期时的样式，一般选择过的日期会以另一种颜色显示。
.ajax_calendar_hover .ajax_calendar_day:鼠标划过日期时的样式，一般改变悬停在的日期的前景色和背景色。
.ajax_calendar_other .ajax_calendar_day:非本月日期的样式名

NO4.遮盖全屏幕的对话框控件ModalPopup

遮盖全屏幕的对话框扩展控件ModalPopup使用时，会出现整个屏幕都会是灰色的，只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件，它建立在已经存在panel等容器控件的基础上，而panel上可以放置任何控件，panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的. ModalPopup扩展控件，可以在Panel中指定一个“OK”按钮和“Cancel”按钮，并且可以执行这两个按钮的客户端代码. 同时扩展控件有一个”X”和“Y”可以指定panel出现时候的顶部和左边的位置.