|
| 編輯推薦： |
FineUI是一款由国内程序员开发的ASP.NET第三方组件，历经8年120多个版本的积累及沉淀，目前在应用上已经非常成熟。
FineUI具有以下一些特点。
基于C#和ASP.NET 2.0开发：组件的命名、属性、方法、事件与原生的ASP.NET组件保持一致，开发人员无须学习更多的代码基础知识。
丰富的组件库及应用主题：FineUI具有超过50个专业的ASP.NET组件，提供4种主题UI方案，同时，支持自定义主题来满足项目的个性化需求。在此基础上，不仅能快速实现业务逻辑，而且能够使页面设计及页面展现形式更加丰富多彩。
轻量级的数据传输：FineUI采用透明的Ajax数据更新模式，不需要任何额外的代码，即可实现页面的局部更新。此外，独创的XState页面数据保存及传输机制，极大地减少了数据传输量。
跨浏览器支持：FineUI使用C#代替传统的JavaScript开发，不需要JavaScript代码就能完成真正的Web 2.0应用，不仅提高了开发效率，而且还可以确保在所有主流的浏览器下流畅地运行、维护和升级。
丰富的示例教程且开源免费：FineUI提供了超过100个示例和丰富的
|
| 內容簡介： |
第三方组件是程序开发工具的重要补充，能够弥补开发平台在应用功能上的不足或缺陷。
FineUI作为ASP.NET开发平台的第三方组件，历经8年120多个版本的积累及沉淀，目前，在应用上已经非常成熟。
FineUI具有丰富的组件库，拥有原生的Ajax支持和出色的UI效果。通过使用FineUI，Web程序设计人员无须拥有JavaScript和ExtJS的基础知识，就可以快速地开发出功能强大的Web应用；不仅能够极大地减少开发时间、降低开发成本，而且维护升级方便，具有良好的兼容性能。
本书围绕FineUI，创建了一个基于ASP.NET平台的在线应用项目。通过针对该项目的分析、设计、代码实现、测试与部署等环节，使读者能够快速地掌握FineUI程序设计的技巧，更高效地进行项目设计与开发。
本书既适合具有一定ASP.NET基础知识的人员阅读，也可作为高等学校计算机相关专业ASP.NET开发平台课程的辅助书籍。此外，本书还可供程序员和编程爱好者作为实际工作中的参考手册。
|
| 目錄：
|
目 录
第一篇 初识FineUI
第1章 ASP.NET常用的第三方组件 3
1.1
Developer Express 3
1.2
Ribbon Designer 5
1.3
FineUI 7
第2章 FineUI介绍 10
2.1 初识FineUI 10
2.1.1
FineUI发展历史 10
2.1.2
FineUI的构成 10
2.1.3
FineUI的运行机制 11
2.2
FineUI的配置与运行 11
2.3
FineUI使用示例 14
2.3.1
从当前窗口弹出对话框 14
2.3.2
从顶层窗口弹出对话框 15
2.3.3
FineUI综合示例 16
2.4 常用的FineUI组件 18
2.4.1
表单组件 18
2.4.2
表单布局 32
2.4.3
表格组件 40
2.4.4
窗体控件 80
2.4.5
内联框架 91
第二篇 FineUI项目实战
第3章 项目需求分析 101
3.1 项目背景介绍 101
3.2 系统功能需求 101
第4章 总体设计 114
4.1 系统目标 114
4.2 开发环境 114
4.3 网站功能结构 115
4.3.1
普通游客功能 115
4.3.2
学生用户功能 115
4.3.3
教师用户功能 117
4.3.4
管理员用户功能 121
4.4 业务流程 125
第5章 数据库设计 129
5.1 概念设计 130
5.2 逻辑结构设计 133
5.3 物理结构设计 135
5.3.1
系统的表结构 135
5.3.2
自定义函数的设计 141
5.3.3
存储过程的设计 145
5.4 数据库的保护 148
5.4.1
数据库备份和还原 148
5.4.2
故障恢复 150
第6章 代码实现 152
6.1 用户管理 152
6.1.1
用户添加 152
6.1.2
用户管理 159
6.2 用户登录 173
6.3 作业管理 176
6.3.1
作业发布 176
6.3.2
作业维护 194
6.3.3
作业详情 196
6.3.4
作业批改 204
6.4 文件管理 213
6.5 题库管理 216
6.5.1
频道管理 216
6.5.2
领域管理 221
6.5.3
题库管理 223
6.6 数据统计 249
6.6.1
用户使用清单统计 249
6.6.2
作业安排统计 252
6.6.3
作业成绩清单 253
6.6.4 作业情况分析 254
6.6.5
部门题库统计 254
6.6.6
题库清单 255
6.6.7
教师题库统计 256
6.6.8
自主式学习统计 257
6.6.9
自主式学习详细清单统计 258
6.6.10
按学校用户使用统计 258
6.6.11
按部门用户使用统计 259
6.6.12
用户使用清单 260
6.6.13
按用户使用统计 261
6.6.14
图表统计 261
6.7 新闻管理 268
6.8 自主学习 277
6.8.1
学习计划管理 277
6.8.2
完成学习计划 294
6.9 讨论与交流 310
第7章 项目测试与部署 331
7.1 项目的测试 331
7.1.1
测试的重要性 331
7.1.2
测试的基本概念 332
7.1.3
测试计划 332
7.1.4
测试结果分析 345
7.2 项目发布与部署 345
7.2.1
在Windows 7中配置IIS 7 345
7.2.2
发布网站 346
7.2.3
部署网站 347
第三篇 FineUI拾遗
第8章 FineUI组件索引 353
8.1
FineUI的表单组件 353
8.2
FineUI的表格组件 355
8.3 其他组件 355
第9章 NeatUpload第三方组件 357
9.1
NeatUpload组件的介绍 357
9.2
NeatUpload组件的安装及使用 357
9.2.1
获取NeatUpload组件 357
9.2.2
配置NeatUpload组件 358
9.2.3
NeatUpload组件的使用 359
第10章 Web.config的详细配置 361
10.1
Web.config文件介绍 361
10.2
Web.config配置详解 361
10.3
在Web.config中配置FineUI 369
10.3.1
设置configurations 369
10.3.2
设置system.web 370
10.3.3
常见问题列表 370
第11章 FineUI支持的Ajax属性 373
第12章 ViewState与XState 376
12.1
ViewState在ASP.NET控件中的
作用 376
12.2
FineUI早期使用ViewState的
情况 377
12.3
FineUI中的XState机制 380
参考文献 382
|
| 內容試閱：
|
第一篇 初识FineUI
FineUI是一组基于ExtJS的ASP.NET第三方专业组件库，拥有原生的Ajax 支持和华丽的UI效果。借助于FineUI，Web程序设计人员无须拥有JavaScript和ExtJS的基础知识，即可快速开发出功能强大的Web 2.0应用。
使用FineUI不仅能够极大地减少开发时间，降低开发成本，而且维护升级方便，具有良好的兼容性，在绝大部分主流浏览器下均能流畅运行。
第1章 ASP.NET常用的第三方组件
本章要点：
* 第三方组件的概念。
* 第三方组件的优势。
* 常用的第三方组件。
第三方组件，从通常的意义上来说，是针对某种软件在应用功能上的不足或缺陷，而由软件编制方以外的其他组织或个人开发的相关组件。这种组件不是官方提供的，也不是由软件使用者编写的组件。用成熟的第三方组件进行开发，会提高开发的效率，减少出错的可能。作为对软件开发的支撑，组件是用户可与之交互以输入或操作数据的对象，通常出现在对话框中，或出现在工具栏上。
第三方组件的范围很广。简单的第三方组件有按钮、文本框等，复杂的第三方组件可以包括报表组件、表格组件和文字处理组件等，也会有一些组件套包，是由一系列组件组成的，通常包括表格、报表、图表、菜单、工具栏、数据输入验证等，特点是包含的组件数量比较多。
当然，使用第三方组件也存在一定风险：通常会有版本上的问题，或是要遵循某个开发协议，甚至会有Bug。如果出现Bug，会由于没有源代码，无法排除。即使有源代码，因为组件比较庞大，所以排除Bug的难度也会比较高。
在ASP.NET程序开发中，常用的第三方组件有很多，如Spread、Developer Express、DevComponents、DotNetBar等。本章主要介绍三种常用的第三方组件：Developer Express、Ribbon Designer和FineUI。
书中还用到了NeatUpload、MyXls、Amcharts等第三方组件，本章不再赘述。
1.1
Developer Express
Developer Express以下简称Dev是Visual Studio开发平台中自带的组件。下载地址为https:www.visualstudio.comen-us，最新版本为Developer
Express .NET v8.2。
1. 什么是Developer Express
Dev是Visual Studio 2012以下简称VS2012自带的DatagridView控件重写版本的第三方组件。Dev包括较多优秀产品，有套包，也有子组件。Dev产品不仅功能丰富、应用简便，而且界面华丽，更可方便地定制，对于.NET编程人员来说是个不错的选择。它的菜单栏组件更具代表性，完全可以替代开发环境提供的基本组件，让编写的程序或软件更显专业性。它还提供完善的帮助系统，资料详尽，可以快速入手。
Developer Express的界面如图1.1所示。
图1.1 Developer Express的界面
2. Developer Express的优势
1 提供精美的界面设计功能。
Dev界面精美，而且提供强大的自定义功能，用于UI设计时，展示效果很华丽。
2 内嵌功能强大。
对于很多传统WinForm项目难以展示的功能，Dev都可以实现，特别是在图表展示方面，可以实现丰富多彩的效果，如图1.2和1.3中所展示的网站。
3 产品免费。
该产品只需要开发者授权部署授权免费便可部署。一个授权Developer License允许一个工程师安装使用，开发出来的程序可免费部署，不再收取任何费用。
图1.2 用Developer
Express做的个人网站
图1.3 用Developer
Express做的社团网站
4 高效和实用。
Dev拥有大量的示例和帮助文档，开发者能够快速上手。在国内，Dev拥有大量的用户群体。
此外，Dev设计开发资料比较完善，交流方便，除了界面美观外，最大的优势就是使用简单，可缩短开发周期，节约项目成本。
除此而外，Dev在国内最早流行，相较其他组件更为成熟稳定，兼容性更好。
1.2
Ribbon Designer
Ribbon Designer第三方组件由白俄罗斯的一家公司开发，用于帮助用户对其SharePoint 和Office 365解决方案提供完全的自定义框架。
下载地址为http:www.bcgsoft.comdocRibbonDesigner.htm。
最新版本为Ribbon Designer v1.6.257。
1. 什么是Ribbon
Ribbon即功能区，是一种以面板及标签页为架构的使用者界面User Interface，最早出现在Microsoft Office 200720102013的Word、Excel和PowerPoint等组件中。
在仪表板设计器中，功能区包含一些用于创建、编辑和导出仪表板及其元素的上下文工具，它是一个收藏了命令按钮和图示的面板，把命令组织成一组"标签"，每一组包含了相关的命令，每一个应用程序都有一个不同的标签组，展示了程序所提供的功能。
在每个标签里，各种相关的选项被组合在一起。
如图1.4和1.5所示为典型的Ribbon界面。
图1.4 典型的Ribbon界面白
图1.5 典型的Ribbon界面黑
2. Ribbon的优势
与传统的菜单式用户界面相比，Ribbon界面的优势主要体现在如下几个方面。
1 使用方便。
所有功能有组织地集中存放，不再需要查找级联菜单、工具栏等，还能更好地在每个应用程序中组织命令，提供足够显示更多命令的空间，如图1.6所示。
图1.6 Ribbon工具栏
2 效率高。
丰富的命令布局，可以帮助用户更容易找到重要的、常用的功能。可以显示图示，对命令的效果进行预览，例如改变文本的格式等，如图1.7所示。
图1.7 显示图示
3 更加适合触摸屏操作。
虽然从菜单式界面到Ribbon界面有一个比较漫长的熟悉过程，但事实是，Ribbon界面正在被越来越多的人接受。相应地，越来越多的软件开发商开始抛弃传统的菜单式界面，转而采用Ribbon界面。
1.3
FineUI
FineUI是由中国程序员三生石上和Ringo Ding创建并维护的，提供完整的Web 2.0开发设计解决方案。
下载地址为http:www.fineui.com。
最新版本为FineUI开源版 v4.2.1和 FineUI专业版 v2.8.0。
1. 什么是FineUI
FineUI是一组基于ExtJS的专业ASP.NET组件库，拥有原生的Ajax支持和华丽的UI效果，如图1.8所示。
图1.8 FineUI开源版在线示例
FineUI的设计目的，就是让ASP.NET开发人员在不需要了解JavaScript和ExtJS的情况下，就能快速开发出漂亮的Web 2.0应用。因此，每个组件的编写都尽量符合ASP.NET的开发习惯。从组件和属性的命名，到复杂的Ajax交互，都让传统的ASP.NET开发人员感到非常便捷。
在开发模式上，FineUI以管理项目为驱动，组件的开发优先级都是服务于项目需要的。在设计过程中，独创了很多服务于实际需求的功能，如原生的Ajax支持、轻量级的数据传输，以及基于IFrame的页面框架。因此，FineUI不会追求对ExtJS进行完全的封装，但是会在80%的常见功能上进行细致入微的设计和思考。
2. FineUI的优势
FineUI具有以下几个方面的优势。
1 快速的项目开发。
基于C#和ASP.NET 2.0开发模式，不需要JavaScript代码就能完成真正的Web 2.0应用。不仅能够极大地减少开发时间和降低开发成本，而且维护升级方便。
2 基于现有的ASP.NET知识。
虽然FineUI是基于ExtJS组件的，但是，不需要用户事先了解ExtJS的知识。
FineUI严格遵循ASP.NET的命名习惯和开发框架完成，组件的命名、属性、方法、事件与原生的ASP.NET组件保持一致。
3 丰富的组件库。
FineUI提供了超过50个专业的ASP.NET组件，不仅能帮助开发者快速实现业务逻辑，而且会让页面更加生动和华丽。
4 跨浏览器支持。
FineUI使用C#代替传统的JavaScript开发，不仅能提高开发效率，而且可以确保在所有主流的浏览器下流畅运行。
5 多主题支持。
FineUI不仅内置3种官方主题，而且通过示例，提供了4种扩展主题，同时，还允许开发者自定义自己的主题，来满足项目的个性化需求。如图1.9所示。
图1.9 官方主题
6 页面无刷新。
FineUI所有的页面回发都不会导致整个页面重新渲染，而只有部分页面得到更新。而这个Ajax过程对开发人员完全透明，可以像往常一样，在服务器端改变组件属性，而这个修改会直接更新反映到前台页面，而不需要任何额外的代码。
7 轻量级的数据传输。
FineUI独创的XState页面数据保存及传输机制，极大地减少了数据传输量。
8 丰富的示例教程。
超过100个示例和丰富的在线教程，让开发者可以全面掌握FineUI的各种用法。
9 开源免费。
FineUI可以免费应用于任何非商业或者商业性的项目，采用对商业应用友好的Apache License 2.0协议。
第2章 FineUI介绍
本章要点：
* 了解FineUI。
* FineUI的配置和运行。
* 常用的FineUI组件。
2.1 初识FineUI
FineUI是使用比较广泛的ASP.NET第三方专业组件，它具有使用方便、开发效率高、界面丰富的特点，不仅能够极大地减少开发时间，降低开发成本，而且维护升级方便，在绝大部分主流浏览器下均可保障良好的兼容性能。
2.1.1
FineUI发展历史
FineUI由若干规模较小的第三方组件产生，并且不断完善。发展历程如下。
1 2008年4月11日，第一个版本的ExtAspNetFineUI的曾用名诞生，其中只包含7个简单的表单组件。
2 2009年3月25日，ExtAspNetFineUI发布了该项目的最后一个版本v1.3.1，此时，这个版本已经被应用于多个企业的实际项目，并产生了很好的经济效益。
3 2012年11月18日，ExtAspNet正式改名为FineUI，并发布v3.2.0。
4 2012年12月，FineUI发布首款商业软件FineUI.Design，为FineUI提供VS的设计支持。
5 2013年10月26日，FineUI推广上线，商业软件FineUI.Design可以开始被购买。
6 2014年7月21日，发布FineUI
v4.1.0正式版，这是FineUI开源版的最稳定版本，同时，也是专业版的兼容版本。
7 2015年10月22日，同时发布了FineUI开源版 v4.2.1和FineUI专业版 v2.8.0。
2.1.2
FineUI的构成
FineUI是将ExtJS和ASP.NET进行深度整合后的产物。通过两者的优化组合，具有以下的显著优点：大量地基于JavaScript和CSS，却并不需要程序员编写其代码；拥有原生的Ajax支持，却并不需要依赖于ASP.NET的UpdatePanel；可获得快速的ASP.NET开发模式，却并不需要ViewState的参与。
学习FineUI只需要有ASP.NET的开发基础，不需要事先学习ExtJS，原因在于FineUI已经是一个深度封装的组件库，绝大部分操作均实现了模块化与可视化。
2.1.3
FineUI的运行机制
在传统ASP.NET项目开发中，使用ViewState机制在回发过程中保存组件数据。
ViewState是ASP.NET的一个非常重要的特性，用来在页面回发过程中维护组件的服务器端状态，这样，我们就能方便地在按钮的单击事件处理函数中编写如下代码了：
Label1.Text = TextBox1.Text;
对ViewState的描述可以简单概括如下。
1 页面第一次加载时，服务器组件把自身的属性保存在页面上的一个隐藏字段 __VIEWSTATE中。
2 页面PostBack时，表单提交的同时，__VIEWSTATE的值也被提交到后台，ASP.NET会从这个隐藏字段中恢复组件属性。
在传统的网站开发中，ViewState的这一工作原理无可厚非，并且极大地简化了程序员的工作量。但是，随着Ajax的兴起，特别是在通过JavaScript渲染的客户端界面中，ViewState的实现显得捉襟见肘。
FineUI弃用了ViewState，转而采用自己实现的XState机制：在不放弃页面回发中C#操作服务器组件便利的同时，拒绝了任何形式数据传输的浪费。
XState是FineUI进行页面保存及数据传输的重要机制。目前，XState已经在FineUI组件内部完全取代了原生的ViewState，避免了重复数据的传输，极大地减少了网络流量。
2.2
FineUI的配置与运行
FineUI的官方下载地址是http:fineui.com。在安装FineUI之前，首先要确认已经安装了Visual Studio。FineUI的配置步骤如下。
1 将Visual
Studio打开以2012版为例，新建一个ASP.NET Web应用程序项目，如图2.1所示。
图2.1 创建ASP.NET Web应用程序项目
2 从菜单栏中选择"文件""新建""网站"命令，弹出如图2.2所示的"新建网站"对话框。
图2.2 "新建网站"对话框
3 依次选择"Visual
C#"、"ASP.NET空网站"，输入网站名称，选择网站保存路径，如图2.3所示。
图2.3 输入网站名称并选择网站保存路径
4 加入ASP.NET页面。网站建立后，便可在"解决方案资源管理器"中选中当前项目，单击鼠标右键，在弹出的快捷菜单中选择"添加新项"命令，弹出"添加新项"对话框，即可在网站中加入网页，如图2.4所示。
图2.4 "添加新项"对话框
5 从开源网站下载最新版本的FineUI，并在新建的项目中添加对FineUI.dll的引用，如图2.5所示。
6 配置Web.config文件，在页面的form表单下添加：
f:PageManager
ID="PageManager1" runat="server"
7 在页面中，添加引用FineUI，过程如图2.6~2.8所示。
图2.5 引用FineUI.dll 图2.6 引用FineUI的过程一图2.7 引用FineUI的过程二
图2.8 引用FineUI的过程三
2.3
FineUI使用示例
2.3.1
从当前窗口弹出对话框
【例2.1】在页面中添加一个Button控件，用于弹出对话框，并添加相应的触发事件。
1 在页面中添加一个Button控件，用于弹出对话框：
html
head runat="server"
titletitle
link
href="..rescsscommon.css" rel="stylesheet"
type="textcss"
head
body
form id="form1"
runat="server"
f:PageManager
ID="PageManager1" runat="server"
f:Button Text="点击弹出对话框"
runat="server" ID="btnHello"
OnClick="btnHello_Click"
f:Button
form
body
html
2 在触发事件中实现从当前窗口中弹出对话框，其代码如下：
protected void btnHello_Clickobject
sender, EventArgs e
{
Alert.Show"你好 FineUI！", MessageBoxIcon.Warning;
}
3 效果如图2.9所示。
图2.9 从当前窗口弹出对话框
2.3.2
从顶层窗口弹出对话框
【例2.2】在页面中添加一个Button控件，用于弹出对话框，并添加相应的触发事件。
1 在页面中添加一个Button控件，用于弹出对话框：
html
head runat="server"
titletitle
link
href="..rescsscommon.css" rel="stylesheet"
type="textcss"
head
body
form id="form1"
runat="server"
f:PageManager
ID="PageManager1" runat="server"
f:Button Text="在顶层窗口弹出对话框"
runat="server" ID="btnHello2"
OnClick="btnHello2_Click"
f:Button
form
body
html
2 在触发事件中实现从顶层窗口中弹出对话框，其代码如下：
protected void btnHello2_Clickobject
sender, EventArgs e
{
Alert.ShowInTop"你好 FineUI！", MessageBoxIcon.Information;
}
3 效果如图2.10所示。
图2.10 从顶层窗口弹出对话框
2.3.3
FineUI综合示例
【例2.3】本例主要演示如何使用Visual Studio 2012建立一个ASP.NET网站，详细步骤如下。
1 将已经下载好的FineUI空项目用Visual
Studio 2012打开，如图2.11所示。
图2.11 打开空项目
2 打开Web.config，修改配置文件，源代码如下：
system.web
pages
controlRenderingCompatibilityVersion="4.0"
clientIDMode="AutoID"
controls
add assembly="FineUI"
namespace="FineUI" tagPrefix="f"
controls
pages
httpModules
add name="FineUIScriptModule"
type="FineUI.ScriptModule, FineUI"
httpModules
httpHandlers
add verb="GET"
path="res.axd" type="FineUI.ResourceHandler, FineUI"
validate="false"
httpHandlers
httpRuntime
maxRequestLength="102400"
customErrors mode="Off"
compilation debug="true"
targetFramework="4.5"
system.web
修改后的代码如下：
system.web
pages
controlRenderingCompatibilityVersion="4.0"
clientIDMode="AutoID"
controls
add assembly="FineUI"
namespace="FineUI" tagPrefix="f"
controls
pages
httpRuntime
maxRequestLength="102400 "
customErrors mode="Off"
compilation debug="true"
targetFramework="4.5"
system.web
system.webServer
modules
add name="FineUIScriptModule"
type="FineUI.ScriptModule, FineUI"
modules
handlers
add name="FineHandler"
verb="GET" path="res.axd"
type="FineUI.ResourceHandler, FineUI"
preCondition="integratedMode"
handlers
validation validateIntegratedModeConfiguration="false"
system.webServer
3 单击运行按钮，生成FineUI空项目框架，如图2.12所示。
图2.12 空项目框架
2.4 常用的FineUI组件
FineUI中包含大量的组件，本节将介绍常用的FineUI组件本节的组件示例整理自FineUI官方网站的"在线示例"部分，网址为http:www.fineui.comdemo。更多组件的使用，可参见本书第三篇。
2.4.1
表单组件
所有的表单都具有下列属性。
* ShowLabel：是否显示标签默认为true。
* ShowEmptyLabel：是否显示空白的标签默认为false。
* Label：标签文本默认为""。
* LabelSeparator：表单中字段与标签的分隔符，可以通过Web.config、PageManager、Form三个级别进行控制，一般不需要设置此属性默认为在PageManager中设置的参数。
* ShowRedStar：在标签后面显示红色的星号用来标识必填项，一般与Required等表单验证属性配合使用。
* Readonly：表单控件的只读状态默认为false。
* TabIndex：Tab按键的跳转顺序，一般不需要设置此属性，页面会根据控件的出现顺序自动决定Tab按键的跳转顺序默认为null。
* OffsetRight：距离右侧边界的宽度，可以通过Web.config、PageManager、Form三个级别进行控制，一般不需要设置此属性默认为PageManager中设置的参数。
* ToolTip：提示文本默认为""。
* ToolTipTitle：提示文本的标题默认为""。
* ToolTipAutoHide：是否自动隐藏提示信息默认为true。
注意：很多属性只有在表单内才有意义，比如ShowLabel、Label、OffsetRight等属性。在表单外放置的表单控件是不显示标签的。
1 Button。
Button按钮控件包含的主要属性见表2.1。
表2.1 Button控件的主要属性
属 性
说 明
ID
唯一标识码
DisableControlBeforePostBack
回发之前禁用按钮防止重复提交
EnablePostBack
是否可以回发
Pressed
是否被按下
Text
按钮的文本
① 按钮的状态与大小。
按钮有启用禁用，按下正常几种状态，对应的属性分别为Enabled、EnablePress、Pressed三个属性。显示效果如图2.13所示。
按钮有大、中、小三个尺寸，对应的属性为Size，显示效果如图2.14所示。
图2.13 按钮的不同显示状态 图2.14 按钮的大小
② 按钮上的图标。
按钮上的图标可以通过Icon枚举类型，FineUI内置了很多图标或者IconUrl两个属性来指定，图标的位置可以位于文本的上下左右4个位置，通过IconAlign属性来指定。对于不显示文字的按钮，只需要指定Icon或者IconUrl属性，而不用指定Text属性。
按钮上的图标效果如图2.15所示。
图2.15 按钮上的图标
③ 按钮的单击事件。
默认时，按钮的单击会触发一次Ajax回发，典型的示例代码如下：
f:Button ID="btnServerClick"
Text="服务器端事件" OnClick="btnServerClick_Click"
runat="server"
f:Button
后台事件处理：
protected void btnServerClick_Clickobject
sender, EventArgs e
{
事件处理
}
如果希望在客户端能够通过JavaScript代码来处理按钮的单击事件，则需要设置相应的EnablePostBack和OnClientClick两个属性，典型的代码如下：
f:Button ID="btnClientClick"
Text="客户端事件"
OnClientClick="alert''这是客户端事件'';"
EnablePostBack="false"
runat="server"
f:Button
有时，希望在服务器端通过C#代码注册客户端的事件脚本，典型代码如下：
f:Button ID="btnClientClick2"
Text="服务器端生成的客户端事件"
EnablePostBack="false" runat="server"
f:Button
protected void Page_Loadobject sender,
EventArgs e
{
if !IsPostBack
{
btnClientClick2.OnClientClick =
Alert.GetShowInTopReference"这是在服务器端生成的客户端事件";
}
}
④ 按钮重复提交。
在使用ASP.NET的按钮编程时，经常需要额外处理一个情况：防止按钮的重复提交。而这个特性已经内置在FineUI的按钮中，并且公开了一个属性：
DisableControlBeforePostBack 默认已经启用这个功能
⑤ 客户端验证表单。
按钮的一个主要用途是提交表单，过去，我们或许要写一堆JavaScript代码来验证每个表单控件，然后单击按钮，在回发之前弹出错误提示框。在FineUI的应用场景中，我们只需要为每个控件设置验证规则，然后设置按钮需要验证哪个表单或者哪些表单即可，这是通过ValidateForms属性来实现的。
如果需要验证多个表单，只需要将这些表单的ID以逗号分隔的形式设置到ValidateForms属性即可。例如：
f:Button ID="btnSubmitAll"
Text="验证两个表单并提交" runat="server"
OnClick="btnSubmitAll_Click"
ValidateForms="extForm1,extForm2"
在客户端验证失败时，会显示如图2.16所示的提示框，并阻止本次表单提交。
图2.16 按钮的客户端验证表单
如果采用类似示例站点的IFrame框架结构，可以通过属性ValidateTarget指定错误提示框显示的位置，可以是本页面，也可以是父页面。
⑥ 带有菜单的按钮。
按钮也可以拥有自己的菜单，效果如图2.17所示。
图2.17 带有菜单的按钮
ASPX页面的代码如下：
f:Button ID="btnMenu"
Text="中国科学技术大学" EnablePostBack="false" runat="server"
Menu
f:MenuHyperLink runat="server"
Icon="TagGreen" Target="_blank"
NavigateUrl="http:scms.ustc.edu.cn" Text="化学与材料科学学院"
f:MenuHyperLink
f:MenuHyperLink runat="server"
Icon="TagBlue" Target="_blank"
NavigateUrl="http:business.ustc.edu.cnzh_CN"
Text="管理学院"
Menu
f:MenuHyperLink runat="server"
Icon="TagPink" Target="_blank"
NavigateUrl="http:is.ustc.edu.cn" Text="工商管理系"
f:MenuHyperLink
f:MenuHyperLink runat="server"
Icon="TagPurple" Target="_blank"
NavigateUrl="http:stat.ustc.edu.cn" Text="统计与金融系"
f:MenuHyperLink
Menu
f:MenuHyperLink
Menu
f:Button
⑦ 工具栏中的按钮。
按钮不仅可以单独使用，而且可以在表单中作为提交按钮，当放在工具栏中时，则成为一个工具栏项。这样，不仅可以设置按钮工具栏项的状态、添加单击事件、验证表单，而且还可以添加菜单，如图2.18所示。
图2.18 工具栏中的按钮
ASPX页面的代码如下：
f:Panel ShowBorder="true"
BodyPadding="5px" Height="300px" Width="450px"
ShowHeader="false"runat="server"
Toolbars
f:Toolbar runat="server"
Items
f:ToolbarText runat="server" Text="内联项："
f:ToolbarText
f:ToolbarSeparator runat="server"
f:ToolbarSeparator
f:Button EnablePostBack="false" Text="中国科学技术大学"
runat="server"
Menu
f:MenuHyperLink runat="server"
Target="_blank"
NavigateUrl="http:scms.ustc.edu.cn"
Text="化学与材料科学学院"
f:MenuHyperLink
f:MenuHyperLink runat="server"
Target="_blank"
NavigateUrl="http:business.ustc.edu.cnzh_CN"
Text="管理学院"
Menu
f:MenuHyperLink runat="server" Target="_blank"
NavigateUrl="http:is.ustc.edu.cn" Text="工商管理系"
f:MenuHyperLink
f:MenuHyperLink runat="server"
Target="_blank"
NavigateUrl="http:stat.ustc.edu.cn"
Text="统计与金融系"
f:MenuHyperLink
Menu
f:MenuHyperLink
Menu
f:Button
Items
f:Toolbar
Toolbars
f:Panel
⑧ 单击按钮前的确认对话框。
如果希望在单击按钮的时候首先弹出确认对话框类似于JavaScript的window.confirm，在征得用户的同意后再触发按钮的默认行为，FineUI也考虑到了这种需求，特意提供了如下几个属性：ConfirmText、ConfirmTitle、ConfirmIcon、ConfirmTarget。
一个典型的应用是在数据展示表格的工具栏中，放置一个写着"删除选中项"的按钮，用来删除表格中选中的项，如图2.19所示。
图2.19 "删除选中项"按钮
为了防止用户误操作，我们一般需要首先提醒用户这个操作是不可恢复的操作，是否确认删除，如图2.20所示。
图2.20 单击按钮执行删除前的确认对话框
2 Label。
Label控件用于简单文本的显示，其属性如表2.2所示。
表2.2 Label控件的属性
属 性
说 明
ID
唯一标识
Text
显示的文本
EncodeText
是否对文本编码
自动编码文本
默认情况下，Label的EncodeText属性为true，会对文本中的HTML进行编码。当然，我们也可以设置EncodeText = false，从而将HTML片段赋值给Text属性，示例如下：
f:Label Text="普通的 Label 标签，会自动编码字符串比如：strongstrong"
runat="server"
f:Labelbr
f:Label EncodeText="false"
Text="a href=''http:www.ustc.edu.cn'' target=''_blank''中国科学技术大学a"
runat="server"
f:Labelbr
f:Label EncodeText="false"
Text="span style=''color:red;font-weight:bold;''修改文本的样式span"
runat="server"
f:Label
页面显示效果如图2.21所示。
图2.21 自动编码文本
3 TextBox。
TextBox是FineUI中的输入控件，一般包含了如表2.3所示的一些属性。
表2.3 TextBox控件的属性
属 性
说 明
ID
唯一标识码
EmptyText
为空时显示的文本
Label
输入框前面的文本标签
Required
是否必填
ShowRedStar
输入不符合标准时显示红色的提示符号
【例2.4】本例介绍在登录表单中如何应用TextBox控件。代码如下：
html
head runat="server"
titletitle
link
href="..rescsscommon.css" rel="stylesheet"
type="textcss"
head
body
form id="form1"
runat="server"
f:PageManager
ID="PageManager1" runat="server"
f:SimpleForm ID="SimpleForm1"
BodyPadding="5px" runat="server" Width="550px"
EnableCollapse="true" Title="登录表单"
ShowHeader="True"
Items
f:TextBox runat="server"
Label="用户名" ID="tbxUseraName" Required="true"
f:TextBox
f:TextBox
runat="server"ID="tbxPassword" Label="密码"
TextMode="Password"
Required="true"
f:TextBox
f:Button ID="btnSubmit"
CssClass="marginr" runat="server" OnClick="btnSubmit_Click"
ValidateForms="SimpleForm1" Text="登录"
f:Button
f:Button ID="btnReset"
runat="server" EnablePostBack="false" Text="重置"
f:Button
Items
f:SimpleForm
br
f:Label ID="labResult"
ShowLabel="false" runat="server"
f:Label
form
body
html
运行程序，效果如图2.22所示。
图2.22 登录表单
自动回发的文本输入框
当文本输入框失去焦点时，可以自动回发页面。示例如下：
f:TextBox runat="server"
ID="TextBox1" EmptyText="文本框值改变则自动回发"
Width="200" AutoPostBack="true"
OnTextChanged="TextBox1_TextChanged"
f:TextBox
protected void TextBox1_TextChangedobject
sender, EventArgs e
{
labResult.Text = "文本框的值："
TextBox1.Text;
}
4 TwinTriggerBox。
TwinTriggerBox控件是具有两个触发按钮的搜索框。当用户在文本框中输入关键字并单击搜索按钮时，会显示一个清空关键词的按钮，如图2.23所示。这个需求被内置到FineUI中，这就是TwinTriggerBox。
TwinTriggerBox控件的属性如表2.4所示。
表2.4 TwinTriggerBox控件的属性
属 性
说 明
EnableEdit
是否允许编辑
ShowTrigger
是否显示触发器
ShowTrigger1
是否显示第一个触发器
ShowTrigger2
是否显示第二个触发器
EnableTrigger1PostBack
是否可以回发第一个触发器
EnableTrigger2PostBack
是否可以回发第二个触发器
TwinTriggerBox控件的使用：
f:TwinTriggerBox
ID="ttbxMyBox2" OnTrigger1Click="ttbxMyBox2_Trigger1Click"
OnTrigger2Click="ttbxMyBox2_Trigger2Click"
Trigger1Icon="Clear" ShowTrigger1="False" EmptyText="搜索用户名"
Trigger2Icon="Search"
runat="server"
f:TwinTriggerBox
后台代码：
protected void
ttbxMyBox2_Trigger2Clickobject sender, EventArgs e
{
if !String.IsNullOrEmptyttbxMyBox2.Text
{
执行搜索动作
Alert.ShowInTop
String.Format"在关键词"{0}"中搜索", ttbxMyBox2.Text;
ttbxMyBox2.ShowTrigger1 = true;
}
else
{
Alert.ShowInTop"请输入你要搜索的关键词！";
}
}
单击TwinTriggerBox的取消按钮
protected void
ttbxMyBox2_Trigger1Clickobject sender, EventArgs e
{
执行清空动作
Alert.ShowInTop"取消搜索！";
ttbxMyBox2.Text = "";
ttbxMyBox2.ShowTrigger1 = false;
}
5 RadioButtonListCheckBoxList与此类似。
RadioButtonList提供数据项的单项选择功能。RadioButtonList的函数如表2.5所示。
表2.5 RadioButtonList控件的函数
函 数
说 明
DataBind
绑定到数据源
RaisePostDataChangedEvent
触发回发数据改变事件
RadioButtonList控件的属性如表2.6所示。
表2.6 RadioButtonList控件的属性
属 性
说 明
DataSource
数据源
Items
单选项集合
Required
是否必填项
RequiredMessage
空时提示信息
SelectedIndex
[Ajax属性]选中项的索引
SelectedIndexChanged
选中项改变事件需要启用AutoPostBack
SelectedItem
选中项
SelectedValue
[Ajax属性]选中项的值
【例2.5】本例主要是使用RadioButtonList控件设置单选按钮。代码如下：
html
head runat="server"
titletitle
link
href="..rescsscommon.css" rel="stylesheet"
type="textcss"
head
body
form id="form1"
runat="server"
f:PageManager
ID="PageManager1" runat="server"
f:SimpleForm ID="SimpleForm1"
Width="700px" runat="server"
LabelWidth="200px"
EnableCollapse="true"
BodyPadding="5px" ShowBorder="True"
ShowHeader="True"
Title="简单表单"
Items
f:RadioButtonList
ID="RadioButtonList1" Label="列表一"
runat="server"
f:RadioItem Text="可选项 1"
Value="value1"
f:RadioItem Text="可选项 2"
Value="value2"
f:RadioItem Text="可选项 3"
Value="value3" Selected="true"
f:RadioButtonList
f:Button
ID="btnServerSetSelectedValue" CssClass="marginr"
Text="选中上面列表中的第一项" OnClick="btnServerSetSelectedValue_Click"
runat="server"
f:Button
f:Button
ID="btnServerGetSelectedValue" CssClass="marginr"
Text="获取上面列表的选中项" OnClick="btnServerGetSelectedValue_Click"
runat="server"
f:Button
f:Button
ID="btnClientGetSelectedValue"
Text="获取上面列表的选中项JavaScript 脚本" EnablePostBack="false"
OnClientClick="alertSelectedValue;"
runat="server"
f:Button
f:Label runat="server"
Text="nbsp;"f:Label
f:RadioButtonList
ID="RadioButtonList2" Label="列表二一列"
ColumnNumber="1" runat="server"
f:RadioButtonList
f:Label ID="Label1"
runat="server" Text="nbsp;"f:Label
f:RadioButtonList
ID="rblAutoPostBack" AutoPostBack="true"
OnSelectedIndexChanged="rblAutoPostBack_SelectedIndexChanged"
Label="列表三自动回发" ColumnNumber="3" runat="server"
ShowRedStar="true" Required="true"
f:RadioItem Text="可选项 1很长很长很长很长很长很长的可选项"
Value="value1"
f:RadioItem Text="可选项 2"
Value="value2"
f:RadioItem Text="可选项 3"
Value="value3"
f:RadioItem Text="可选项 4"
Value="value4"
f:RadioItem Text="可选项 5"
Value="value5"
f:RadioItem Text="可选项 6"
Value="value6"
f:RadioItem Text="可选项 7"
Value="value7"
f:RadioItem Text="可选项 8"
Value="value8"
f:RadioButtonList
f:Label ID="Label2"
runat="server" Text="nbsp;"f:Label
f:RadioButtonList
ID="rblVertical" Label="列表四竖排"
ColumnNumber="3" ColumnVertical="true"
runat="server" ShowRedStar="true"
Required="true"
f:RadioItem Text="可选项 1"
Value="value1"
f:RadioItem Text="可选项 2"
Value="value2"
f:RadioItem Text="可选项 3"
Value="value3"
f:RadioItem Text="可选项 4"
Value="value4"
f:RadioItem Text="可选项 5"
Value="value5"
f:RadioItem Text="可选项 6"
Value="value6"
f:RadioItem Text="可选项 7"
Value="value7"
f:RadioItem Text="可选项 8"
Value="value8"
f:RadioButtonList
Items
Toolbars
f:Toolbar ID="Toolbar1"
Position="Bottom" runat="server"
ToolbarAlign="Right"
Items
f:Button runat="server"
ID="btnSubmit" ValidateForms="SimpleForm1"
Text="提交表单" OnClick="btnSubmit_Click"f:Button
Items
f:Toolbar
Toolbars
f:SimpleForm
form
script
type="textjavascript"
function alertSelectedValue {
var list2 = F''%= RadioButtonList1.ClientID %'';
var selectedRadio = list2.getValue;
if Ext.Object.isEmptyselectedRadio {
top.F.alert"列表一没有选中项！";
} else {
top.F.alert"列表一选中项的值：" selectedRadio[list2.name];
}
}
script
body
html
运行程序，效果如图2.24所示。
图2.24 单选按钮列表
6 DropDownList。
DropDownList是FineUI中的下拉列表选择控件，提供单个选项的选择。DropDownList控件的函数如表2.7所示，DropDownList控件的属性如表2.8所示。
表2.7 DropDownList控件的函数
函 数
说 明
DataBind
绑定到数据源
RaisePostDataChangedEvent
触发回发数据改变事件
RaisePostBackEvent
处理回发事件
表2.8 DropDownList控件的属性
属 性
说 明
EmptyText
文本框为空时显示的文本
AutoSelectFirstItem
如果未定义选中项，则自动选中第一个子项
EnableMultiSelect
是否可以选择多项
DataSource
数据源
SelectedIndexChanged
选中项改变事件
ItemDataBound
项目数据绑定
【例2.6】本例主要是使用DropDownList控件设置简单下拉列表。代码如下：
html
head runat="server"
titletitle
link href="..rescsscommon.css"
rel="stylesheet" type="textcss"
head
body
form id="form1"
runat="server"
f:PageManager
ID="PageManager1" runat="server"
f:SimpleForm ID="SimpleForm1"
BodyPadding="5px" runat="server" Width="550px"
EnableCollapse="true"
ShowBorder="True" Title="简单表单"
ShowHeader="True"
Items
f:DropDownList runat="server"
ID="DropDownList1" FocusOnPageLoad="true"
f:ListItem Text="可选项1"
Value="Value1" Selected="true"
f:ListItem Text="可选项2不可选择"
Value="Value2" EnableSelect="false"
f:ListItem Text="可选项3不可选择"
Value="Value3" EnableSelect="false"
f:ListItem Text="可选项4"
Value="Value4"
f:ListItem Text="可选项5"
Value="Value5"
f:ListItem Text="可选项6"
Value="Value6"
f:ListItem Text="可选择项7"
Value="Value7"
f:ListItem Text="可选择项8"
Value="Value8"
f:ListItem Text="普通型1 L
1.5" Value="普通型1 L 1.5"
f:ListItem Text="一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的可选择项" Value="Value11"
f:DropDownList
f:Button ID="btnSelectItem6"
Text="选中[可选项6]" runat="server"
OnClick="btnSelectItem6_Click"
CssClass="marginr"
f:Button
f:Button ID="btnGetSelection"
Text="获取此下拉列表的选中项" runat="server"
OnClick="btnGetSelection_Click"
f:Button
Items
f:SimpleForm
br
f:Label runat="server"
ID="labResult"
f:Label
br
br
注：页面加载完毕后，下拉列表默认获取焦点。
form
body
html
运行程序，效果如图2.25和2.26所示。
图2.25 简单下拉列表
图2.26 下拉列表框
此外，可以模拟树状列表进行下拉选择，如图2.27所示。
图2.27 模拟树状下拉列表
页面代码：
f:DropDownList Label="模拟树的下拉列表"
AutoPostBack="false" Required="true"
EnableSimulateTree="true" ShowRedStar="true"
runat="server" ID="ddlBox"
f:DropDownList
后台代码：
protected void Page_Loadobject sender,
EventArgs e
{
if !IsPostBack BindEnumrable;
}
public class JQueryFeature
{
private string _id;
public string Id {get {
return _id; } set { _id = value; }}
private string _name;
public string Name {get { return _name; } set { _name = value; }}
private int _level;
public int Level {get { return _level; } set { _level = value; }}
private bool _enableSelect;
public bool EnableSelect {
get { return _enableSelect; } set { _enableSelect = value; }
}
public JQueryFeaturestring id, string name, int level, bool
enableSelect
{
_id = id;_name = name; _level = level; _enableSelect = enableSelect;
}
public override string ToString
{ return String.Format"Name:{0} Id:{1}", Name, Id; }
}
private void BindEnumrable
{
ListJQueryFeature myList = new ListJQueryFeature;
myList.Addnew JQueryFeature"0", "jQuery", 0,
false;
myList.Addnew JQueryFeature"1", "核心", 1,
false;
myList.Addnew JQueryFeature"2", "选择符", 1,
false;
myList.Addnew JQueryFeature"3", "基本选择符",
2, true;
myList.Addnew JQueryFeature"4", "内容选择符",
2, true;
myList.Addnew JQueryFeature"5", "属性选择符",
2, true;
myList.Addnew JQueryFeature"6", "筛选", 1,
false;
myList.Addnew JQueryFeature"7", "过滤", 2,
true;
myList.Addnew JQueryFeature"8", "查找", 2,
true;
myList.Addnew JQueryFeature"9", "事件", 1,
false;
myList.Addnew JQueryFeature"10", "页面载入",
2, true;
myList.Addnew JQueryFeature"11", "事件处理",
2, true;
myList.Addnew JQueryFeature"12", "事件委托",
2, true;
ddlBox.DataTextField = "Name";
ddlBox.DataValueField = "Id";
ddlBox.DataSimulateTreeLevelField = "Level";
ddlBox.DataEnableSelectField = "EnableSelect";
ddlBox.DataSource = myList;
ddlBox.DataBind;
ddlBox.SelectedValue = "3";
}
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
