廣東省南海市公安局計算機(jī)安全監(jiān)察股 喻凱  

ASP.NET的出現(xiàn)，使網(wǎng)絡(luò)程序員們設(shè)計程序的時候完全找到了“設(shè)計程序”的感覺，當(dāng)然，更多的，他們感覺到了ASP.NET的得心應(yīng)手。但是，沒有想偷懶就沒有進(jìn)步，如果你僅僅依靠ASP.NET自己的強(qiáng)大功能而不想其他手段，那你很快就會發(fā)現(xiàn)別人設(shè)計程序比你會快很多而且輕輕松松。現(xiàn)在，我們來學(xué)習(xí)幾招偷懶的手段，讓別人跟在你后面敬佩吧。
使用過ASP的朋友一定都記得，ASP的很多功能需要一些第三方的組件實現(xiàn)，比如文件上傳功能的實現(xiàn)就往往使用ASPCNUP組件實現(xiàn)。使用這些組件，不但可以擴(kuò)展ASP程序的功能，而且，大大提高程序開發(fā)速度。我們這里介紹的偷懶手段，也就是介紹幾款與我們平時設(shè)計密切相關(guān)的組件。
一、超級數(shù)據(jù)表格：SuperDataGrid
ASP.NET自帶的DatGrid功能強(qiáng)大，定制也很方便，但是，因為它不是專門為數(shù)據(jù)庫應(yīng)用設(shè)計的。所以，在連接數(shù)據(jù)庫的時候，我們不得不首先連接數(shù)據(jù)庫，然后綁定數(shù)據(jù)。而SuperDataGrid是專門為數(shù)據(jù)庫設(shè)計的，所以，那些繁瑣的連接數(shù)據(jù)庫我們也就沒有必要去寫了。需要
SuperDataGrid將DataGrid的一些屬性簡單化，使用這個控件，我們可以方便的實現(xiàn)數(shù)據(jù)庫數(shù)據(jù)的顯示、排序、修改數(shù)據(jù)，這些功能的實現(xiàn)，只要簡單幾行代碼就可以。我們現(xiàn)在來看它的使用。
一）顯示數(shù)據(jù)表
以下代碼演示怎樣使用SuperDataGrid來簡單的顯示數(shù)據(jù)表中的所有數(shù)據(jù)：
<%@ 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
現(xiàn)在，我們來簡單分析以上代碼。第一行使調(diào)用SuperDataGrid控件，我們在以后的舉例中都將使用到。第二行，和標(biāo)準(zhǔn)的DataGrid使用差不多，我們看看SuperDataGrid的一些屬性：
ConnectionString：因為是連接數(shù)據(jù)庫，當(dāng)然少不了數(shù)據(jù)庫連接語句。這個參數(shù)就是連接數(shù)據(jù)的語句；
TableName：要顯示具體的表，我們就在這里定義。
看到這里，我們已經(jīng)感覺到了“簡單”，但是，在實際的應(yīng)用中，像這種直接顯示一個表的情況是很少的。所以，我們需要其他更多的功能。最直接的，我們需要Select語句的返回結(jié)果。
<%@ 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語句的結(jié)果。在這里，我們見到一個新的屬性：
CommandText：和Command一樣，就是Select語句；
二）數(shù)據(jù)排序
在DataGrid中，數(shù)據(jù)排序雖然簡單，但是代碼還是不少。我們現(xiàn)在來看SuperDataGrid中怎樣給數(shù)據(jù)排序：
<%@ 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
仔細(xì)看以上代碼，其實就是設(shè)置了一個EnableSortinga屬性為真。也就是打開排序功能。需要仔細(xì)注意的一點，要將SuperDataGrid包括在Form中。
三）數(shù)據(jù)分頁
在ASP中，很多朋友會為分頁煩惱，現(xiàn)在，我們看看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：首先，我們當(dāng)然要打開數(shù)據(jù)分頁；
PageSize：和DataGrid一樣，每頁數(shù)據(jù)顯示的條數(shù)；
PagerStyle-Mode：和DataGrid一樣，頁碼顯示方式；
四）數(shù)據(jù)編輯
我們知道，在DataGrid中，我們可以在直接編輯數(shù)據(jù)，但是，一般我們很少使用這樣功能，因為這樣編輯數(shù)據(jù)不是很方便也不是很實用，代碼編寫也比較多。現(xiàn)在，SuperDataGrid也提供這個功能，當(dāng)然，我們不需要寫那么多代碼，只需要簡單的設(shè)置就可以，其他，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
看以上代碼，如果需要編輯數(shù)據(jù)，只要加EnableEditing屬性就可以了。是不是特別簡單？當(dāng)然，我們?nèi)匀灰獙�SuperDataGrid放在Form中。
五）緩存
ASP.NET的緩存功能我們已經(jīng)知道很強(qiáng)大，但是，具體到SuperDataGrid，你會發(fā)現(xiàn)它更加方便。使用SuperDataGrid的時候，會自動緩存已經(jīng)顯示過的數(shù)據(jù)來提高程序效率。設(shè)置緩存功能可以使用CacheScope屬性，我們可以設(shè)置緩存類型為Application,，Session和 None。
SuperDataGrid默認(rèn)緩存類型為Application，也就是所有用戶共用緩存；如果采用Session，緩存只針對特殊的用戶；如果設(shè)置為None，那就是不要緩存功能。
默認(rèn)的，緩存會保持30分鐘，當(dāng)然，我們可以使用CacheDuration屬性設(shè)置緩存時間，單位為分鐘。

