移动设备的Web应用程序开发----(验证和列表)

移动 .NET 输入验证

验证控件用来验证用户输入的数据。


验证控件

验证控件用来验证用户输入的数据。

验证控件允许你去验证输入控件(比如: TextBox )并且当验证失败的时候显示消息。

每个验证控件完成特定类型的验证(比如:不是指定的值或者不是指定的范围)。

默认情况下,当命令控件被点击得失后页面验证才处理。设置控件的 CausesValidation 属性为 false 后当控件被点击时你可以阻止页面的验证(和 ASP.NET 的模式一样设置命令控件(可能激发服务器事件的)的 CausesValidation 可以不用激发验证逻辑)。


验证输入

这个页面包含两个表单:

1@ Page 
2
3Inherits= 
4
5"System.Web.UI.MobileControls.MobilePage"
1@ Register 
2
3TagPrefix="Mobile" 
4
5Namespace="System.Web.UI.MobileControls" 
6
7Assembly="System.Web.Mobile" 
 1<script runat="server">
 2
 3Sub Page2(Sender as Object,E as EventArgs) 
 4
 5If Page.IsValid Then 
 6
 7ActiveForm=f2 
 8
 9text2.Text="You are " & age.text & " years old" 
10
11end if 
12
13End Sub 
14
15</script>

< Mobile :Form id="f1" runat="server">

< Mobile :CompareValidator runat="server"

ControlToValidate="age"

Type="Integer"

ValueToCompare="18"

Operator="GreaterThanEqual">

You must be at least 18

< Mobile :Label runat="server">Age? < Mobile :TextBox id="age" runat="server" />

< Mobile :Command OnClick="Page2" runat="server">

Submit

< Mobile :Form id="f2" runat="server">

< Mobile :Label id="text2" runat="server" />


第一个表单有一个 Text 属性是 Age 的 Label 控件,一个输入年龄的输入框以及一个提交按钮。

通过点击第一个页面的提交按钮后第二个页面被激活,显示相应。

如果验证输入错误,错误消息被显示出来。

当应用程序运行在移动设备上,这两个页面看起来象下面的样子:

Age?


Form 2

You are 21 years old



ValidationSummary 控件

前面的例子使用 CompareValidator 控件验证输入的信息。输入信息的验证通过验证控件的属性 ContolToValidate 定义。

你也可以实用 ValidationSummary 控件的属性 FormToValidate ,去验证表单里的所有的输入信息。(功能和 ASP.NET 一样)

这种方式你可以用错误的摘要信息替换原来的单个错误显示。


验证控件参考

** Name **

|

** Function **

---|---

CompareValidator

|

Compares two values

CustomValidator

|

Provides custom validation

RangeValidator

|

Validates a range

RegularExpressionValidator

|

Validates an expression

RequiredFieldValidator

|

Validates required data

ValidationSummary

|

Displays a validation summary

要得到包括属性方法、事件以及更多实例的控件完整参考,请参考 ”Mobile Reference” 页面。(译者注:参考原始页面或者 MSDN 。)

移动 .NET 列表

移动列表控件支持不同的输入和显示特性。


从 List 中选择

这个页面有两个表单:

1@ Page 
2
3Inherits= 
4
5"System.Web.UI.MobileControls.MobilePage"
1@ Register 
2
3TagPrefix="Mobile" 
4
5Namespace="System.Web.UI.MobileControls" 
6
7Assembly="System.Web.Mobile" 
 1<script runat="server">
 2
 3Sub Show_Price(sender As Object,e As ListCommandEventArgs) 
 4
 5text1.Text=e.ListItem.Text & "=" & e.ListItem.Value 
 6
 7ActiveForm=f2 
 8
 9End Sub 
10
11</script>

< Mobile :Form id="f1" runat="server">

< Mobile :List runat="server"

OnItemCommand="Show_Price">

1<item text="Volvo" value="$30,000"></item>
1<item text="BMW" value="$32,000"></item>
1<item text="Audi" value="$34,000"></item>

< Mobile :Form id="f2" runat="server">

< Mobile :Label runat="server" id="text1" />


第一个表单有一个车的列表。

第二个页面显示价钱。当在第一个页上选择一个车这个页面就被激活。

当这个应用程序运行在移动的设备上这两个页面看起来就像下面的:

Form 1

Volvo
BMW
Audi


Form 2

Volvo=$30,000


移动 .NET 选择列表

SelectionList 控件支持下拉框,复选框以及单选按钮。


SelectionList

这个移动页面使用 SelectionList 让用户选择车:

1@ Page   
2Inherits=   
3"System.Web.UI.MobileControls.MobilePage"
1@ Register   
2TagPrefix="  Mobile  "   
3Namespace="System.Web.UI.MobileControls"   
4Assembly="System.Web.Mobile" 
1<script runat="server">   
2Sub Car_Click(sender as Object, e as EventArgs)   
3ActiveForm=f2   
4t1.text=cars.Selection.Value   
5End Sub   
6</script>
1<mobile:form id="f1" runat="server">
2<mobile:selectionlist id="cars" runat="server">
3<item text="Volvo" value="$30,000"></item>
4<item text="BMW" value="$32,000"></item>
5<item text="Audi" value="$34,000"></item>
6</mobile:selectionlist>
7<mobile:command onclick="Car_Click" runat="server" text="Submit"></mobile:command>
8</mobile:form>
1<mobile:form id="f2" runat="server">
2<mobile:label id="t1" runat="server"></mobile:label>
3</mobile:form>

当这个页面显示在移动设备上的时候,页面的导航和显示功能将为不同的设备编译不同的显示特性。(译者注:设备不同看到的页面也不同但是功能是一样的)

有些设备,比如掌上电脑,它可能显示成下拉列表选择表单。在手机上它可能显示为一个选项列表的选择表单。

Published At
Categories with Web编程
Tagged with
comments powered by Disqus