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