二、超級表單：Superexpert DataForm
剛才我們看到SuperDataGrid已經(jīng)具有數(shù)據(jù)修改功能，但是，由于數(shù)據(jù)瀏覽和修改同時進(jìn)行，實際上我們很少使用那種方式，更多的，我們還說采用單個記錄修改。
以往我們在使用表單修改或者增加數(shù)據(jù)庫數(shù)據(jù)的時候，需要作的工作很多，比如設(shè)置數(shù)據(jù)格式等，如果數(shù)據(jù)比較多，那更加繁瑣�，F(xiàn)在，使用Superexpert DataForm，我們可以簡單的實現(xiàn)這些功能。
Superexpert DataForm可以自動保存或者修改數(shù)據(jù)庫數(shù)據(jù)，還可以使用它自動從數(shù)據(jù)庫生成表單（實際是瀏覽數(shù)據(jù)），我們甚至可以自定義樣式來自動修改、更新數(shù)據(jù)庫表。
一）從數(shù)據(jù)庫自動生成表單
假設(shè)我們使用以下SQL語句生成一個叫CustomerSurveys的數(shù)據(jù)表：
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
)
這個數(shù)據(jù)表有Customer_ID、Customer、 Age、Birthdate和Comments五個字段。我們可以使用Superexpert DataForm自動生成一個表單，使用這個表單，我們可以直接向該數(shù)據(jù)表增加數(shù)據(jù)。
<%@ 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寬度是根據(jù)數(shù)據(jù)表數(shù)據(jù)寬度自動生成的；
2、填入表單中數(shù)據(jù)的驗證是自動生成的。如果數(shù)據(jù)表要求數(shù)據(jù)不為Null，那么提交表單的時候就要求輸入；如果數(shù)據(jù)為Int，要求填入Integer；如果數(shù)據(jù)為DateTime，要求填入DateTime數(shù)據(jù)。
3、點擊提交按鈕以后，數(shù)據(jù)自動保存到數(shù)據(jù)表。
所有我們要做的只是提供數(shù)據(jù)表名稱和數(shù)據(jù)庫連接字符串。
二）設(shè)置DataForm模式
DataForm有以下幾種模式：
1、AddRecord：增加數(shù)據(jù)模式；
2、UpdateRecord：修改單條數(shù)據(jù)模式；
3、UpdateTable：成批修改數(shù)據(jù)模式；
4、Custom：提交數(shù)據(jù)時可以自己設(shè)置邏輯驗證；
為了修改一條已經(jīng)存在的數(shù)據(jù)，我們必須設(shè)置DataForm模式為UpdateRecord。然后，我們必須確定修改那一條數(shù)據(jù)，我們通過DataKeyField和DataKeyValue唯一確定一條數(shù)據(jù)，DataKeyField是數(shù)據(jù)表主鍵；DataKeyValue是一條數(shù)據(jù)的主鍵的值。
以下代碼修改數(shù)據(jù)表中第三條記錄：
<%@ 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
以上代碼設(shè)置Mode為UpdateRecord，設(shè)置DataKeyField為Customer_ID，設(shè)置DataKeyValue為3。
如果我們需要修改數(shù)據(jù)表中的所有數(shù)據(jù)，可以將DataForm模式設(shè)置為UpdateTable。在設(shè)置為修改整個表以后，會在數(shù)據(jù)表單上方生成一個導(dǎo)航條，通過這個導(dǎo)航條，我們可以瀏覽數(shù)據(jù)表中的所有數(shù)據(jù)。
<%@ 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
如果我們將模式設(shè)置為Custom，我們就可以設(shè)置提交表單以后的動作。比如，以下代碼實現(xiàn)提交表單以后自動轉(zhuǎn)到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
三）設(shè)置DataForm樣式
DataForm有四種樣式我們可以修改：
1、HeaderStyle：定義數(shù)據(jù)表單的Header樣式；
2、LabelStyle：定義數(shù)據(jù)表單的Label樣式；
3、FieldStyle：定義數(shù)據(jù)表單的Field樣式；
4、FooterStyle：定義數(shù)據(jù)表單的Footer樣式；
DataForm還支持以下屬性設(shè)置：
GridLines：定義數(shù)據(jù)表單的線格式，包括：None、Both、Horizontal和Vertical。
Height：數(shù)據(jù)表單控件高度；
Width：數(shù)據(jù)表單控件寬度；
BoderStyle：數(shù)據(jù)表單邊框格式；
BorderWidth：數(shù)據(jù)表單邊框?qū)挾龋?
BorderColor：數(shù)據(jù)表單邊框顏色；
CellPadding：數(shù)據(jù)表單控件大小；
CellSpacing：數(shù)據(jù)表單控件間間距；
我們現(xiàn)在看一個舉例：
<%@ 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
我們也可以自己增加控件設(shè)計數(shù)據(jù)表單布局，可以增加的控件如下：
● DataTextBox  
● DataDropDownList  
● DataRadioButton  
● DataCheckbox  
● DataListBox  
● DataRadioButtonList  
● DataLabel
沒一個控件都擴(kuò)展了標(biāo)準(zhǔn)控件的功能。這些控件都有兩個屬性：DataField和DataType。DataField讓控件和數(shù)據(jù)庫的具體字段聯(lián)系起來，DataType定義輸入數(shù)據(jù)的類型。以下是一個增加數(shù)據(jù)的舉例：
<%@ 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讓我們可以很簡單的實現(xiàn)將文字生成圖象。我們可以使用安裝在服務(wù)器上的任何一款字體來生成圖象，也可以使用我們下面將要提到的所有圖象特效來生成圖象。
我們可以利用Superexpert ImageText來快速的生成圖象，它的好處是我們可以完全控制文字的樣式。
一）自動生成圖象
要使用Superexpert ImageText，我們只要簡單的提供一個唯一ID和需要轉(zhuǎn)化的文字。下面的舉例將生成“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
為了取得更好的效果，我們可以為文字設(shè)置字體和顏色，也可以設(shè)置圖象背景，下面的舉例就是這樣：
<%@ 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
需要了解的是，無論采用什么字體，只要服務(wù)器上安裝了所使用的字體就行，只要已經(jīng)轉(zhuǎn)化為圖象，所有瀏覽器都可以正確的顯示。
二）陰影特效
通過設(shè)置DropShadow屬性，我們可以將文字轉(zhuǎn)化為帶有陰影效果的圖象：
<%@ 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
針對陰影效果，我們還可以設(shè)置以下屬性來增強(qiáng)：
● DropShadow-xOffSet：水平方向偏移
● DropShadow-yOffSet ：垂直方向偏移
● DropShadow-Alpha ：設(shè)置陰影透明度
● DropShadow-Color ：設(shè)置陰影顏色
三）旋轉(zhuǎn)文字效果
通過設(shè)置文字的RotateFlip屬性，我們可以將文字進(jìn)行旋轉(zhuǎn)：
<%@ 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
四）控制圖象背景
我們可以設(shè)置背景為漸進(jìn)顏色、圖片或者特殊圖案，以下是一個漸進(jìn)顏色背景的舉例：
<%@ 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屬性來設(shè)置特殊背景圖案和圖案顏色，以下舉例就是一個波紋圖案背景的圖象：
<%@ 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
五）多行文字
通過設(shè)置圖象的寬度，可以實現(xiàn)多行文字的效果：
<%@ 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
六）定稿圖象
如果不想每次頁面變動都重新生成圖象，可以設(shè)置Final屬性為True。

四、總結(jié)
以上介紹的一些控件，我們在平時的設(shè)計中用的可能都比較多，非常使用。在我我們潛心研究ASP.NET的同時，我們可以學(xué)習(xí)利用這些工具來提高我們的工作效率和工作效果。