[原创]ExtAspNet秘密花园(二) — 一切从头开始

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

image_thumb1

 

 

项目准备

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

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

image_thumb8

 

 

新建一个ASPX页面

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

<%@ Register Assembly="ExtAspNet" Namespace="ExtAspNet" TagPrefix="ext" %>
 
2. 在<form>标签中添加PageManager控件
<ext:PageManager ID="PageManager1" runat="server" />

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

 

3. 设计登陆表单

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

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



太棒了太棒了太棒了

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

image_thumb3

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

   1:  function _calculateGoldenPosition(bodySize, windowSize) {
   2:          var top = (bodySize.height - (bodySize.height / 1.618)) - windowSize.height / 2;
   3:          if (top < 5) {
   4:              top = 5;
   5:          }
   6:          var left = (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:Window ID="Window1" runat="server" Title="登录表单" IsModal="false" EnableClose="false"
   2:      WindowPosition="GoldenSection" Width="350px">
   3:      <Items>
   4:          <ext:SimpleForm ID="SimpleForm1" runat="server" ShowBorder="false" BodyPadding="10px"
   5:              LabelWidth="60px" EnableBackgroundColor="true" ShowHeader="false">
   6:              <Items>
   7:                  <ext:TextBox ID="tbxUserName" Label="用户名" Required="true" runat="server">
   8:                  </ext:TextBox>
   9:                  <ext:TextBox ID="tbxPassword" Label="密码" TextMode="Password" Required="true" runat="server">
  10:                  </ext:TextBox>
  11:                  <ext:Button ID="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:  protected void btnLogin_Click(object sender, EventArgs e)
   2:  {
   3:      if (tbxUserName.Text == "admin" && tbxPassword.Text == "admin")
   4:      {
   5:          Alert.ShowInTop("成功登录!");
   6:      }
   7:      else
   8:      {
   9:          Alert.ShowInTop("用户名或密码错误!", MessageBoxIcon.Error);
  10:      }
  11:  }

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

image_thumb6

image_thumb4

 

 

小结

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

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

2. 一个可拖动的窗体

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

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

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

 

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

 

 

 

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

posted @ 2012-02-12 11:46 三生石上(FineUI控件) 阅读(...) 评论(...) 编辑 收藏