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