[原创]ExtAspNet秘密花园(二) mdash; 一切从头开始
这篇文章我们会从头开始使用ExtAspNet,最终完成一个模拟用户登录的界面,最终的效果图如下所示:
项目准备
1. 新建一个ASP.NET Web应用程序项目。
2. 从开源网站下载最新版本的ExtAspNet,并在新建项目中添加对ExtAspNet.dll的引用。
新建一个ASPX页面
1. 在<html>标签上面添加声明
<%@RegisterAssembly="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的一个创新点(据说人眼在查看网页时,视线偏上一点大致位于黄金分割点的位置,而不是正中心)。
实现这一功能的代码在/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:}
这里的逻辑很简单,如果用户名和密码正确,就弹出对话框显示“成功登录!”,否则显示错误信息。
小结
整个示例虽然看似简单,却实现了很多普通ASP.NET无法实现或难以完成的任务:
1. 不用一行JavaScript代码完成表单的居中显示
2. 一个可拖动的窗体
3. 用户名和密码输入框的客户端验证
4. 表单回发不是整个页面的回发,而是AJAX(这也是ExtAspNet所特有的原生AJAX,无需任何配置和特殊的代码就默认拥有AJAX特性)
5. 漂亮的提示框是通过C#代码生成的(并且可以在当前页面框架或者父页面框架中显示,这也是ExtAspNet所特有的基于IFrame的框架)
下一篇文章我们会关注对Web.config的修改,来配置ExtAspNet所需的全局参数。
注:《ExtAspNet秘密花园》系列文章由三生石上原创,博客园首发,转载请注明出处。文章目录 官方论坛
[原创]ExtAspNet秘密花园(二) mdash; 一切从头开始相关推荐
- [原创]ExtAspNet秘密花园(二) — 一切从头开始
原文地址为: [原创]ExtAspNet秘密花园(二) - 一切从头开始 这篇文章我们会从头开始使用ExtAspNet,最终完成一个模拟用户登录的界面,最终的效果图如下所示: 项目准备 1. 新建一个 ...
- [原创]ExtAspNet秘密花园(十六) — 表格之排序与分页
排序和分页是表格必备的两个重要功能,本章会详细阐述如何在ExtAspNet中实现这两个功能. 排序 首先来看一个排序的例子,ASPX标签如下: 1: <ext:Grid ID="Gri ...
- [原创]FineUI秘密花园(二十七) — 窗体控件概述(上)
窗体控件在项目中使用非常频繁,同时窗体控件和启用IFrame的面板控件也一起构成了FineUI所特有的内联框架,从而使弹出窗体不再局限于IFrame页面中.本章我们会详细介绍窗体控件的基本用法. 创建 ...
- [原创]FineUI秘密花园(二十一) — 表格之动态创建列
有时我们需要根据数据来动态创建表格列,怎么来做到这一点呢?本章会详细讲解. 动态创建的列 还是通过一个示例来看下如何在FineUI中动态创建表格列,示例的界面截图: 先来看下ASPX的标签定义: 1: ...
- [原创]FineUI秘密花园(二十六) — 选项卡控件概述
选项卡的使用非常广泛,比如官方示例的站点框架,TabStrip被用来同时打开多个页面,并方便地在页面之间进行快速切换.TabStrip还进行需要和JavaScript进行交互,比如动态的打开关闭选项卡 ...
- [原创]FineUI秘密花园(二十四) — 树控件之数据绑定
上一篇文章我们介绍了树控件的基本用法,不过都是通过标签来声明树控件的结构,本章我们会详细讲解如何在后台绑定树控件. 绑定到XmlDocument 下面通过一个简单的例子来看如何将XmlDocument ...
- FineUI秘密花园(二) — 一切从头开始
这篇文章我们会从头开始使用ExtAspNet,最终完成一个模拟用户登录的界面,最终的效果图如下所示: 项目准备 1. 新建一个ASP.NET Web应用程序项目. 2. 从开源网站下载最新版本的Ext ...
- [原创]FineUI秘密花园(六) — 表单控件
FineUI中有哪些常用的表单控件,它们有什么共同点和不同点,这一篇文章我们会详细解说. 表单控件的公共属性 所有的表单都具有如下属性: ShowLabel:是否显示标签(默认值:true). Sho ...
- 【原创】再来二频,发现改变的东西太多了。
记得毕业第一年,一周至少登陆二频三次,甚至有时候特别疯狂,在上班的时候写一些口水文章,哗众取宠,舌战社区,何等逍遥. 现在呢?特别无聊的时候,翻遍了其他八卦网站后发现实在没有什么可以看得了,才爬 ...
最新文章
- [trustzone]-ARMV8的aarch64和aarch32环境下ELx级别的理解
- 2017软件测试考试分值,【2017年整理】软件测试性能指标.docx
- mr利用mapjoin计算出每个部门的总工资以及部门名称
- 这个时代最重要的技能之一(数据分析)
- 未来我们需要一辆什么样的智能汽车?
- 2020年阿里云年中大促【福利】【选品】全攻略
- 汉诺塔问题的求解与分析
- js 文件上传 图片上传 传输速度计算
- SAP软件财务年结步骤
- c#程序设计实训报告心得体会_C#.NET程序设计实验一实验报告
- base64格式转换成普通png格式
- 每一个都能笑抽的 39 个奇葩代码注释
- VIGA--病毒基因组注释
- 网速卡慢延迟大怎么解决?
- 【CC++】这天是星期几?
- 潭州教育python学院_潭州什么学院,直播python课程内幕
- 手机号 imsi tmsi_《天网行动》就剧中出现个人手机号致歉 机主称仍打算起诉
- 英语语法检查工具C++
- 购买服务器/安装宝塔
- 限流算法之计数器(一)