|
設(shè)計(jì)分頁與空白樣板
樣板本身是一塊在網(wǎng)頁執(zhí)行期間會動(dòng)態(tài)顯示的HTML區(qū)域，在這個(gè)區(qū)域里除了可以配置一般的網(wǎng)頁元素，最重要的是，它允許開發(fā)人員為其中的控件設(shè)置特殊的指令或是進(jìn)行數(shù)據(jù)綁定，以達(dá)到某些需要經(jīng)過編寫程序才能實(shí)現(xiàn)的功能。這里從比較單純的GridView樣板談起，將一個(gè)GridView控件拖曳到網(wǎng)頁上的時(shí)候，如下圖所示，單擊其中的智能型標(biāo)簽將其展開：
再單擊其中的"編輯樣板"項(xiàng)目，切換到"樣板編輯模式"，如下圖所示，其中出現(xiàn)了可用的樣板列表，單擊"顯示"列表箭頭按鈕，出現(xiàn)可用的樣板清單。在默認(rèn)的情形下，界面上出現(xiàn)的是EmptyDataTemplate。如圖所示，其中的空白區(qū)域可以讓網(wǎng)頁開發(fā)人員自行設(shè)計(jì)內(nèi)容，而這個(gè)內(nèi)容在GridView沒有任何數(shù)據(jù)出現(xiàn)的時(shí)候顯示在網(wǎng)頁中，讀者可以自行嘗試。完成設(shè)計(jì)之后，單擊"結(jié)束編輯"即可回到原來的設(shè)計(jì)界面，如果你嘗試執(zhí)行網(wǎng)頁，而其綁定的數(shù)據(jù)源完全沒有任何一筆數(shù)據(jù)的話，便會呈現(xiàn)此內(nèi)容。
以前面的示例空白樣板為例，其中輸入了找不到數(shù)據(jù)的內(nèi)容，并且將其背景設(shè)為淺藍(lán)色，它的內(nèi)容顯示如下。
現(xiàn)在我們來看看分頁樣板，在菜單中單擊PagerTemplate，切換到PagerTemplate樣板的編輯界面，如下圖所示，其中空白區(qū)域用來設(shè)計(jì)自定義的GridView的分頁功能列。
設(shè)計(jì)PagerTemplate之前，必須先啟用GridView的分頁功能，在智能型標(biāo)簽的工作面板中，勾選"啟用分頁"復(fù)選框即可，如下圖所示：
一旦打開了分頁的功能，在默認(rèn)的情形下，GridView以數(shù)字作為頁碼索引顯示在GridView底部。開發(fā)人員可以通過修改分頁樣板調(diào)整此默認(rèn)外觀，例如以按鈕替代索引碼，打開PagerTemplate編輯界面，在其中配置4個(gè)按鈕，如下圖所示：
這4個(gè)按鈕，分別提供"第一頁"、"前一頁"、"后一頁"和"最后頁"的功能，現(xiàn)在將這些按鈕與相關(guān)的功能鏈接起來，以【|<】按鈕為例進(jìn)行說明。切換到屬性設(shè)置窗口，如下圖所示，將CommandName屬性設(shè)置為Page，而CommandArgument屬性設(shè)置為First。
CommandName的Page代表這個(gè)按鈕被單擊的時(shí)候，要執(zhí)行分頁導(dǎo)航的功能，而CommandArgument表示要顯示的分頁，這里設(shè)置為First，表示要跳到第一頁。下表列舉每一個(gè)分頁指令參數(shù)值的意義。
|
CommandArgument 值 |
說 明 |
|
Next |
導(dǎo)航至下一頁 |
|
Prev |
導(dǎo)航至上一頁 |
|
First |
導(dǎo)航至第一頁 |
|
Last |
導(dǎo)航至最后一頁 |
|
整數(shù)值 |
導(dǎo)航至指定的頁碼 |
其他幾個(gè)按鈕依據(jù)上表中的CommandArgument 值設(shè)置即可，在瀏覽器中執(zhí)行的結(jié)果如下圖所示：
如上圖所示，由于我們設(shè)置了PagerTemplate，在其中配置了4個(gè)分頁按鈕，因此這些按鈕在網(wǎng)頁的下方取代了原來的數(shù)字導(dǎo)航鏈接。
除了指定"Next"、"Prev"等特定的導(dǎo)航分頁外，我們還可以通過指定整數(shù)值讓網(wǎng)頁能夠?qū)Ш降侥硞€(gè)特定的分頁。有兩種方法，直接將鏈接控件的CommandArgument設(shè)為指定分頁的頁數(shù)，或是在程序中設(shè)置GridView的分頁索引值PageIndex。前者的方法與4種特定的導(dǎo)航分頁相同，這里就不再說明。我們來看看如何實(shí)現(xiàn)后者的方法。
指定分頁索引值的語法如下，當(dāng)這一行程序代碼執(zhí)行的時(shí)候，GridView會跳到索引值所指定的分頁。
GridViewControl.PageIndex = indexNumber ; | 上述程序代碼非常簡單，麻煩的地方在于如何取得indexNumber，通常我們會提供一個(gè)讓用戶指定頁數(shù)索引的控件，然后通過此控件取得用戶指定的頁次。例如，在上述示例的分頁樣板中插入下面的控件，其中的文本框讓用戶輸入分頁的索引值，當(dāng)用戶單擊按鈕【GO】的時(shí)候，GridView會顯示指定的分頁內(nèi)容，如下圖所示。
無論如何，我們必須取得用戶輸入文本框中的數(shù)字，將其指定給GridView控件的PageIndex索引，而這個(gè)文本框位于PagerTemplate當(dāng)中，因此我們沒有辦法直接取得此文本框的字段，而是必須通過GridViewRow間接取得。切換到網(wǎng)頁的原始文件，內(nèi)容如下：
<PagerTemplate>
<asp:Button … />
… …
<asp:TextBox ID="pageNumber" runat="
server" Width="30px"></asp:TextBox>
<asp:Button ID="btnGo" runat="server"
Text="GO " OnClick="btnGo_Click" />
</PagerTemplate>if
| 我們在分頁樣板的設(shè)計(jì)區(qū)域中所放入的控件均位于<PagerTemplate>標(biāo)簽中，因此首先必須取得此標(biāo)簽的內(nèi)容參照，才能進(jìn)一步取得其中的文本框值?，F(xiàn)在切換到上述網(wǎng)頁的后置程序代碼文件中，在按鈕【GO】的Click事件處理程序中，輸入下面的程序代碼：
protected void btnGo_Click(object sender, EventArgs e)
{
GridViewRow pagerRow = GridViewPage.BottomPagerRow;
TextBox theindex= (TextBox)pagerRow.Cells[0].FindControl("pageNumber"); if (theindex.Text.Length > 0)
{
GridViewPage.PageIndex = int.Parse(theindex.Text) - 1;
}
} | 其中通過BottomPagerRow的屬性，取得分頁樣板的參照，再通過FindControl進(jìn)一步取得名稱為pageNumber的控件，也就是頁面上的文本框，最后再將其中的值指定給pageIndex屬性。由于分頁索引以0為起始值，因此還要將其減1?，F(xiàn)在在瀏覽器中執(zhí)行網(wǎng)頁，出現(xiàn)以下的頁面，其中多了一個(gè)分頁索引欄，輸入想要瀏覽的頁次索引，單擊【GO】按鈕，即可鏈接到指定的頁面中，如下圖所示。
除了這兩種默認(rèn)的樣板，GridView還有其他幾個(gè)可用的樣板，例如ItemTemplate、AlternatingItemTemplate和EditItemTemplate等。這些樣板以字段為對象，必須通過樣板字段進(jìn)行設(shè)置，由于它們比較特殊，我們在后面再進(jìn)行說明。至于DetailView 的樣板設(shè)計(jì)，它的原理與GridView相同，讀者可以自行嘗試打開智能型標(biāo)簽，切換各種面板進(jìn)行設(shè)置，查看其效果。
|
