Ajax控件--FilteredTextBox,Calendar,ModalPopup

阅读更多

 

NO1.在atlas(ajax)中请不要使用Response.Write(),
请使用ClientScript.RegisterClientScriptBlock替换
使用如下：
ClientScript.RegisterClientScriptBlock(this.GetType(), "", "");

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

的紧后面。

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出现时候的顶部和左边的位置.

 

 

 

 

 

 

 

属性	解释
TargetControlID	点击后出现对话框的控件，一般为按钮控件
PopupControlID	对话框中的Panel的id
BackgroundCssClass	背景的css
DropShadow	对话框是否有阴影效果
OkControlID	Ok按钮的id
OnOkScript	Ok按钮触发脚本
CancelControlID	Cancel按钮的id
OkCancelScript	Cancel按钮触发脚本
PopupDragHandleControlID	Panel的中的标题栏，可以拖动，一般也是Panel
X	出现时，顶部的位置。
Y	出现时，左边的位置。

例子：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />

 

<script type="text/javascript">

 

var styleToSelect;

 

function onOk() {

 

//在这里写代码

 

}

 

 

// Add click handlers for buttons to show and hide modal popup on pageLoad

 

function pageLoad() {

 

$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);

 

$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);

 

}

 

 

function showModalPopupViaClient(ev) {

 

ev.preventDefault();

 

var modalPopupBehavior = $find('programmaticModalPopupBehavior');

 

modalPopupBehavior.show();

 

}

 

 

function hideModalPopupViaClient(ev) {

 

ev.preventDefault();

 

var modalPopupBehavior = $find('programmaticModalPopupBehavior');

 

modalPopupBehavior.hide();

 

}

 

script>

 

 

<div class="demoarea">

 

<div class="demoheading">ModalPopup Demonstrationdiv>

 

<p id="Paragraph1"><%= GetContentFillerText() %>p><br />

 

<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />

 

 

<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">

 

<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">

 

<div>

 

<p>Choose the paragraph style you would like:p>

 

div>

 

asp:Panel>

 

<div>

 

<p style="text-align: center;">

 

<asp:Button ID="OkButton" runat="server" Text="OK" />

 

<asp:Button ID="CancelButton" runat="server" Text="Cancel" />

 

p>

 

div>

 

asp:Panel>