擴展 UpdatePanel 控制項 - 解決設計階段排版問題

<< 擴展 CommandField 類別 - 刪除提示訊息含欄位值 | Home | 擴展 Panel 控制項 - 自動維護捲軸位置 >>

擴展 UpdatePanel 控制項 - 解決設計階段排版問題

使用 ASP.NET AJAX 開發人員，一定不會錯過 UpdatePanel 這個超級控制項，它可以讓輕易的讓原有設計的頁面很輕易的具有 AJAX 的效果。可是在設計階段使用 UpdatePanel 去排版常造成我們的困擾，放置在 UpdatePanel 中的控制項無法正確呈現實際的排版狀況。

例如我們在 UpdatePanel 中只簡單放置 TextBox 及 Button 二個控制項

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="Button2" runat="server" Text="Button" /> </ContentTemplate> </asp:UpdatePanel>

理論上 TextBox 及 Button 應該在同一列上，可是在設計頁面上查看結果，TextBox 後竟換行才呈現 Button，如下圖所示。可是執行結果欲又就正常了，這樣的顯示結果在設計複雜的頁面常會造成相當大的困擾。

有人的作法是在 UpdatePanel 中放置一個 Panel ，設定 Panel 的 width 為固定寬度(如 800px)，來解決 UpdatePanel 設計階段排版的異常狀況。
其實會造成 UpdatePanel 在設計階段這種結果，主要是 UpdatePanel 在設計階段輸出的 HTML 碼沒有設定寬度的關係，所以我們繼承 UpdatePanel 下來改寫一個新的 TBUpdatePanel，並改寫它的 Designer 重新調整輸出設計階段的 HTML 碼來解決此問題。

我們先來看一下 TBUpdatePanel 的結果，後面再來詳述修改方式。同樣的，在 TBUpdatePanel 中只簡單放置 TextBox 及 Button 二個控制項。

<bee:TBUpdatePanel ID="TBUpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </bee:TBUpdatePanel>

在設計頁面上的結果如下圖所示，是不是正常了。

其實修改的方式一定比你想像中的簡單很多，首先撰寫 TBUpdatePanel 繼承 UpdatePanel，只修改它的 Designer 為 TBUpdatePanelDesigner。

< _ Designer(GetType(TBUpdatePanelDesigner)), _ ToolboxData("<{0}:TBUpdatePanel runat=server></{0}:TBUpdatePanel>") _ > _ Public Class TBUpdatePanel Inherits System.Web.UI.UpdatePanel End Class

再來就是如何撰寫 TBUpdatePanelDesigner，TBUpdatePanelDesigner 繼承 UpdatePanel 原有的 UpdatePanelDesigner，覆寫 GetDesignTimeHtml 方法來重新調整輸出的 HTML 碼。UpdatePanelDesigner 原本的輸出的 HTML 碼如下圖所示。

很明顯地，它最外層的 table 並未指定 witdh 才會導致設計階段的異常情形，所以我們只要將 table 的 width 設為 100% 就可以解決此問題。TBUpdatePanelDesigner 的完整程式碼如下，如此簡單的修改就可以永遠擺脫 UpdatePanel 的排版而困擾了。

''' <summary> ''' 擴充 TBUpdatePanel 控制項的設計模式行為。 ''' </summary> Public Class TBUpdatePanelDesigner Inherits System.Web.UI.Design.UpdatePanelDesigner Public Overrides Function GetDesignTimeHtml(ByVal regions As DesignerRegionCollection) As String Dim sHTML As String sHTML = MyBase.GetDesignTimeHtml(regions) sHTML = Left(sHTML, 7) & " width=""100%"" " & Mid(sHTML, 8) Return sHTML End Function End Class

程式碼下載: TBUpdatePanel.rar

ASP.NET 魔法學院

2008/3/17 00:50| 閱讀數 : 1803 | 2 人收藏我要推薦 | 7 Comments | 文章分類: Server Control | 訂閱

關連文章

Feedback

kinyo1978 2008/12/10 下午 12:09 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

您好~
我下載附檔執行Demo後,在TBUpdatePanel.vb中
Inherits System.Web.UI.UpdatePanel←出現型別 'System.Web.UI.UpdatePanel' 未定義。

Imports System.Web.UI ← 我已參考了.
請問還有其它要參考的嗎?

環境:VS2008
以上謝謝.
jeff377 2008/12/10 下午 12:46 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to kinyo1978 :
VS2005 的 UpdatePanel 才有這個問題，若你是使用 VS2008，不需使用這篇文章的方式做修改。
kinyo1978 2008/12/10 下午 01:03 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to jeff377 :
感謝Jeff,了解了..
以上
kinyo1978 2008/12/15 下午 02:59 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to jeff377 :
不好意思,在請教一下.
因為對方伺伏為 2.0的沒有支援到3.5.
如果我用VS2008新增一個專案，選擇.NET Framework 2.0的版本,而UpdatePanel的尺寸卻跟VS2005一樣小,這時我想修改而不知如何處理,可否指導一下呢?

以上
dotjum 2008/12/15 下午 03:07 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to kinyo1978 :
插花一下，我的解法在 UpdatePanel 中 ContentTemplate 加入一個 div 並設定為 runat="Server"
<div runat="server" id="div1" style="width: 750px;">
詳細可以參考這篇說明
[ASP.NET]AJAX UpdatePanel在設計畫面模式 design view 排版時亂在一起解決方法div
或是瓶水相逢.Net 跟我說過的方法
是拉一個 Panel 放在 UpdatePanel 中..然後要顯示的東西都放在 Panel 裡面...然後設定 Panel 的 Width...這樣 UpdtePanel 裡面的控制像就不會擠在一起了...
kinyo1978 2008/12/15 下午 03:30 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to dotjum :
感謝您的指導,那方去OK....
以上
jeff377 2008/12/15 下午 04:01 回覆

# re: 擴展 UpdatePanel 控制項 - 解決設計階段排版問題

to kinyo1978 :
這篇文章的做法就是改寫 UpdatePanelDesigner，改寫掉 UpdatePanel 在設計階段的行為。
如果你對控制項的實作不熟悉，可以去看我 2008/10 時一系列控制項的文章。

http://www.dotblogs.com.tw/jeff377/archive/2008/10.aspx

標題 *
名稱 *
Email	(將不會被顯示)
Url
回應
Remember Me? 登入後使用進階評論 Please add 7 and 7 and type the answer here: 請輸入驗證碼: