| ASP.NET的出現，使網(wǎng)絡(luò )程序員們設計程序的時(shí)候完全找到了“設計程序”的感覺(jué)，當然，更多的，他們感覺(jué)到了ASP.NET的得心應手。但是，沒(méi)有想偷懶就沒(méi)有進(jìn)步，如果你僅僅依靠ASP.NET自己的強大功能而不想其他手段，那你很快就會(huì )發(fā)現別人設計程序比你會(huì )快很多而且輕輕松松?，F在，我們來(lái)學(xué)習幾招偷懶的手段，讓別人跟在你后面敬佩吧。 |
| 使用過(guò)ASP的朋友一定都記得，ASP的很多功能需要一些第三方的組件實(shí)現，比如文件上傳功能的實(shí)現就往往使用ASPCNUP組件實(shí)現。使用這些組件，不但可以擴展ASP程序的功能，而且，大大提高程序開(kāi)發(fā)速度。我們這里介紹的偷懶手段，也就是介紹幾款與我們平時(shí)設計密切相關(guān)的組件。 |
| 一、超級數據表格：SuperDataGrid |
| ASP.NET自帶的DatGrid功能強大，定制也很方便，但是，因為它不是專(zhuān)門(mén)為數據庫應用設計的。所以，在連接數據庫的時(shí)候，我們不得不首先連接數據庫，然后綁定數據。而SuperDataGrid是專(zhuān)門(mén)為數據庫設計的，所以，那些繁瑣的連接數據庫我們也就沒(méi)有必要去寫(xiě)了。需要 |
| SuperDataGrid將DataGrid的一些屬性簡(jiǎn)單化，使用這個(gè)控件，我們可以方便的實(shí)現數據庫數據的顯示、排序、修改數據，這些功能的實(shí)現，只要簡(jiǎn)單幾行代碼就可以。我們現在來(lái)看它的使用。 |
| 一）顯示數據表 |
| 以下代碼演示怎樣使用SuperDataGrid來(lái)簡(jiǎn)單的顯示數據表中的所有數據： |
| <%@ 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 |
| 現在，我們來(lái)簡(jiǎn)單分析以上代碼。第一行使調用SuperDataGrid控件，我們在以后的舉例中都將使用到。第二行，和標準的DataGrid使用差不多，我們看看SuperDataGrid的一些屬性： |
| ConnectionString：因為是連接數據庫，當然少不了數據庫連接語(yǔ)句。這個(gè)參數就是連接數據的語(yǔ)句； |
| TableName：要顯示具體的表，我們就在這里定義。 |
| 看到這里，我們已經(jīng)感覺(jué)到了“簡(jiǎn)單”，但是，在實(shí)際的應用中，像這種直接顯示一個(gè)表的情況是很少的。所以，我們需要其他更多的功能。最直接的，我們需要Select語(yǔ)句的返回結果。 |
| <%@ 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語(yǔ)句的結果。在這里，我們見(jiàn)到一個(gè)新的屬性： |
| CommandText：和Command一樣，就是Select語(yǔ)句； |
| 二）數據排序 |
| 在DataGrid中，數據排序雖然簡(jiǎn)單，但是代碼還是不少。我們現在來(lái)看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 |
| 仔細看以上代碼，其實(shí)就是設置了一個(gè)EnableSortinga屬性為真。也就是打開(kāi)排序功能。需要仔細注意的一點(diǎn)，要將SuperDataGrid包括在Form中。 |
| 三）數據分頁(yè) |
| 在A(yíng)SP中，很多朋友會(huì )為分頁(yè)煩惱，現在，我們看看SuperDataGrid中怎樣分頁(yè)： |
| <%@ 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 |
| 我們來(lái)看看SuperDataGrid的幾個(gè)新屬性： |
| EnablePaging：首先，我們當然要打開(kāi)數據分頁(yè)； |
| PageSize：和DataGrid一樣，每頁(yè)數據顯示的條數； |
| PagerStyle-Mode：和DataGrid一樣，頁(yè)碼顯示方式； |
| 四）數據編輯 |
| 我們知道，在DataGrid中，我們可以在直接編輯數據，但是，一般我們很少使用這樣功能，因為這樣編輯數據不是很方便也不是很實(shí)用，代碼編寫(xiě)也比較多?，F在，SuperDataGrid也提供這個(gè)功能，當然，我們不需要寫(xiě)那么多代碼，只需要簡(jiǎn)單的設置就可以，其他，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屬性就可以了。是不是特別簡(jiǎn)單？當然，我們仍然要將SuperDataGrid放在Form中。 |
| 五）緩存 |
| ASP.NET的緩存功能我們已經(jīng)知道很強大，但是，具體到SuperDataGrid，你會(huì )發(fā)現它更加方便。使用SuperDataGrid的時(shí)候，會(huì )自動(dòng)緩存已經(jīng)顯示過(guò)的數據來(lái)提高程序效率。設置緩存功能可以使用CacheScope屬性，我們可以設置緩存類(lèi)型為Application,，Session和 None。 |
| SuperDataGrid默認緩存類(lèi)型為Application，也就是所有用戶(hù)共用緩存；如果采用Session，緩存只針對特殊的用戶(hù)；如果設置為None，那就是不要緩存功能。 |
| 默認的，緩存會(huì )保持30分鐘，當然，我們可以使用CacheDuration屬性設置緩存時(shí)間，單位為分鐘。 |
| 二、超級表單：Superexpert DataForm |
| 剛才我們看到SuperDataGrid已經(jīng)具有數據修改功能，但是，由于數據瀏覽和修改同時(shí)進(jìn)行，實(shí)際上我們很少使用那種方式，更多的，我們還說(shuō)采用單個(gè)記錄修改。 |
| 以往我們在使用表單修改或者增加數據庫數據的時(shí)候，需要作的工作很多，比如設置數據格式等，如果數據比較多，那更加繁瑣?，F在，使用Superexpert DataForm，我們可以簡(jiǎn)單的實(shí)現這些功能。 |
| Superexpert DataForm可以自動(dòng)保存或者修改數據庫數據，還可以使用它自動(dòng)從數據庫生成表單（實(shí)際是瀏覽數據），我們甚至可以自定義樣式來(lái)自動(dòng)修改、更新數據庫表。 |
| 一）從數據庫自動(dòng)生成表單 |
| 假設我們使用以下SQL語(yǔ)句生成一個(gè)叫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 |
| ) |
| 這個(gè)數據表有Customer_ID、Customer、 Age、Birthdate和Comments五個(gè)字段。我們可以使用Superexpert DataForm自動(dòng)生成一個(gè)表單，使用這個(gè)表單，我們可以直接向該數據表增加數據。 |
| <%@ 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，我們必須了解那些東西是可以自動(dòng)生成的： |
| 1、表單中的TextBox寬度是根據數據表數據寬度自動(dòng)生成的； |
| 2、填入表單中數據的驗證是自動(dòng)生成的。如果數據表要求數據不為Null，那么提交表單的時(shí)候就要求輸入；如果數據為Int，要求填入Integer；如果數據為DateTime，要求填入DateTime數據。 |
| 3、點(diǎn)擊提交按鈕以后，數據自動(dòng)保存到數據表。 |
| 所有我們要做的只是提供數據表名稱(chēng)和數據庫連接字符串。 |
| 二）設置DataForm模式 |
| DataForm有以下幾種模式： |
| 1、AddRecord：增加數據模式； |
| 2、UpdateRecord：修改單條數據模式； |
| 3、UpdateTable：成批修改數據模式； |
| 4、Custom：提交數據時(shí)可以自己設置邏輯驗證； |
| 為了修改一條已經(jīng)存在的數據，我們必須設置DataForm模式為UpdateRecord。然后，我們必須確定修改那一條數據，我們通過(guò)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。在設置為修改整個(gè)表以后，會(huì )在數據表單上方生成一個(gè)導航條，通過(guò)這個(gè)導航條，我們可以瀏覽數據表中的所有數據。 |
| <%@ 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，我們就可以設置提交表單以后的動(dòng)作。比如，以下代碼實(shí)現提交表單以后自動(dòng)轉到ThankYou.aspx頁(yè)面。 |
| <%@ 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：定義數據表單的線(xiàn)格式，包括：None、Both、Horizontal和Vertical。 |
| Height：數據表單控件高度； |
| Width：數據表單控件寬度； |
| BoderStyle：數據表單邊框格式； |
| BorderWidth：數據表單邊框寬度； |
| BorderColor：數據表單邊框顏色； |
| CellPadding：數據表單控件大??； |
| CellSpacing：數據表單控件間間距； |
| 我們現在看一個(gè)舉例： |
| <%@ 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 |
| 沒(méi)一個(gè)控件都擴展了標準控件的功能。這些控件都有兩個(gè)屬性：DataField和DataType。DataField讓控件和數據庫的具體字段聯(lián)系起來(lái)，DataType定義輸入數據的類(lèi)型。以下是一個(gè)增加數據的舉例： |
| <%@ 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可以將文字生成圖象，只是，對我大部分用戶(hù)而言，這些功能藏的有點(diǎn)深。Superexpert ImageText讓我們可以很簡(jiǎn)單的實(shí)現將文字生成圖象。我們可以使用安裝在服務(wù)器上的任何一款字體來(lái)生成圖象，也可以使用我們下面將要提到的所有圖象特效來(lái)生成圖象。 |
| 我們可以利用Superexpert ImageText來(lái)快速的生成圖象，它的好處是我們可以完全控制文字的樣式。 |
| 一）自動(dòng)生成圖象 |
| 要使用Superexpert ImageText，我們只要簡(jiǎn)單的提供一個(gè)唯一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 |
| 需要了解的是，無(wú)論采用什么字體，只要服務(wù)器上安裝了所使用的字體就行，只要已經(jīng)轉化為圖象，所有瀏覽器都可以正確的顯示。 |
| 二）陰影特效 |
| 通過(guò)設置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 |
| 針對陰影效果，我們還可以設置以下屬性來(lái)增強： |
| ● DropShadow-xOffSet：水平方向偏移 |
| ● DropShadow-yOffSet ：垂直方向偏移 |
| ● DropShadow-Alpha ：設置陰影透明度 |
| ● DropShadow-Color ：設置陰影顏色 |
| 三）旋轉文字效果 |
| 通過(guò)設置文字的RotateFlip屬性，我們可以將文字進(jì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 |
| 四）控制圖象背景 |
| 我們可以設置背景為漸進(jìn)顏色、圖片或者特殊圖案，以下是一個(gè)漸進(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屬性來(lái)設置特殊背景圖案和圖案顏色，以下舉例就是一個(gè)波紋圖案背景的圖象： |
| <%@ 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 |
| 五）多行文字 |
| 通過(guò)設置圖象的寬度，可以實(shí)現多行文字的效果： |
| <%@ 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 |
| 六）定稿圖象 |
| 如果不想每次頁(yè)面變動(dòng)都重新生成圖象，可以設置Final屬性為T(mén)rue。 |
| 四、總結 |
| 以上介紹的一些控件，我們在平時(shí)的設計中用的可能都比較多，非常使用。在我我們潛心研究ASP.NET的同時(shí)，我們可以學(xué)習利用這些工具來(lái)提高我們的工作效率和工作效果。 |
聯(lián)系客服
