擴充ASP.NET內建GridView控制項之一

來源:互聯網
上載者:User
asp.net|控制項

  本文Bilal Haidar詳細解釋如何擴充ASP.NET2.0內建的GridView控制項,同樣還將解釋了擴充後的GridView控制項所具有的新的重要特徵:基於行的操作功能表和GridViews行的過濾功能。

  引言

  本文將聚焦對ASP.NET2.0內建的GridView進行擴充的一系列新功能。其中本文介紹兩個主要特徵:基於行的操作功能表(Row_base ContextMenu)和基於過濾功能的GridView的行,在上周我曾經介紹了GridView控制項。

  在我們自訂的GridView控制項裡,提供了幾個具有“高效率”功能的擴充,不過,這些功能都不是GridView控制項內建的準系統,正如您即將看到的,我們需要要重構這些功能。 擴充現在的GridView控制項可以讓您更能夠控制項常規GridView所沒有的功能,另外,擴充該功能後,您以後就可以不斷重複的使用這些新特性。

  我們準備增加如下幾個特徵:

  1、行的單擊

  2、行的雙擊

  3、基於行的操作功能表

  4、頭元素的升序降序排列

  5、當頁面記錄樹木小於PageSize時,修正GridView的高度

  6、內建的過濾文字框

  7、內建的複選框

  除此以外,我們還將添加三個簡單按鈕,可以利用他們在用戶端添加一些簡單的確認函數

  ·確認按鈕(Confirm Button)

  ·圖片按鈕(Confirm Image Button)

  ·連結按鈕(Confirm Link Button)

  擴充的XGrid控制項需要從GridView控制項派生,這也就說這個新的控制項可以在ASP.NET2.0上運行。

  下面代碼顯示了擴充後的的開始部分:

namespace CustomControls
{
 namespace Grid
 {
  [ToolboxData("<{0}:xGrid runat=server></{0}:xGrid>")]
  public partial class xGrid : GridView
  {
  要使用這個控制項,只要簡單的把它通過VS.NET2005的工具列直接拖放到Web表單上即可。具體怎把該控制項添加VS.NET2005工具列上則不是本文討論的範圍。

  下面的代碼片斷顯示了它的基本使用

<xGrid:xGrid ID="XGrid1" runat="server" AutoGenerateColumns="False" />
  單擊(Single Row Click)

  這是該自訂控制項添加的第一個新特性,您現在把滑鼠放置到一行資料上然後單擊就會引起頁面資料的回傳,你可能認為使用這個功能實現主/從頁面,是的,使用RowClick可以實現這個功能。

  相關的屬性是:

  ·EnableRowClick:這個屬性可以取值為true/false,預設為false

  ·MouseOverColor:當EnableRowClick設定為true時,利用該屬性設定滑鼠移過一行資料顯示的結果。單擊和雙擊都使用這個功能。

  下圖顯示了運行結果,在這個運行結果裡,顯示了單擊一行時的效果。


  您可以在RowClick事件裡處理單擊的結果,示意代碼如下:

protected void XGrid1_RowClick(object sender, RowClickEventArgs e)
{
 Response.Write("You clicked row: " + e.GridViewRow.RowIndex);
}
  RowClickEventArgs參數預設是從EventArgs 類派生,並增加了一個名稱為GridViewRow 的屬性,這樣您就可以使用該屬性擷取當前行的索引。

  行的雙擊(Double Row Click)

  這是往擴充GridView添加的第二個功能。您現在只需要在一行上雙擊就會向伺服器產生資料回傳來處理請求。您可以通過雙擊讓當前行處於編輯預設。 在行的雙擊裡已經添加了RowDoubleClick事件,您可以使用該事件處理特定的商務邏輯

  相關的屬性

  EnableRowDoubleClick:取值為true或者false,預設值為false

  MouseOverColor:當EnableRowDoubleClick設定為true時,可以利用該屬性設定設定滑鼠移過行的效果,這個和單擊行的效果一樣。

  下圖顯示了運行結果


  您可以處理RowDoubleClick 事件,示意代碼如下:

protected void XGrid1_RowDoubleClick(object sender, RowDoubleClickEventArgs e)
{
 Response.Write("You double clicked row: " + e.GridViewRow.RowIndex);
}
  RowDoubleClickEventArgs 類時從EventArgs 類派生並添加了GridViewRow 屬性,使用該屬性可以給你更全的控制項

   基於行的操作功能表

  我們花費了一個半月左右的事件來研究GridView控制項,但是我們發現沒有一個GridView控制項可以使用ContextMenu,也就是說內建的GridView操作功能表控制項無法使用。

  我們不得不使用Dino Esposito開發的context meun,該菜單的開發文檔發布在MSDN雜誌上,本文後面會在資料檔案裡列出對該檔案的連結。 Dino Esposito開發的Context Menu主要使用ASP.NET1.1技術進行開發,我們已經建立了基於ASP.NET2.0 Context Menu項目,該項目拷貝了他的代碼,並進行了簡單的更改。其中,一個改變是在Context Menu項目裡添加了OnClientClick屬性,這樣在處理用戶端向伺服器請求的回傳前,開發人員可以將用戶端處理事件掛接到操作功能表裡。

  Context Menu使用的用戶端代碼主要是Javascript代碼,這裡的代碼在ASP.NET2.0裡已經作為資源(Resource)包括進去了。

  Context Menu現在已經是基於ASP.NET2.0的項目了並且已經整合到擴充的GridView控制項的每一行,現在當您右擊每一行時,您將可以訪問右擊事件。擴充的GridView控制項還有一個新的屬性:RightClickRow,該屬性可以返回當前行操作功能表

  相關的屬性如下:

  ·GridView控制項是具有操作功能表的,這裡的ID設定的就是在ASPX頁面上的GridView控制項ID

  ·RightClickedRow:該屬性設定操作功能表。

  下圖顯示了運行結果。


  當您在行上單擊滑鼠右鍵時彈出Context Menu菜單。這裡顯示了三個選項:

  ·Add a new Row:當選擇該選項後,將會在記錄裡出現建立行。

  ·Delete Row:允許你刪除當前右擊的行

  ·Edit Row:運行您設定當前行的模式 為編輯模式



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。