您的位置：首页 > 编程语言 > ASP

ExtAspNet秘密花园（二） — 一切从头开始

2013-05-30 10:42 288 查看

这篇文章我们会从头开始使用ExtAspNet，最终完成一个模拟用户登录的界面，最终的效果图如下所示：

项目准备

1.新建一个ASP.NETWeb应用程序项目。

2.从开源网站下载最新版本的ExtAspNet，并在新建项目中添加对ExtAspNet.dll的引用。

新建一个ASPX页面

1.在<html>标签上面添加声明

<%@RegisterAssembly="ExtAspNet"Namespace="ExtAspNet"TagPrefix="ext"%>

2.在<form>标签中添加PageManager控件

<ext:PageManagerID="PageManager1"runat="server"/>

每个使用ExtAspNet控件的页面都必须包含一个PageManager控件，此控件用来控制页面级别的全局参数。比如控制页面样式、语言、表单参数、AJAX参数以及布局的参数，后面会有一篇文章专门介绍这个控件。

3.设计登陆表单

由于我们想让登录表单居中显示，所以在表单外部嵌套了一个Window控件，并让Window控件居中（其实是左右居中，上下位于黄金分割点的位置）显示。

<ext:WindowID="Window1"runat="server"Title="登录表单"IsModal="false"EnableClose="false"WindowPosition="GoldenSection"Width="350px">
</ext:Window>

这个所谓的黄金分割点是通过WindowPosition="GoldenSection"设置的，这也是ExtAspNet的一个创新点（据说人眼在查看网页时，视线偏上一点大致位于黄金分割点的位置，而不是正中心）。

实现这一功能的代码在/ExtAspNet/js/X/X.wnd.js中的_calculateGoldenPosition函数：

1:function_calculateGoldenPosition(bodySize,windowSize){

2:vartop=(bodySize.height-(bodySize.height/1.618))-windowSize.height/2;

3:if(top<5){

4:top=5;

5:}

6:varleft=(bodySize.width-windowSize.width)/2;

7:if(left<0){

8:left=5;

9:}

10:return{left:left,top:top};

11:};

4.在Window中添加SimpleForm控件

最终的ASPX中的Window标签如下所示：

1:<ext:WindowID="Window1"runat="server"Title="登录表单"IsModal="false"EnableClose="false"

2:WindowPosition="GoldenSection"Width="350px">

3:<Items>

4:<ext:SimpleFormID="SimpleForm1"runat="server"ShowBorder="false"BodyPadding="10px"

5:LabelWidth="60px"EnableBackgroundColor="true"ShowHeader="false">

6:<Items>

7:<ext:TextBoxID="tbxUserName"Label="用户名"Required="true"runat="server">

8:</ext:TextBox>

9:<ext:TextBoxID="tbxPassword"Label="密码"TextMode="Password"Required="true"runat="server">

10:</ext:TextBox>

11:<ext:ButtonID="btnLogin"Text="登录"Type="Submit"ValidateForms="SimpleForm1"ValidateTarget="Top"

12:runat="server"OnClick="btnLogin_Click">

13:</ext:Button>

14:</Items>

15:</ext:SimpleForm>

16:</Items>

17:</ext:Window>

这个示例涉及PageManager、Window、SimpleForm、TextBox、Button几个控件，很多属性都是不言自明的，后面我们也会详细介绍。

后台代码

1:protectedvoidbtnLogin_Click(objectsender,EventArgse)

2:{

3:if(tbxUserName.Text=="admin"&&tbxPassword.Text=="admin")

4:{

5:Alert.ShowInTop("成功登录！");

6:}

7:else

8:{

9:Alert.ShowInTop("用户名或密码错误！",MessageBoxIcon.Error);

10:}

11:}

这里的逻辑很简单，如果用户名和密码正确，就弹出对话框显示“成功登录！”，否则显示错误信息。

小结

整个示例虽然看似简单，却实现了很多普通ASP.NET无法实现或难以完成的任务：

1.不用一行JavaScript代码完成表单的居中显示

2.一个可拖动的窗体

3.用户名和密码输入框的客户端验证

4.表单回发不是整个页面的回发，而是AJAX（这也是ExtAspNet所特有的原生AJAX，无需任何配置和特殊的代码就默认拥有AJAX特性）

5.漂亮的提示框是通过C#代码生成的（并且可以在当前页面框架或者父页面框架中显示，这也是ExtAspNet所特有的基于IFrame的框架）

下一篇文章我们会关注对Web.config的修改，来配置ExtAspNet所需的全局参数。

注：《ExtAspNet秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航