即刻完成你的ASP.NET程序
| ASP.NET的出现，使网络程序员们设计程序的时候完全找到了“设计程序”的感觉，当然，更多的，他们感觉到了ASP.NET的得心应手。但是，没有想偷懒就没有进步，如果你仅仅依靠ASP.NET自己的强大功能而不想其他手段，那你很快就会发现别人设计程序比你会快很多而且轻轻松松。现在，我们来学习几招偷懒的手段，让别人跟在你后面敬佩吧。 |
| 使用过ASP的朋友一定都记得，ASP的很多功能需要一些第三方的组件实现，比如文件上传功能的实现就往往使用ASPCNUP组件实现。使用这些组件，不但可以扩展ASP程序的功能，而且，大大提高程序开发速度。我们这里介绍的偷懒手段，也就是介绍几款与我们平时设计密切相关的组件。 |
| 一、超级数据表格：SuperDataGrid |
| ASP.NET自带的DatGrid功能强大，定制也很方便，但是，因为它不是专门为数据库应用设计的。所以，在连接数据库的时候，我们不得不首先连接数据库，然后绑定数据。而SuperDataGrid是专门为数据库设计的，所以，那些繁琐的连接数据库我们也就没有必要去写了。需要 |
| SuperDataGrid将DataGrid的一些属性简单化，使用这个控件，我们可以方便的实现数据库数据的显示、排序、修改数据，这些功能的实现，只要简单几行代码就可以。我们现在来看它的使用。 |
| 一）显示数据表 |
| 以下代码演示怎样使用SuperDataGrid来简单的显示数据表中的所有数据： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.SuperDataGrid" %> |
| <Super:SuperDataGrid |
| ConnectionString="Server=localhost;UID=demo;pwd=secret;database=pubs" |
| TableName="Titles" |
| Runat="Server" /> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/superdatagrid/samples/sample1.aspx |
| 现在，我们来简单分析以上代码。第一行使调用SuperDataGrid控件，我们在以后的举例中都将使用到。第二行，和标准的DataGrid使用差不多，我们看看SuperDataGrid的一些属性： |
| ConnectionString：因为是连接数据库，当然少不了数据库连接语句。这个参数就是连接数据的语句； |
| TableName：要显示具体的表，我们就在这里定义。 |
| 看到这里，我们已经感觉到了“简单”，但是，在实际的应用中，像这种直接显示一个表的情况是很少的。所以，我们需要其他更多的功能。最直接的，我们需要Select语句的返回结果。 |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.SuperDataGrid" %> |
| <Super:SuperDataGrid |
| ConnectionString="Server=localhost;UID=sa;pwd=secret;database=Northwind" |
| CommandText="Select ProductName, CategoryName |
| From Products, Categories Where Products.CategoryID=Categories.CategoryID" |
| Runat="Server" /> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/superdatagrid/samples/sample2.aspx |
| 以上代码返回Select语句的结果。在这里，我们见到一个新的属性： |
| CommandText：和Command一样，就是Select语句； |
| 二）数据排序 |
| 在DataGrid中，数据排序虽然简单，但是代码还是不少。我们现在来看SuperDataGrid中怎样给数据排序： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.SuperDataGrid" %> |
| <form runat="Server"> |
| <Super:SuperDataGrid |
| ConnectionString="Server=localhost;UID=sa;pwd=secret;database=Pubs" |
| TableName="Titles" |
| EnableSorting="True" |
| Runat="Server" /> |
| </form> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/superdatagrid/samples/sample3.aspx |
| 仔细看以上代码，其实就是设置了一个EnableSortinga属性为真。也就是打开排序功能。需要仔细注意的一点，要将SuperDataGrid包括在Form中。 |
| 三）数据分页 |
| 在ASP中，很多朋友会为分页烦恼，现在，我们看看SuperDataGrid中怎样分页： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.SuperDataGrid" %> |
| <form runat="Server"> |
| <Super:SuperDataGrid |
| ConnectionString="Server=localhost;UID=sa;pwd=secret;database=pubs" |
| TableName="Titles" |
| EnablePaging="True" |
| PageSize="3" |
| PagerStyle-Mode="NumericPages" |
| Runat="Server" /> |
| </form> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/superdatagrid/samples/sample4.aspx |
| 我们来看看SuperDataGrid的几个新属性： |
| EnablePaging：首先，我们当然要打开数据分页； |
| PageSize：和DataGrid一样，每页数据显示的条数； |
| PagerStyle-Mode：和DataGrid一样，页码显示方式； |
| 四）数据编辑 |
| 我们知道，在DataGrid中，我们可以在直接编辑数据，但是，一般我们很少使用这样功能，因为这样编辑数据不是很方便也不是很实用，代码编写也比较多。现在，SuperDataGrid也提供这个功能，当然，我们不需要写那么多代码，只需要简单的设置就可以，其他，SuperDataGrid全部帮我们弄好了。 |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.SuperDataGrid" %> |
| <form runat="Server"> |
| <Super:SuperDataGrid |
| ConnectionString="Server=localhost;UID=sa;pwd=secret;database=Northwind" |
| TableName="Products" |
| EnableEditing="True" |
| EnablePaging="True" |
| Runat="Server" /> |
| </form> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/superdatagrid/samples/sample5.aspx |
| 看以上代码，如果需要编辑数据，只要加EnableEditing属性就可以了。是不是特别简单？当然，我们仍然要将SuperDataGrid放在Form中。 |
| 五）缓存 |
| ASP.NET的缓存功能我们已经知道很强大，但是，具体到SuperDataGrid，你会发现它更加方便。使用SuperDataGrid的时候，会自动缓存已经显示过的数据来提高程序效率。设置缓存功能可以使用CacheScope属性，我们可以设置缓存类型为Application,，Session和 None。 |
| SuperDataGrid默认缓存类型为Application，也就是所有用户共用缓存；如果采用Session，缓存只针对特殊的用户；如果设置为None，那就是不要缓存功能。 |
| 默认的，缓存会保持30分钟，当然，我们可以使用CacheDuration属性设置缓存时间，单位为分钟。 |
| 二、超级表单：Superexpert DataForm |
| 刚才我们看到SuperDataGrid已经具有数据修改功能，但是，由于数据浏览和修改同时进行，实际上我们很少使用那种方式，更多的，我们还说采用单个记录修改。 |
| 以往我们在使用表单修改或者增加数据库数据的时候，需要作的工作很多，比如设置数据格式等，如果数据比较多，那更加繁琐。现在，使用Superexpert DataForm，我们可以简单的实现这些功能。 |
| Superexpert DataForm可以自动保存或者修改数据库数据，还可以使用它自动从数据库生成表单（实际是浏览数据），我们甚至可以自定义样式来自动修改、更新数据库表。 |
| 一）从数据库自动生成表单 |
| 假设我们使用以下SQL语句生成一个叫CustomerSurveys的数据表： |
| Create Table CustomerSurvey |
| ( |
| Customer_ID INT NOT NULL IDENTITY Primary Key, |
| Customer Varchar( 50 ) NOT NULL, |
| Age INT NOT NULL, |
| Birthdate DateTime NOT NULL, |
| Comments Text |
| ) |
| 这个数据表有Customer_ID、Customer、 Age、Birthdate和Comments五个字段。我们可以使用Superexpert DataForm自动生成一个表单，使用这个表单，我们可以直接向该数据表增加数据。 |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <html> |
| <head><title>SimpleDataForm.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| Mode="AddRecord" |
| runat="Server" /> |
| </body> |
| </html> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/dataform/samples/sample1.aspx |
| 为了更好的理解Superexpert DataForm，我们必须了解那些东西是可以自动生成的： |
| 1、表单中的TextBox宽度是根据数据表数据宽度自动生成的； |
| 2、填入表单中数据的验证是自动生成的。如果数据表要求数据不为Null，那么提交表单的时候就要求输入；如果数据为Int，要求填入Integer；如果数据为DateTime，要求填入DateTime数据。 |
| 3、点击提交按钮以后，数据自动保存到数据表。 |
| 所有我们要做的只是提供数据表名称和数据库连接字符串。 |
| 二）设置DataForm模式 |
| DataForm有以下几种模式： |
| 1、AddRecord：增加数据模式； |
| 2、UpdateRecord：修改单条数据模式； |
| 3、UpdateTable：成批修改数据模式； |
| 4、Custom：提交数据时可以自己设置逻辑验证； |
| 为了修改一条已经存在的数据，我们必须设置DataForm模式为UpdateRecord。然后，我们必须确定修改那一条数据，我们通过DataKeyField和DataKeyValue唯一确定一条数据，DataKeyField是数据表主键；DataKeyValue是一条数据的主键的值。 |
| 以下代码修改数据表中第三条记录： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <html> |
| <head><title>DataFormUpdateRecord.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| DataKeyField="Customer_ID" |
| DataKeyValue="3" |
| Mode="UpdateRecord" |
| runat="Server" /> |
| </body> |
| </html> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/dataform/samples/sample2.aspx |
| 以上代码设置Mode为UpdateRecord，设置DataKeyField为Customer_ID，设置DataKeyValue为3。 |
| 如果我们需要修改数据表中的所有数据，可以将DataForm模式设置为UpdateTable。在设置为修改整个表以后，会在数据表单上方生成一个导航条，通过这个导航条，我们可以浏览数据表中的所有数据。 |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <html> |
| <head><title>DataFormUpdateTable.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| DataKeyField="Customer_ID" |
| Mode="UpdateTable" |
| runat="Server" /> |
| </body> |
| </html> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/dataform/samples/sample3.aspx |
| 如果我们将模式设置为Custom，我们就可以设置提交表单以后的动作。比如，以下代码实现提交表单以后自动转到ThankYou.aspx页面。 |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <Script runat="Server"> |
| Sub Form_Submit( s As Object, e As EventArgs ) |
| myForm.Save() |
| Response.Redirect( "ThankYou.aspx" ) |
| End Sub |
| </Script> |
| <html> |
| <head><title>DataFormCustom.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| id="myForm" |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| Mode="Custom" |
| OnSubmit="Form_Submit" |
| runat="Server" /> |
| </body> |
| </html> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/dataform/samples/sample4.aspx |
| 三）设置DataForm样式 |
| DataForm有四种样式我们可以修改： |
| 1、HeaderStyle：定义数据表单的Header样式； |
| 2、LabelStyle：定义数据表单的Label样式； |
| 3、FieldStyle：定义数据表单的Field样式； |
| 4、FooterStyle：定义数据表单的Footer样式； |
| DataForm还支持以下属性设置： |
| GridLines：定义数据表单的线格式，包括：None、Both、Horizontal和Vertical。 |
| Height：数据表单控件高度； |
| Width：数据表单控件宽度； |
| BoderStyle：数据表单边框格式； |
| BorderWidth：数据表单边框宽度； |
| BorderColor：数据表单边框颜色； |
| CellPadding：数据表单控件大小； |
| CellSpacing：数据表单控件间间距； |
| 我们现在看一个举例： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <html> |
| <head><title>DataFormStyle.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| HeaderStyle-backColor="Salmon" |
| FieldStyle-backColor="yellow" |
| LabelStyle-Font-Name="Script" |
| LabelStyle-Font-Size="28pt" |
| FooterStyle-backColor="blue" |
| Cellpadding="10" |
| Cellspacing="0" |
| GridLines="Both" |
| BorderStyle="Dashed" |
| BorderColor="red" |
| BorerWidth="10px" |
| LabelStyle-BackColor="lightgreen" |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| runat="Server" /> |
| </body> |
| </html> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/dataform/samples/sample5.aspx |
| 四）自定义布局的DataForm |
| 我们也可以自己增加控件设计数据表单布局，可以增加的控件如下： |
| ● DataTextBox |
| ● DataDropDownList |
| ● DataRadioButton |
| ● DataCheckbox |
| ● DataListBox |
| ● DataRadioButtonList |
| ● DataLabel |
| 没一个控件都扩展了标准控件的功能。这些控件都有两个属性：DataField和DataType。DataField让控件和数据库的具体字段联系起来，DataType定义输入数据的类型。以下是一个增加数据的举例： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert.Data" |
| Assembly="Superexpert.DataForm" %> |
| <Script runat="Server"> |
| Sub Form_Submit( s As Object, e As EventArgs ) |
| myForm.Save() |
| Response.Redirect( "ThankYou.aspx" ) |
| End Sub |
| </Script> |
| <html> |
| <head><title>DataFormCustomLayout.aspx</title></head> |
| <body> |
| <super:SqlDataForm |
| id="myForm" |
| TableName="CustomerSurvey" |
| ConnectionString="Server=Localhost;UID=sa;PWD=secret;Database=Pubs" |
| runat="Server"> |
| Customer Name: |
| <br> |
| <super:DataTextBox |
| DataField="Customer" |
| Runat="Server" /> |
| <p> |
| Age: |
| <br> |
| <super:DataTextBox |
| DataField="Age" |
| Runat="Server" /> |
| <p> |
| Birthdate: |
| <br> |
| <super:DataTextBox |
| DataField="Birthdate" |
| Runat="Server" /> |
| <p> |
| <asp:Button |
| Text="Add New Customer!" |
| OnClick="Form_Submit" |
| Runat="Server" /> |
| <p> |
| </super:SqlDataForm> |
| </body> |
| </html> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/dataform/samples/sample6.aspx |
| 三、超级图像文字控件：Superexpert ImageText |
| 我们知道，ASP.NET可以将文字生成图象，只是，对我大部分用户而言，这些功能藏的有点深。Superexpert ImageText让我们可以很简单的实现将文字生成图象。我们可以使用安装在服务器上的任何一款字体来生成图象，也可以使用我们下面将要提到的所有图象特效来生成图象。 |
| 我们可以利用Superexpert ImageText来快速的生成图象，它的好处是我们可以完全控制文字的样式。 |
| 一）自动生成图象 |
| 要使用Superexpert ImageText，我们只要简单的提供一个唯一ID和需要转化的文字。下面的举例将生成“Hello World”： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlHello" |
| Text="Hello World!" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample1.aspx |
| 为了取得更好的效果，我们可以为文字设置字体和颜色，也可以设置图象背景，下面的举例就是这样： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlComic" |
| Text="Hello World!" |
| Font-Name="Comic Sans MS" |
| Font-Size="34" |
| ForeColor="DarkBlue" |
| Runat="Server"/> |
| <p> |
| <Super:ImageText |
| ID="ctrlImpact" |
| Text="Hello World!" |
| Font-Name="Impact" |
| Font-Size="24" |
| ForeColor="Red" |
| BackColor="Black" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample2.aspx |
| 需要了解的是，无论采用什么字体，只要服务器上安装了所使用的字体就行，只要已经转化为图象，所有浏览器都可以正确的显示。 |
| 二）阴影特效 |
| 通过设置DropShadow属性，我们可以将文字转化为带有阴影效果的图象： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlDrop" |
| Text="Hello World!" |
| Font-Name="Impact" |
| Font-Size="34" |
| DropShadow-Display="True" |
| DropShadow-xOffSet="3" |
| Runat="Server"/> |
| 具体效果如下： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample3.aspx |
| 针对阴影效果，我们还可以设置以下属性来增强： |
| ● DropShadow-xOffSet：水平方向偏移 |
| ● DropShadow-yOffSet ：垂直方向偏移 |
| ● DropShadow-Alpha ：设置阴影透明度 |
| ● DropShadow-Color ：设置阴影颜色 |
| 三）旋转文字效果 |
| 通过设置文字的RotateFlip属性，我们可以将文字进行旋转： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlHello" |
| Text="Hello World!" |
| Font-Size="24" |
| RotateFlip="Rotate90FlipNone" |
| Runat="Server"/> |
| <p> |
| <Super:ImageText |
| ID="ctrlHello2" |
| Text="Hello World!" |
| Font-Size="24" |
| RotateFlip="Rotate180FlipNone" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample4.aspx |
| 四）控制图象背景 |
| 我们可以设置背景为渐进颜色、图片或者特殊图案，以下是一个渐进颜色背景的举例： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlHello" |
| BackGround-Gradient="True" |
| CellPadding="4" |
| Text="Hello World!" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample5.aspx |
| 我们还可以使用BackGround-HatchStyle属性来设置特殊背景图案和图案颜色，以下举例就是一个波纹图案背景的图象： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlHello" |
| CellPadding="10" |
| BackGround-HatchStyle="Weave" |
| BackGround-StartColor="Green" |
| Text="Hello World!" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample6.aspx |
| 五）多行文字 |
| 通过设置图象的宽度，可以实现多行文字的效果： |
| <%@ Register TagPrefix="Super" Namespace="Superexpert" |
| Assembly="Superexpert.ImageText" %> |
| <Super:ImageText |
| ID="ctrlHello" |
| Text="This is a long paragraph that demonstrates how you can wrap text with the ImageText control" |
| CellPadding="20" |
| Width="200" |
| BackColor="Orange" |
| Runat="Server"/> |
| 具体效果请看： |
| http://www.superexpertcontrols.com/imagetextbeta2/samples/sample7.aspx |
| 六）定稿图象 |
| 如果不想每次页面变动都重新生成图象，可以设置Final属性为True。 |
| 四、总结 |
| 以上介绍的一些控件，我们在平时的设计中用的可能都比较多，非常使用。在我我们潜心研究ASP.NET的同时，我们可以学习利用这些工具来提高我们的工作效率和工作效果。 |
