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

 

<shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"></path><lock v:ext="edit" aspectratio="t"></lock></shapetype><shape id="_x0000_i1025" style="WIDTH: 306.75pt; HEIGHT: 214.5pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:%5CDOCUME~1%5CADMINI~1%5CLOCALS~1%5CTemp%5Cmsohtml1%5C01%5Cclip_image001.png"></imagedata></shape>

 

 

 

 

 

 

属性	解释
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 Demonstration</div>

 

<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>

</p

分享到：

关于Ajax 错误:'sys'未定义解决方法. | 同为出家人：大悲寺和少林寺的对比(组图)

• 2008-01-23 10:55
• 浏览 829
• 评论(0)
• 分类:编程语言
• 查看更多